Building a faster site: How to improve your website’s page load speed
By Mark Raymond On November 26, 2018 Surfcode post tags: Performance , CMS ,
Last week we discussed the importance of page load speed; highlighting the increased emphasis that Google and other search engines have placed on it in recent years. We also shared a little of our methodology for evaluating page load speed to help you understand where your website stands. If you missed that post you can check it out; here.
Today, however, is all about the how-to of improving page load speed. We will show you a handful of the methods we used to help our client, the Boston Ballet, to dramatically reduce the page load speed of their website just in time for the holiday season.
Let’s cut right to the chase on how you can improve your website’s page load speed.
Cracking the page load code
In most cases, we see the same performance adverse mistakes being made across all industries and websites. Maintaining the integrity of page speed revolves around a few key factors:
How much data is loaded | How data is loaded | Where data is loaded from
Understanding the data structure of your website, how it is managed and how it is delivered helps provide the clairvoyance needed to begin optimization. Here are the top five steps we took to help Boston Ballet re-engineer their website for speed.
Reduced the size of images
Ballet is a visual art so it comes as no surprise that imagery plays an important part of the Boston Ballet website. Our first step was to implement an image compression strategy for the website in which images automatically pass through an image compression tool before they are uploaded for use within their Digital Asset Management(DAM) system.
Photo Credits: Lia Cirio and Paulo Arrais in Jorma Elo's Bach Cello Suites. Photo by Rosalie O'Connor
Google’s data suggests that media, such as images, tend to represent the majority of data being loaded by websites. By using image compression you can easily reduce the total amount of data being loaded by your website and still have a site full of high-quality imagery.
After implementing image compression we reduced the amount of data being transferred by over 50%, helping to significantly reduce the burden on the web server.
Enabled caching within the CMS
Boston Ballet’s site was built using Kentico CMS. One of Kentico’s basic and often overlooked features is caching.
Once enabled we were able to target which elements of a page should be loaded first by web browsers. This helps return visitors get the most critical information faster.
Additionally, we configured caching to index and load during off business hours. This ensures users do not experience any delays that caching tends to create if trying to load and index data during their visit.
Improved existing integrations
The workflow between Widen DAM and Kentico CMS was putting unnecessary strain on the server, costing the site valuable seconds. We updated the workflow between the systems to automatically resize images uploaded to the DAM.
This change reduced the amount of data being transferred to and loaded by the website.
After minifying the site code we saw the following reductions in data load:
- CSS reduced by 50%
- HTML reduced by 45%
Optimized the hosting environment
Similarly, we implemented server-side compression to greatly reduce the size of files being transferred between the Boston Ballet Server and web browsers.
The combination of minification and server-side compression helped to significantly reduce the amount of data being loaded.
The results thus far
We rolled out the above changes at the end of August and what we have seen so far are some immediate and trending results. By implementing best practices backed with sustainable workflows the site can continue to change and evolve without performance degradation.
Here’s what we saw immediately:
- Reduced page load speed from an average of 13 seconds and above to less than 2 seconds for many. This was a huge jump across the site, resulting in a big quality of life boost for site visitors.
- Optimized the server load to reduce the resources utilized by over 90%. This freed up a significant amount of computing power, increasing the server efficiency and making more resources available for peak demand times.
What’s trending now:
- Increasing unique page views year over year.
- Reduced bounce rates year over year.
- Longer user sessions year over year.
It’s not surprising that the results Boston Ballet have experienced thus far are in line with the same results Google expects when performance is improved. The best part of prioritizing performance is that it provides tangible and trackable results, as page speed and visitor behavior can be easily tracked within Google Analytics.
Weighting design against performance
How much value does an image actually bring to a website?
With A/B testing you can find a way to attribute value to design. Design without consideration for performance is where problems will arise. Chances are the value of a bounced conversation scales exponentially higher than the weight a single image holds.
Sacrificing design is not the answer. Tools like image compression, minification and caching empower marketers to use the content they desire with no visible impact on the design of their website. It’s okay to use beautiful imagery on your site if a performance workflow is in place to protect page load speed.
If your CMS is not leveraging caching or image compression now is a great time to learn what it would take to implement it.
Giving customers what they want, faster
With a little strategic planning, introspection and hard work the Boston Ballet site is now performing exponentially better and just in time for the busy holiday season.
It’s important to have a proactive approach to web performance. Google is changing the algorithm multiple times a year and these changes impact most, if not all websites on the web. Having performance considerations such as page load speed on your website’s developmental roadmap helps protect against the inevitable changes being made to the rules of search.
We look at performance as an important part of user experience and hold it in the same regard as intuitive design.
Helping get your content in front of your visitors, faster, is a win for everyone involved.