Making a Site Lightning Fast
At Select Interactive our goal is to build fast, creative, user-friendly websites and applications. While we do take pride and get a secret enjoyment out of making a site load .01 seconds faster than before, there is a strategic reason behind our obsession.
For starters, a slow web loading experience is a missed business opportunity. Visitors to your site want answers fast and if your site takes longer to load, your visitors are more likely to exit the site entirely. Perhaps even more important, however, is that speed is now a factor in mobile Google search and ads. While speed has been a ranking factor for desktop searches since 2010, now, speed is a ranking factor for mobile searches. This means, if your website is slow loading, now is the time to speed it up.
There are many ways to improve load times on a website, but we have found the following to be most effective for our clients.
Lazy Loading
To prioritize the content in the initial view of the home page we can lazy load any image that isn’t necessary. The “below the fold” content contains a number of employee headshots and portfolio listings that we don’t need until our initial view has loaded and become interactive. At that point we can then request the additional images and render them on the page.
Inline Critical CSS
To continue with our strategy of optimizing for the initial view we do not need to load a stylesheet that contains style definitions for everything. To improve our render and load time we use the Critical tool to extract styles needed for just the “above the fold” content. We can inline these styles for the home page and then asynchronously load in the full stylesheet to provide styles for the rest of the page. We also cache the stylesheet once downloaded for any additional page views within the site.
Preloading Fonts
As we’ve mentioned before, fonts can be rather slow to load and render in the web, so we request browsers to preload fonts to help. This is a way for us to tell the browser that we need this file as soon as possible and to download it without blocking the download of other files. This can really trim the delay in text rendering when using a custom web font.
At this time (June 2017) preloading is only supported in Chrome and Opera, but it is coming soon to Safari and we’re hopeful FireFox and Microsoft hop on the train in the near future.
JavaScript Bundles
Another focus of ours at Select Interactive is to only load code that is needed for the current page. We have started to use webpack to bundle the required components/js code for each page. This is done by using JS modules with import/export and webpack’s tree shaking feature to remove any unused code. After minification and gzip compression we don’t serve a single JS file over 5kb to any page on this site.
Service Worker
Lastly, the tool to really boost performance is service worker! Using a service worker grants us the ability to manage the site cache and fetch requests. We take full advantage of a this to create a lightning fast site.
On a user’s first visit to the site our service worker will install and begin to cache assets (fonts, images, css files, js files, etc…). The below screen shot shows assets loaded for a repeat visit to the home page with our service worker installed. The biggest takeaway here is 35 requests are made and only 62 bytes of data are transferred! As for timing — we see a DOMContentLoaded time of 196ms and Load time of 261ms (lightning fast!). The finish time of 1.92 seconds includes our lazy loaded image requests.
Performance Audit
Using Chrome Canary we can run a quick performance audit with lighthouse to see how we’ve done. With an overall performance score of 95 we can feel pretty good about our performance strategies.
Our Best Practices score of 92 looks good as well. The only recommendation is to use HTTP/2 and we, along with many others, are waiting on Microsoft to provide that support in Azure.
