When it comes to page load time, there are two distinct parts that any website manager or developer should consider: The back end load time and the front end load time.
Back end load time is important because it is the time a website visitor is waiting before any information from your website is sent to their browser.
If your website has a long back end load time, users will be waiting in front of a blank screen without even seeing the name of your site populate in their window, and may navigate away from the page. Back end load time consists of the time it takes the browser to look up your website’s IP address, connect to your server, do any SSL negotiations for HTTPS, and for your web server to generate and serve the HTML document to the browser.
FEO for Faster Website Performance
These elements mean that this type of website is often very heavy on the front end. While a majority of modern websites include over 100 requests per page, we often see ecommerce pages with 300 or more requests. Because of this it is crucial that ecommerce websites use a variety of front end optimization techniques to improve their page load time and more importantly, how users perceive their page load time.
As shown by WebPageTest’s Speed Perception challenge and our explanation of SpeedIndex, the full page load time is often not a good indicator of how visitors actually experience your website’s speed. This is because total page load time includes elements that load in the background of a website and may continue to load for several seconds after all visible elements are completed. What is really important is that a user can interact with your page - scroll through it, view images, and click on links to navigate around.
To improve user experience in this way, websites must focus on smart front end optimizations that improve not only image load time but also ensure that important elements load first. Below are several tips to improve front end load time.
Set Browser Caching
Caching content in your visitors’ browsers will mean that images, CSS files and more will be stored on each visitor’s computer so if they visit your website or the same page more than once the page can partially load from elements they already have saved. This is especially useful for websites which have many images, such as ecommerce websites which visitors often browse several times before making a purchase. Utilizing browser caching will both improve user experience for your visitors and reduce server load as your web server will not have to re-generate cached files.
To enable browser caching you will need to set the request headers of your files to use caching and specify how long each file or file type can be saved for.
Minify CSS and Reduce Requests
CSS files for fonts and styling help make your website unique and consistent across pages, but having large CSS files or multiple CSS files that need to be loaded can slow down your front end load time. There are a few ways you can improve how CSS loads.
- Minify CSS: By minifying CSS you are essentially flattening the CSS document to make it smaller, reducing unnecessary tabs, spaces, and code that make it easier for you to read and edit files but are not actually needed. There are many free tools that will minify CSS for you.
- Combine CSS Files: If you are using several CSS files and fetching some CSS from external sources, you can com,bine these into one file to reduce the number of requests a browser has to make. While HTTP/2 allows for multiple requests to be made at once, overall load time will still be reduced if you have fewer and more condensed requests.
- Inline CSS: Small CSS files can be added directly to the HTML document rather than requested as a separate file. This will again reduce the number of requests a browser makes, although if you are not caching the HTML document you will need to consider if caching the CSS file separately would result in a greater speed improvement. This may be the case with larger CSS files which is why we recommend inline CSS mainly for small CSS files.
Lazy Load Images
So called “lazy loading” of images will load images based on where they are located on the page: this ensures that images above the fold are loaded first and that images below the fold do not delay the perceived completeness of the page. This trick is useful for websites with a large number of images that are not immediately viewable as it will prevent those images from blocking elements of the website that are viewable and necessary for interaction.
Image optimization is crucial to a good front end load time because images can easily make up 50% or more of your website. By compressing image files or changing the file type you can dramatically reduce their size, and there are several techniques which do this without any visible loss in image quality.
For example, JPG files may contain metadata that is unnecessary when displaying on web, and PNG files that do not contain any transparent elements will be smaller if they are converted to JPG. WebP is a more modern image file type that supports transparency but gives images that are 25% smaller with no or minimal quality loss.
There are many other ways that images can be optimized to render quickly. PageSpeed can initially load images of reduced quality so that the page fully renders before those images are replaced with higher quality versions, and PageSpeed can also reduce image sizes to the exact dimensions needed.
Optimus.io is another tool for automatic lossless or lossly image compression, and there are other free tools like Optimizilla and TinyPNG that can give you a compressed version of an uploaded image. Using a tool like Gulp can also optimize and minify images for you.
Cache Pages at the Server
Caching images and CSS files using a content delivery solution like Section will dramatically improve your front end load time. Content Delivery Networks utilize caching software like Varnish Cache, Nginx, and Squid (here’s a full list of what software each CDN utilizes for caching) to store files in a cache that sits in front of your origin server. CDNs have global networks of caching servers which deliver content to users from the server closest to them, further reducing the round-trip time and resulting in faster page load times.
Websites can also install a caching solution themselves - although it will not have the benefits of the global network a CDN brings, installing your own caching server will speed up load times as not all elements will have to be fetched from your origin server.
Front End Optimizations with Section