Web TechnologiesCourse and practice

Judging a front end

How to judge a front end on page weight, speed on real phones, search engines, accessibility, how long its framework will last and who can maintain it, with figures from named studies.

7 parts · about 6 min

Present Cheat sheet

Page weight

Page weight is the total size of the files a page downloads. The Web Almanac 2025, a yearly study by the HTTP Archive, measured millions of sites in July 2025. The median home page on a phone weighed about 2.6 MB, up from 2.4 MB a year earlier. Pages keep getting heavier.

The chart shows what that weight is made of, kind by kind. Each figure is the median for that kind of file, so they don't add up to the total. Images weigh the most, about 910 KB (a kilobyte, KB, is a thousandth of a megabyte). JavaScript comes next, about 630 KB, then fonts, about 120 KB, style sheets (CSS), about 80 KB, and the HTML itself, about 20 KB.

The two biggest don't cost the same. An image is downloaded, then shown. JavaScript is downloaded, then the phone has to run it, and an ordinary phone runs it much more slowly than a recent laptop. Frameworks add JavaScript, and apps built in the browser add the most, since their script builds the whole page.

What a typical home page downloads on a phone, by kind of file, in the Web Almanac 2025Images: about 910 KB. JavaScript: about 630 KB. Fonts: about 120 KB. Style sheets (CSS): about 80 KB. HTML: about 20 KB. Source: Source: HTTP Archive, Web Almanac 2025 (July 2025). Each figure is the median for its kind of file, so they don't add up to the total.A typical home page on a phone: about 2.6 MB in allImagesabout 910 KBJavaScriptabout 630 KBFontsabout 120 KBStyle sheets (CSS)about 80 KBHTMLabout 20 KBSource: HTTP Archive, Web Almanac 2025 (July 2025). Each figure is the median for its kind of file, so theydon't add up to the total.

Swipe sideways to see the whole figure.

Figure 1

Cheat sheet

Page weightpoids de la page
the total size of all the files a page downloads, measured in megabytes (MB).
Medianmédiane
the middle value: half of the pages weigh more, and half weigh less.
Kilobytekilo-octet, Ko
a unit of file size, a thousandth of a megabyte, written KB.
HTTP ArchiveHTTP Archive
a project that measures millions of websites every month and publishes the yearly Web Almanac.

Speed on real phones

Chrome measures how real visits feel on real phones, with three measures that Google calls the Core Web Vitals. The first is how fast the main content appears. The second is how fast the page reacts when you tap. The third is whether things jump around while the page loads. Google uses them when it ranks pages in its results.

The HTTP Archive publishes, for each tool it can detect, the share of sites that pass all three on phones. In September 2026, 53% of all sites passed. Sites on Wix passed most often, at 81%, then Shopify at 76% and Astro at 71%. WordPress sites were at 48%, React at 44%, Next.js at 36% and Angular at 17%. The chart shows these figures.

They aren't a verdict on each tool. Hosted builders do the speed work once, for all their sites, while large web applications are heavier by nature, whatever they're built with. But they show that some tools make speed the default, and others leave it to the developers. And unlike a Lighthouse score, measured once on one computer, these figures come from real visits.

The share of sites that pass all three Core Web Vitals on phones, by the tool they're made with, in September 2026All sites: 53%. Wix: 81%. Shopify: 76%. WordPress: 48%. Astro: 71%. Svelte: 54%. React: 44%. Vue.js: 36%. Next.js: 36%. Angular: 17%. Source: Source: HTTP Archive, Core Web Vitals Technology Report, September 2026, real Chrome users on phones. These figures show a link, not a cause.The share of sites that pass all three Core Web Vitals on phonesFor comparisonAll sites53%Builders and platformsWix81%Shopify76%WordPress48%FrameworksAstro71%Svelte54%React44%Vue.js36%Next.js36%Angular17%Source: HTTP Archive, Core Web Vitals Technology Report, September 2026, real Chrome users on phones. These figures show a link,not a cause.

Swipe sideways to see the whole figure.

Figure 2

Cheat sheet

Core Web VitalsSignaux Web essentiels
three measures of real visits that Google uses: how fast content appears, reacts to a tap and stays still.
Field datadonnées terrain
measures collected from real visitors' devices, rather than from one test on one computer.
LighthouseLighthouse
a free audit in Chrome's developer tools that scores a page's speed and accessibility and lists its problems.

What search engines and link previews read

Search engines rank what they find in the page's HTML, so the content has to be in it. Pages made in advance or by a server have it. Apps built in the browser may not, as the lesson Three ways to make a page showed.

Each page also needs a few lines that visitors don't see on the page itself. A title and a short description, which search engines show in their results. And a preview picture, which WhatsApp or LinkedIn show when someone pastes the link. When every page has the same ones, copied from the home page, all the results look alike.

Google runs scripts, but later and not always. Other robots often don't run them at all. In December 2024, a study by Vercel found that none of the main AI crawlers ran JavaScript: the robots of ChatGPT and Claude downloaded the scripts but never ran them. You can check a page yourself: "View page source" shows what robots receive, and pasting a link into a chat shows its preview.

Cheat sheet

Search enginemoteur de recherche
a service, such as Google or Bing, that reads pages across the web and lists them in its results.
Crawlerrobot d'indexation
a program that visits pages automatically to read them, for a search engine or an AI assistant.
Link previewaperçu de lien
the title, text and picture that a messaging app or social network shows when someone pastes a link.
Page sourcecode source de la page
the HTML exactly as the server sent it, shown when you right-click a page and choose "View page source".

