Page speed has become a ranking factor in Google Search. This means that in order to do well in search results, websites have to consider making their content load as fast as possible.
Improving website speed and performance is not only a matter of improving rankings in search results but also 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.
In this post I am covering all the possible ways I personally know on how to improve website speed and performance.
The main principle behind fast website is it’s physical location in relation to the end-user and also the amount of bytes transferred over the internet.
More bytes equals more load time and longer distance between the document and the end-user means more travel time across the web.
Everything that happens around this principle is either speeding things up or slowing things down.
This list is ordered by the most important first to least important last, from my personal point of view.
1. Lazy-loading images
Lazy-loading images makes sure that pages load faster by not downloading images that are below the fold, meaning that the user has scroll down to see them.
2. 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 filetype in modern web, optimizing images for web is really important.
3. Using CDN
CDN helps loading websites faster by minimizing distance of delivery 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.
4. Minifying code
Typically one character equals one byte so removing all unnecessary characters from delivered files reduces bandwidth usage of a website.
5. Setting up caching
Caching is a method to reduce the time it takes to deliver a website over network.
Similar to using a CDN, caching aims to serve resources closer to the end-user.
6. Serving with gzip
Gzip is compression format that aims to reduce bytes with http requests.
Many hosting platforms, CDNs, proxy servers and load balancers provide automatic gzip compression.
7. Lazy-loading code
Lazy-loading parts of a web page improve the initial load time of a web page.
8. Code splitting
Code splitting means splitting website code into smaller chunks so they can be loaded on demand.
9. 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 code web page usually loads faster when it doesn’t have to extra round trips to fetch chunks of code.
10. Using web-safe fonts
Web-safe fonts are fonts that are expected to be present in the users’ computer system.
When using web-safe fonts, end-users’ do not have to download font libraries as they rely on fonts already found on their operation system.
11. Optimizing above the fold
Above the fold refers to the area which is visible for the end-user as they open up a web page for the first time.
12. Avoiding hero images
When optimizing web page for maximum performance loading a large image in the above the fold area, which is called a hero image, is considered as a bad practice.
Loading a hero image during the initial page load slows down the rendering process dramatically.
13. Using dedicated web server
Websites that are 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 a lot better during high traffic periods.
14. Using AMP-pages
AMP is a web framework that aims to provide a set of tools and guidelines to help website owners deliver their content with better page experience.
AMP is developed by Google and is user primarily for improving websites’ performance metrics to improve ranking in search results.
15. Using Signed Exchanges
Signed Exchanges (SGXs) allow third parties to distribute content while maintaining full assurance and attribution of its origin.
16. Optimizing DNS
DNS is responsible for the very 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.
17. Using service workers
Service workers are types of Web Worker that allow websites to execute scripts outside the main thread, in the background.
18. 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 allows browsers to store these directly within a browser.
Precaching allows websites to deliver an offline experience.
19. Avoiding external network requests
Each external network request takes up network bandwidth and slows down the website. By avoiding unnecessary external network request website can improve speed and performance.
20. Preloading resources
Preloading resources tells the browser that the web page is definitely going to need a resource later down the web page life cycle and so the browser fetches the resource ahead of time.
21. 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 before-hand.
22. Avoiding auto-placed ads
Ads slow down a web page and auto-placed ads can slow down a web page even more.
23. Using indexes for queries
Database indexes improve the speed of data retrieval operations by quickly locating data without having to search the database every time it is accessed.
24. Paginating queries
Paginating database queries splits query results into smaller chunks and so makes operations faster by reducing the size of the results.
25. Avoiding inlining everything
While inlining can improve web page performance, inlining too much code can also hurt web page speed.
26. Optimizing sprites and fonts
Many websites often load large libraries of fonts and sprites that include a lot of unused resources. Optimizing these libraries to only include the resources which are used by the web page can reduce the final size of the library.
27. 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. Web page should always try to lazy-load resources below the fold.
28. Avoiding common 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.
29. Avoiding inlining fonts
Inlining fonts causes 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.
31. 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.