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
Once the HTML document is sent to the browser (also when the time to first byte is measured), the front end load time begins. This is when the browser begins to fetch and load all the items called for in the HTML document - including CSS files, fonts, images, JavaScript snippets and more. While improving the back end time is important for optimal UX, it is the front end load time which takes up the majority of the total load time - usually around 80% or more of the time spent loading a page is in the front end.
This is particularly true for ecommerce and media websites who rely heavily on quality images to sell products, advertise sales, or illustrate articles. Ecommerce sites often utilize large banners in addition to individual product images on the homepage, and product pages can include upwards of 25 images. Ecommerce websites also often have many JavaScript calls in place that track the browsing habits of users, add personalization elements such as “recommended for you” sections, and more.
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.
Lazy loading will also reduce the transfer size if a user navigates off the page or onto another page before scrolling to the bottom. Lazy loading is usually accomplished by utilizing JavaScript that requests and inserts images as they become viewable. You can set up Lazy Loading yourself following these instructions or automatically by using Google’s PageSpeed on Section.
Optimize Images
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.
Manage 3rd Party Javascript
Many websites are overloaded with 3rd Party JavaScript requests that do everything from track users’ behavior as they move through a website to giving them personalized product recommendations. These JavaScript calls can dramatically slow down front end load time and result in a poor user experience if invisible elements are preventing the page from fully loading. Regularly check what JavaScript elements are included in your site to ensure they are all still in use - many web managers add analytics using JavaScript and neglect to remove the snippet after they have stopped checking the analytics data. Performing a waterfall test is also a useful way to see what JavaScript elements are blocking the load of the rest of your page.
There are several steps you can take to prevent JavaScript from slowing down front end load time. You can minify JavaScript in the same way that you can reduce CSS file size, and should also place most JavaScript calls near the bottom of your HTML document so they do not block the loading of other website elements. You can also defer JavaScript so it does not execute until after the page has loaded, although this can be risky if not properly implemented.
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
At Section we offer several versions of Varnish Cache for caching, which can improve both front end and back end load times. We also offer Google’s PageSpeed module which automatically performs many of the front end optimizations mentioned in this post, including image optimization, CSS and JavaScript minification and more. To get started with Section get started for free.