Accessibility

The WebAIM Million tests the home pages of the million most visited sites every year. In February 2026, 96% of them failed automated accessibility checks, with 56 errors per page on average. The most common were text with too little contrast (84% of pages), images without alternative text (53%) and form fields without labels (51%).

The study also counts errors by tool, while warning that the tool isn't always the cause. Pages built with Astro had 9 errors on average, Wix 33, React 44 and WordPress 53, while Vue had 65 and Shopify 75.

Frameworks don't make a site accessible or not, but components multiply whatever they contain. A component with an error, such as a box that acts as a button without being a real button, repeats it on every page that uses it. Fixed once, it's fixed everywhere. And automated tools find only part of the problems: someone has to try the site with the keyboard alone and with a screen reader. The lesson Leaving people out explains what French law requires.

Cheat sheet

Accessibilityaccessibilité
how well people with a disability can use a site, for example with a screen reader, the keyboard or larger text.
Alt texttexte alternatif
a short text that replaces a picture, read aloud by screen readers and shown if the picture doesn't load.
Screen readerlecteur d'écran
software that reads a page aloud, so that blind people and people with poor sight can use it.
WCAGWCAG
the international guidelines for making web content accessible, on which the French RGAA is based.

How long a framework lasts

A site lives for years, but each version of its framework is fixed for a limited time. The diagram shows the frameworks of this topic since 2010.

Two have already reached the end. AngularJS, released in 2010, stopped receiving any fixes in January 2022. Vue 2 reached its end of life on 31 December 2023. Its successor, Vue 3, comes with a guide for moving from one to the other. Others publish their plans: Angular's website gives its calendar, and since version 22 it releases one major version a year and supports each for 24 months. React has no fixed calendar: React 19, its current major version, came out in December 2024.

The tools around a framework age too. Create React App was for years the usual way to start a React project. In February 2025, React's own blog announced it was deprecated, noting that it had no active maintainers. A site that follows each new version with small, regular updates stays supported. One that waits for years faces a large jump, or a rewrite.

When each front-end framework came out, and the two that no longer receive any fixesAngularJS: since 2010; no fixes since january 2022. React: since 2013, still supported. Vue: since 2014, still supported. Vue 2: since 2016; no fixes since the end of 2023. Angular: since 2016, still supported. Svelte: since 2016, still supported. Next.js: since 2016, still supported. Nuxt: since 2016, still supported. SvelteKit: since 2022, still supported. Astro: since 2022, still supported.201020122014201620182020202220242026TodayAngularJSNo fixes since January 2022ReactVueVue 2No fixes since the end of 2023AngularSvelteNext.jsNuxtSvelteKitAstro

Swipe sideways to see the whole figure.

Figure 3

Cheat sheet

End of supportfin de support
the date after which the makers of a tool stop fixing it, even for security problems.
Major versionversion majeure
a new version of a tool that can change how it works, so projects may need work to move to it.
Deprecatedobsolète, déprécié
described by its makers as no longer recommended, usually because it will stop receiving fixes.
Migrationmigration
moving a site from one tool or version to another, while keeping its content and behaviour.

Who you can hire

Choosing a framework also chooses who can maintain the site after its first developer. So look at the job market where you are.

In France, Angular appears in as many job offers as React, or more. On 23 October 2026, Indeed France showed more than 2,000 offers mentioning Angular, more than 1,000 for React, more than 400 for Vue.js and more than 25 for Svelte. Free-Work, a job site for IT work and freelance missions, showed 377 offers for Angular, 261 for React, 194 for Vue.js and 9 for Svelte. So in France, employers ask for Angular at least as often as for React.

The freelancers tell another story. On Malt, a French platform for freelancers, about 6,600 offer React, against about 670 for Angular (which Malt lists under the name AngularJS) and 670 for Vue. Experienced ones charge similar day rates: about €560 a day for React or Angular, and €520 for Vue, according to Malt's 2026 rates. A rarer framework, such as Svelte, leaves fewer people who could take over.

Cheat sheet

Freelancerfreelance, indépendant
a person who works alone for several clients, paid per project or per day.
Day ratetaux journalier, TJM
the price of one day of a person's work, which agencies and freelancers use to price a project.
Job offeroffre d'emploi
a public announcement that a company wants to hire someone, listing the skills it asks for.

What to ask

Ask these questions before signing off a front end, and again a year later.

Ask how heavy the main pages are, and how fast they are on an ordinary phone, with figures from real visits rather than a single score. Ask what a search engine finds in the HTML, and check it with "View page source" and a link pasted into a chat: each page should have its own title, description and picture. Ask who tested the site with a keyboard and a screen reader, not only with an automated tool. And ask which version of the framework the site uses, until when it will receive fixes, and who else could maintain it where you are.

Cheat sheet

Page weightpoids de la page
the total size of all the files a page downloads, measured in megabytes (MB).
Core Web VitalsSignaux Web essentiels
three measures of real visits that Google uses: how fast content appears, reacts to a tap and stays still.
Screen readerlecteur d'écran
software that reads a page aloud, so that blind people and people with poor sight can use it.
End of supportfin de support
the date after which the makers of a tool stop fixing it, even for security problems.

Practise this strand

These questions put you in the situations this lesson describes. You answer in your own words, and you get a level, feedback and a full answer.