Loading Speed
Frameworks can affect how quickly a website loads its files, images, styling, and scripts.
How Development Frameworks Influence Website Performance and User Experience
This capstone looks at how tools like React, Next.js, and Bootstrap can affect how fast a website loads, how easy it is to use, and how well it works on different devices.
Start PresentationResearch Question
To what extent do development frameworks affect website speed, responsiveness, accessibility, and overall user experience?
Websites are not only judged by how they look. Users also care about how fast the website loads, how simple it is to navigate, and whether it works properly on phones, tablets, and computers.
What is a Development Framework?
A development framework is a set of pre-built tools and code that helps developers create websites more efficiently. Instead of writing every part from scratch, developers can use frameworks to organize their code, create layouts, and build reusable parts of a website.
How Frameworks Affect Performance
Responsiveness
A well-built website should respond quickly when users click buttons, scroll, or move between sections.
File Size
Some frameworks add extra code. If a developer uses too much unnecessary code, the website can become slower.
How Frameworks Affect User Experience
Navigation
Frameworks can help developers create menus, buttons, and page sections that are easy to use.
Mobile Design
Many frameworks make it easier to build layouts that adjust to different screen sizes.
Consistency
Reusable components help keep fonts, spacing, buttons, and layouts consistent across a website.
Framework Examples
React
React is commonly used for interactive websites and web apps. It is useful because developers can build reusable components, but performance depends on how much JavaScript the site uses.
Next.js
Next.js is based on React, but it includes extra performance features. It can help websites load faster by preparing pages more efficiently.
Bootstrap
Bootstrap is mostly used for layout and design. It helps create responsive websites quickly, but sites can look generic if they are not customized.
Framework Comparison
| Framework | Performance | User Experience | Best For |
|---|---|---|---|
| React | Good, but depends on optimization | Interactive and flexible | Dynamic websites and apps |
| Next.js | Strong performance features | Fast and smooth when built well | Professional and content-heavy websites |
| Bootstrap | Good for simple layouts | Consistent and mobile-friendly | Simple responsive websites |
This Website as a Demonstration
I chose to present my capstone as a website because the topic itself is about web development. This website demonstrates some of the same ideas I researched, such as navigation, responsive design, consistent sections, readable layout, and user experience.
Even though this website does not use a large framework, it still uses framework-inspired design ideas, such as reusable cards, repeated section layouts, and a consistent navigation system.
My Findings
My findings show that frameworks do not automatically make a website better. They give developers useful tools, but the final result still depends on how well the developer uses those tools. A framework can improve speed, layout, and consistency, but it can also slow a website down if it adds too much unnecessary code.
Conclusion
Development frameworks influence website performance and user experience by shaping how websites are built, loaded, and interacted with. A good framework can help create a fast, responsive, and accessible website, while poor framework choices or poor optimization can make a website slower and harder to use.