Capstone

Home

How Development Frameworks Influence Website Performance and User Experience

A cat sticking its tongue out

Mr. Silly

Why It Matters

Users notice performance before they notice the code.

Most people don't know what framework a website uses, but they CAN tell when a site loads slowly, breaks on a phone, or feels confusing. The tools developers choose can quietly shape those experiences.

Speed

Fast pages feel more professional, and they're easier to use, especially on mobile connections.

Responsiveness

A good layout should work on phones, tablets, laptops, and desktop screens.

First Impressions

If a website feels broken or slow, users may leave before reading the content.

Research Question

How much do development frameworks affect website speed, mobile layout, accessibility, and overall user experience?

Frameworks

Frameworks give developers a starting structure.

A development framework is a set of tools and patterns that helps developers build websites faster. Instead of starting from nothing, developers can use a framework to organize pages, styles, and repeated parts of a website.

Key idea: a framework is like a starter kit for building a website, but the developer still has to make smart choices.

Research focus: I compared React, Next.js, and Bootstrap because each one helps with a different part of web development.

React logo Next.js logo Bootstrap logo

Performance

Performance is about how efficiently a website reaches the user.

Loading

Largest Contentful Paint, or LCP, measures when the biggest visible part of a page appears. In simpler words, it asks: how long until the page looks loaded?

Goal: under 2.5 seconds.

Interactivity

Interaction to Next Paint, or INP, measures how fast a page reacts after a click or tap. If scripts get too heavy, the page can feel delayed.

Goal: under 0.2 seconds.

Visual Stability

Cumulative Layout Shift, or CLS, measures whether things jump around while the page loads. A stable layout helps users avoid clicking the wrong thing.

Goal: under 0.1 seconds.

A spotted cat with its tongue tip hanging out

Performance goal: make the page load faster than a cat can lick its nose.

UX

User experience includes more than appearance.

A website can look modern but still be frustrating. Good user experience means the site is readable, predictable, accessible, phone-friendly, and easy to navigate.

Usable: visitors can understand where they're at and what to do next.

Accessible: people with different needs can still use the site. This includes readable text, image descriptions, and clear structure.

Responsive: the layout adjusts to different screen sizes, like phones, tablets, and computers.

Responsive web design logo
A small kitten sitting and looking at the camera

If the layout works for everyone, even these cats can find the Next button.

Benefits

Frameworks can improve the development process.

Faster Building

Developers can use existing patterns instead of writing every layout and feature from scratch, which matters when a project has a short deadline.

Consistency

Reusable parts help pages feel connected instead of looking like separate projects with different styles.

Responsive Design

Many frameworks include tools that make mobile-friendly design easier to create.

Organization

Frameworks can help developers keep content, styling, and interactive code in clearer places.

Challenges

The wrong framework choice can create new problems.

Frameworks help, but they aren't automatic solutions. A framework can slow a website down if it adds too much code, gets used for a project that doesn't need it, or gets left with too many default styles.

A funny kitten sticking out its tongue

Too much unused code gives the browser this exact expression.

Extra Code

More tools can mean more files for the browser to download and run.

Learning Curve

Some frameworks have a lot of power but can be hard for beginners to understand quickly.

Generic Design

Sites can look alike when developers rely too much on default styles.

React

React is useful for interactive websites and apps because it's built around reusable components. A component is one piece of the interface, like a button, card, checklist, or menu, that can be reused.

Strength: Great for interactive interfaces.

Risk: Can become JS-heavy, meaning the browser has to download and run more code.

Examples: dashboards, social feeds, shopping carts, comment sections, and pages that update without fully reloading.

React: interactive cat checklist

For this example, the checklist can change without reloading the whole website. That's what React is useful for: updating one part of the screen while the rest of the page stays in place.

Pro: interactive updates get easier to organize as reusable pieces.

Loading the React component...

good.js

let snacks = 0;

treat.addEventListener("click", function() {
  snacks = snacks + 1;
  score.textContent = snacks;
});

Good JS waits for a click, does one small job, then stops.

React: too much JS running

React is helpful for interactive parts of a site, but it can be overused. If a page constantly runs heavy JS, the screen can feel delayed or choppy.

Con: too much JS can make simple interactions feel slower than they need to be.

Frame delay: paused.

cat.exe

bad.js

setInterval(function() {
  const started = performance.now();

  while (performance.now() - started < 85) {
    Math.sqrt(Math.random() * 1000);
  }
}, 220);

Bad JS keeps interrupting the page, so normal clicks and animations feel delayed.

Next.js

