Appearance
A4 · Website Performance
Spec reference: Learning Aim A - Principles of Website Development Key idea: Many factors affect how fast and reliably a website loads - some on the server, some on the user's device.
How to improve website performance
Client-side vs server-side factors
Performance issues come from two places: the server (where the website is hosted) and the client (the user's device and connection).
Client-side factors
These depend on the user's hardware and connection:
| Factor | How it affects performance |
|---|---|
| Download speed / bandwidth | Slower internet = longer loading times |
| NIC (Network Interface Card) speed | Limits how fast data can be received |
| Router speed | Bottleneck between device and internet connection |
| ISP (Internet Service Provider) | Determines maximum bandwidth available |
| Browser | Different browsers parse HTML/CSS/JS differently - some faster than others |
| Available RAM | Low RAM causes the browser to slow down when running complex pages |
| Processor speed | Affects how fast JavaScript and CSS animations are processed |
| Browser cache | Cached resources load instantly - first visit slower, repeat visits faster |
INFO
Client-side performance is outside the developer's control - you cannot force users to upgrade their hardware. This is why optimising your code and assets is so important.
Server-side factors
These depend on the web server hosting the website:
| Factor | How it affects performance |
|---|---|
| Upload/download speed of server | Determines how fast it can send files to users |
| Number of HTTP requests | Each file (image, CSS, JS) requires a separate request - more requests = slower |
| File types and sizes | Large uncompressed images and videos slow loading significantly |
| Server processing power | Affects how quickly server-side scripts (PHP, Python) generate pages |
| CDN (Content Delivery Network) | Distributes content across global servers - users load from nearest server |
Where scripts run
A key concept is whether code runs on the client (in the user's browser) or the server.
| Client-side | Server-side | |
|---|---|---|
| Language | HTML, CSS, JavaScript | PHP, Python, Node.js, Ruby |
| Runs on | User's browser/device | Web server |
| Example | Form validation, dropdown menus, animations | Database queries, login authentication, generating dynamic pages |
| Performance impact | Uses user's CPU and RAM | Uses server resources - not affected by user's device |
| Privacy | Code is visible to users (View Source) | Code hidden from users |
Client-side scripts can personalise experiences and offload work from the server - but they rely on the user's device being capable enough to run them.
Browser compatibility
Different browsers (Chrome, Firefox, Safari, Edge) interpret HTML and CSS slightly differently. A page that looks perfect in Chrome may break in Safari.
W3C standards define how HTML and CSS should be interpreted. Writing valid, standards-compliant code improves cross-browser compatibility.
How to check
- W3C Validator (validator.w3.org) - checks your HTML and CSS for errors
- BrowserStack - test your site in multiple browsers simultaneously
- Chrome DevTools (F12) - inspect and debug rendering issues
TIP
Always test your website in at least three browsers: Chrome, Firefox and Safari (or Edge). Mobile testing is also essential.
Responsiveness
A responsive website adapts its layout to the screen size of the device viewing it. This is achieved using CSS media queries.
css
/* Default styles - mobile first */
.container {
width: 100%;
padding: 10px;
}
/* Tablet and above */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1200px) {
.container {
width: 1140px;
}
}Google uses mobile-first indexing - it ranks the mobile version of your site, not the desktop version. A non-responsive site will rank poorly.
Optimising performance
Key techniques to improve loading speed:
| Technique | Effect |
|---|---|
| Compress images | Use WebP format - much smaller than JPG/PNG |
| Minify CSS/JS | Remove whitespace and comments from code files |
| Reduce HTTP requests | Combine CSS files, use CSS sprites for icons |
| Enable browser caching | Returning visitors load from cache, not server |
| Use a CDN | Serve files from a server closer to the user |
| Lazy loading | Images only load when they're about to appear on screen |
| Async/defer scripts | Load JavaScript without blocking page rendering |
Measuring performance - Google Lighthouse
Run Lighthouse from Chrome DevTools (F12 → Lighthouse tab):
| Score category | What it checks |
|---|---|
| Performance | Loading speed, Time to Interactive, Cumulative Layout Shift |
| Accessibility | Alt text, colour contrast, keyboard navigation |
| Best Practices | HTTPS, no console errors, modern APIs |
| SEO | Meta tags, mobile-friendly, crawlable links |
Scores are out of 100. Green (90-100), Orange (50-89), Red (0-49).
Your teacher has included BBC News and Sky News Lighthouse reports in your course materials - these are real examples of how professional sites score.
Summary
| Term | Meaning |
|---|---|
| Client-side | Code/processing that runs on the user's device |
| Server-side | Code/processing that runs on the web server |
| HTTP request | A request the browser makes to the server for each file |
| CDN | Content Delivery Network - servers distributed globally to serve files faster |
| Responsive design | Layout that adapts to different screen sizes |
| Media query | CSS rule that applies styles based on screen size |
| W3C | World Wide Web Consortium - the body that sets web standards |
| Lighthouse | Google tool that audits website performance, accessibility, SEO |
Test Yourself
Question 1 of 5
A user with a slow internet connection reports that a website loads slowly. This is an example of which type of performance factor?