Card image cap

Building a faster site: How to improve your website’s page load speed

By On Surfcode post tags: CMS , Performance ,


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.

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.

 

Minified CSS, Javascript, HTML

By minifying the CSS, Javascript and HTML of all pages we reduced the code redundancies of the website. This meant browsers had to process less data, giving back valuable seconds to their visitors.

After minifying the site code we saw the following reductions in data load:

  • CSS reduced by 50%
  • Javascript 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.

Latest Posts

Card image cap

Creating a headless CMS technology stack

By Mark Raymond On December 10, 2018


What does a typical day for your content creators look like? Are they constantly logging into a variety of software platforms to copy and paste the same content again and again? If ...

Read More

Card image cap

Redefining code and a brand: Discussing our rebrand

By Mark Raymond On November 29, 2018


It's been a busy year for us; we relaunched our website, rebranded our company, started learning new technologies and helped some really interesting companies solve many complex web development challenges. With that being ...

Read More

Card image cap

Building a faster site: How to improve your website’s page load speed

By Mark Raymond On November 26, 2018


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 ...

Read More