Next.js builds on React and adds more structure. It can prepare pages before users visit them, which can make the first load feel faster and make the site easier for search engines to read.

Strength: Adds tools for speed and project organization.

Risk: Has more setup than basic HTML, CSS, and Javascript.

Examples: blogs, business sites, documentation sites, online stores, and pages that need fast first loading.

Next.js: fast cat menu

Imagine a cafe website with separate pages for each menu item. Next.js can help prepare those pages before visitors open them, so the site can feel fast and organized instead of building everything at the last second.

Pro: the viewer can switch between prepared pages quickly.

/menu/tuna-toast

A pretend menu page that's ready before the visitor clicks it.

Next.js: overbuilding a tiny site

Next.js has a lot of power, but not every website needs that much structure. If the project is only one simple page, the setup can be more complicated than the actual website.

Con: using a large framework for a tiny page can add extra setup, files, and decisions.

One-Page Cat Poster

Goal: show one cat picture and one sentence.

package.json app folder layout file build command deployment settings

The framework isn't bad. It's just more tool than this tiny example needs.

Bootstrap

Bootstrap focuses on layout, styling, and responsive design. Responsive design means the page changes shape for different screen sizes. Bootstrap helps developers make mobile-friendly pages quickly.

Strength: Fast way to create layouts that work on different screen sizes.

Risk: Can look generic if the default style isn't customized.

Examples: landing pages, school projects, admin panels, forms, and simple responsive page layouts.

Bootstrap: responsive card layout

In this example, Bootstrap helps line the cards up in a grid and adjust them for different screen sizes. When the page gets smaller, the cards stack instead of getting squeezed.

Pro: mobile-friendly layouts get fast to build with existing classes.

A funny kitten sticking out its tongue
Bootstrap Grid

Fast Layout

Bootstrap classes handle the columns and spacing.

A cat sticking its tongue out
Responsive

Mobile Friendly

On smaller screens, the cards stack automatically.

A spotted cat with its tongue tip hanging out
Tradeoff

Generic Risk

Without custom styling, Bootstrap sites can feel similar.

Bootstrap: default design

Bootstrap can help a layout come together quickly, but relying only on default styles can make a site look generic. It may technically work, but it doesn't feel very personal or polished.

Con: default Bootstrap styles can look familiar unless they're customized.

Default Card Title

This layout works, but it feels like a template because nothing has been customized.

Comparison

Each framework affects performance and experience differently.

Framework
Best For
Possible Concern
React
Interactive pieces and app-like pages
Can add too much JS
Next.js
Organized React sites with speed features
More setup and concepts to learn
Bootstrap
Quick mobile-friendly layouts and consistent styling
Can look generic without customization

React

React organizes pages into components, reusable interface pieces. This helps organization, but the page can slow down if it sends too much JS.

Next.js

Next.js adds structure around React. It helps with routes, prepared pages, and deciding what work happens before the browser gets the page.

Bootstrap

Bootstrap doesn't handle app logic, like saving data or running a shopping cart. It mainly helps with layout and styling. The weak spot is that default designs can look familiar.

Website Demonstration

Why I chose to present my topic like this

Performance choice: most of the presentation uses plain HTML, CSS, and Javascript, while certain sections loaded framework tools for comparison or as an example.

UX choice: each section acts like a slide, so the presentation has a clear beginning, middle, and end.

Reusability: as you could probably tell, I could reuse a lot of the sections from other slides.

Findings

My main finding is that frameworks are tools to help.

Positive Impact

Frameworks can improve development speed, loading speed, responsiveness, and organization.

Negative Impact

Poor choices, unused features, and large scripts can reduce performance and hurt UX (user experience).

Balanced View

The best framework depends on the project, the developer's skill level, and the needs of the users.

Reflection

What I learned

This project showed me that building a website isn't just about making it look good. Performance, accessibility, layout decisions, image choices, and code organization all affect how a real person experiences the final product.

Conclusion

Frameworks shape both the building process and the final experience.

Development frameworks influence website performance and user experience by shaping how fast a site loads, how smoothly users interact with it, and how well it works across devices. The best choice is the framework that fits the project, not just the one that's popular.

Bibliography

Sources

https://web.dev/articles/vitals

https://developer.mozilla.org/en-US/docs/Web/Performance

https://www.w3.org/WAI/standards-guidelines/wcag/

https://designsystem.digital.gov/documentation/accessibility/

https://react.dev/

https://nextjs.org/docs/app/getting-started/server-and-client-components

https://getbootstrap.com/docs/5.3/layout/grid/

POV: Capstone presentations