31 ways to improve website speed and performance
Are you struggling to improve your website speed and performance? This post covers all the ways to speed up a website and improve website performance. There are ways to improve website performance by changing front-end code, improving web servers, making changes to network and infrastructure, and much more.
Table of contents
- Introduction
- Lazy-loading images
- Optimizing images
- Using CDN
- Minifying code
- Setting up caching
- Serving with gzip
- Lazy-loading code
- Code splitting
- Inlining code
- Using web-safe fonts
- Optimizing above the fold
- Avoiding hero images
- Using a dedicated web server
- Using AMP-pages
- Using Signed Exchanges
- Optimizing DNS
- Using service workers
- Pre-caching requests
- Avoiding external network requests
- Preloading resources
- Pre-connecting to origins
- Avoiding auto-placed ads
- Using indexes for queries
- Paginating queries
- Avoiding inlining everything
- Optimizing sprites and fonts
- Avoiding lazy-loading above the fold
- Avoiding typical image hack
- Avoiding inlining fonts
- Render-blocking JavaScript
- Avoiding loading-overlays
Page speed has become a ranking factor in Google Search. To do well in search results, websites must consider making their content load as fast as possible.
Improving website speed and performance also improves rankings in search results and is a matter of good user experience.
Many studies, such as this one, have shown how improving page speed and website performance can lead to better user engagement and more conversions through a web page.
Introduction
This post covers all the possible ways you can improve website speed and performance.
The main principle behind a fast website is its physical location in relation to the end-user and the number of bytes transferred over the internet.
More bytes equals more load time, and a longer distance between the document and the end-user means more travel time across the web.
Everything around this principle is either speeding things up or slowing things down.
This list is ordered by the most important first to the least important last.
Lazy-loading images
Lazy-loading images make sure that pages load faster by not downloading images below the fold, meaning that the user has to scroll down to see them.
According to HTTP Archive, at least 50% of websites’ weight is images. Modern browsers support a native way for lazy-loading images.
Optimizing images
Image optimization means editing, resizing, and compressing an image so that the image weight stays as small as possible while maintaining good image quality.
As images are the most requested filetypes on the modern web, optimizing images for the web is essential.
Using CDN
CDN helps load websites faster by minimizing the delivery distance from end-users geographical location to the website.
The closer the end-user is to the website, the faster it loads since data doesn’t have to travel as long of a distance.
Minifying code
Minifying code, such as JavaScript and CSS, means compressing files and removing unnecessary bytes from the final files to reduce file weight.
Typically one character equals one byte, so removing all unnecessary characters from delivered files reduces bandwidth usage of a website.
Setting up caching
Caching is a method to reduce the time it takes to deliver a website over the network.
Like using a CDN, caching aims to serve resources closer to the end-user.
Serving with gzip
Gzip is a compression format that aims to reduce bytes with HTTP requests.
Many hosting platforms, CDNs, proxy servers, and load balancers provide automatic gzip compression.
Lazy-loading code
Lazy-loading code means loading parts of a web page, such as JavaScript or CSS, later during the user session.
Lazy-loading parts of a web page improve the initial load time of a web page.
Code splitting
Code splitting means splitting website code into smaller chunks so they can be loaded on demand.
Inlining code
Inlining code means reducing external network requests by adding chunks of code directly to the web page source code.
When code is added directly to the web page source, it usually loads faster when it doesn’t have extra round trips to fetch chunks of code.
Using web-safe fonts
Web-safe fonts are expected to be present in the users’ computer systems.
When using web-safe fonts, end-users do not have to download font libraries as they rely on fonts already found in their operating system.
Optimizing above the fold
Above the fold refers to the area visible for the end-user as they open up a web page for the first time.
Avoiding hero images
When optimizing a web page for maximum performance, loading a large image above the fold area called a hero image is considered a bad practice.
Loading a hero image during the initial page load dramatically slows the rendering process.
Using a dedicated web server
Websites loaded using a web server, such as WordPress, can benefit from using a dedicated server.
Dedicated web servers do not share resources with other websites and can perform better during high traffic periods.
Using AMP-pages
AMP is a web framework that provides tools and guidelines to help website owners deliver their content with a better page experience.
AMP was developed by Google and is used primarily for improving websites’ performance metrics to improve ranking in search results.
Using Signed Exchanges
Signed Exchanges (SGXs) allow third parties to distribute content while maintaining full assurance and attribution of its origin.
Optimizing DNS
DNS is responsible for the first handshake between the end-user and the website. Choosing the right DNS provider can speed up the time it takes to finish this first handshake.
Using service workers
Service workers are types of Web Workers that allow websites to execute scripts outside the main thread, in the background.
Pre-caching requests
One of the benefits of using a service workers is the ability to precache resources and network requests.
Precaching resources and network requests allow browsers to store these directly within a browser.
Precaching will enable websites to deliver an offline experience.
Avoiding external network requests
Each external network request takes up network bandwidth and slows down the website. A website can improve speed and performance by avoiding unnecessary external network requests.
Preloading resources
Preloading resources tells the browser that the web page will need a resource later down the web page life cycle, so the browser fetches the resource ahead of time.
Pre-connecting to origins
Pre-connecting means informing the browser that a web page intends to establish a connection to another origin and that the connection should be opened beforehand.
Avoiding auto-placed ads
Ads slow down a web page, and auto-placed ads can slow down a web page even more.
Using indexes for queries
Database indexes improve the speed of data retrieval operations by quickly locating data without searching the database every time it is accessed.
Paginating queries
Paginating database queries splits query results into smaller chunks and makes operations faster by reducing the size of the results.
Avoiding inlining everything
While inlining can improve web page performance, inlining too much code can also hurt web page speed.
Optimizing sprites and fonts
Many websites often load large libraries of fonts and sprites that include many unused resources. Optimizing these libraries only to have the resources used by the web page can reduce the final size of the library.
Avoiding lazy-loading above the fold
While lazy-loading resources, such as images, can speed up the web page, implementing lazy-loading mechanisms incorrectly can also hurt web page performance. The web page should always try to lazy-load resources below the fold.
Avoiding typical image hack
Too often, web pages try to avoid loading images by placing them inside containers with css-property-value: display: none. While the image won’t be displayed when viewing the web page, it is still loaded over the network.
Avoiding inlining fonts
Inlining fonts cause the browser to make multiple network requests while growing the size of the original document.
Instead, fonts should be downloaded parallel in separate asynchronous requests while not blocking the rendering of the document.
Render-blocking JavaScript
Web pages should try to execute as little JavaScript as possible during the initial page load.
Executing JavaScript during the initial loading of the page can become render-blocking.
Avoiding loading-overlays
Loading overlays are considered a bad user experience.
Instead of displaying a loading overlay for the end-user, web pages should aim to deliver their main content as quickly as possible.