Site Performance, Google PageSpeed and the Kentico CMS

image

Website performance is becoming more and more important in today’s internet age. More than ever, end users are becoming increasingly less inclined to wait for web pages to load before surfing off to another website to find the information they require. As a nod to this, Google has included the speed at which a page loads into its quality score within the results algorithm. This means that slow loading web pages are at risk of being penalised, with their ranking demoted.

 

Luckily, Google have developed a tool, Google PageSpeed (https://developers.google.com/speed/pagespeed/), which we can use to benchmark a web page to discover how Google measures a page’s performance compared with its metrics. Recently, Google have also launched Lighthouse, a plug-in for Chrome with even deeper analysis.

Google PageSpeedGoogle Pagespeed Insights tool

 

How we approach improving performance

Initially we review a site’s overall performance to confirm that there is no particular area of concern from a platform perspective. If we are analysing a Kentico site for instance, then we would not expect any major issues but we always check before starting performance optimisations.

 

We approach page speed performance enhancements via a holistic approach as there are various aspects to how Google measures the speed of a page. A number of small improvements in key areas add up to a significant increase in performance.

 

Optimising both the website’s code and configuration will:

  • Provide more head-room for further increases in traffic
  • Decrease page load times for the end user
  • Increase Google Page Speed score, which Google uses as a SERP ranking variable

 

Image optimisation

Google analyses on-page images and checks if they are optimised to their criteria. Kentico provides some abilities to ensure images are automatically sized to fit components or re-sized when uploaded to the CMS, but these are not fully optimised. Compression can be increased until the quality is perceptually maintained but with the smallest file size. Manual image compression seems to be a step in the process which is not considered by content editors.

 

On one client’s Kentico website there were 8 images on the homepage, 5 of which are in the carousel and 3 in CTA panels. Our audit found the file size of these images had not been optimised, which resulted in the total download size for a single request of the homepage reaching 2309kB. After optimising these images, the download size dropped to 991kB. The PageSpeed results were:

 

 

Score before

Score after

Difference

Total page download

2309kb

991kb

-1318kb

PageSpeed score – Desktop

52/100

65/100

+13

PageSpeed score – Mobile

37/100

44/100

+7

 

Benefits

  • Faster loading pages
  • Alleviates load on the server
  • Reduces amount of bandwidth used within the hosting environment
  • Users on pay-as-you-go mobiles pay less for each load of the site – particular apt for people who are in financial need

 

Combine JavaScript and CSS stylesheets

From the content editor focussed image optimisation we move into technical optimisations which Google builds into its algorithm. By default, within the Kentico CMS JavaScript and CSS stylesheets which reside in the <head> section of the website are linked and requested individually. This causes a large number of HTTP requests from the user’s browser to the server which ultimately means pages take longer to fully load.  These files also block the rendering of the HTML which whilst not apparent on a broadband connection, users on slower connections (such as mobile phone users on 3G connections) will experience a longer load time which Google ranks for.

 

To conquer this challenge, we combine the JavaScript files into one file for vender libraries and another for application specific JavaScript called app.min.js. Within the Kentico page handlers we include the JavaScript references to the bottom of the page, thus enabling rendering of HTML prior to downloading JavaScript, producing a quicker page load speed for users on slow internet connections.

 

Gulp is also implemented within the Kentico environment to automatically achieve this combination and minification of not just the JS files but the CSS files as well.

 

An example of the results from this optimisation are:

 

Google PageSpeed type

Score before

Score after

Difference

Desktop

65/100

73/100

+8

Mobile

44/100

54/100

+10

 

Benefits

  • Increased page load speed
  • Less connections through the firewall and on to the web server

 

Browser Caching

Within the Kentico CMS there are numerous configurations for Performance – mainly caching times. By altering the cache time values, it is possible to meet the criteria Google places on client caching.

PerformanceOptions

 

Google’s rules and how to optimise in Kentico

Google rule

Kentico implementation

Avoid landing page redirect

Page alias on the URLs tab

Enable compression

Enabled within the site Performance settings

Improve server response time

Configure Kentico’s output caching settings

Leverage browser caching

Enabled within the site Performance settings

Minify resources

Development change to implement strategies and tools such as Gulp

Optimize images

Content editor

Optimize CSS Delivery

Development change to implement strategies within the Kentico page template

Prioritize visible content

Template structural changes within Kentico

Remove render-blocking JavaScript

Development change to implement strategies and tools such as Gulp

Use asynchronous scripts

Development change to implement strategies within the Kentico page template

 

Google Lighthouse
Lighthouse Google Chrome extension results

 

Speed means SERP visibility

By implementing these optimisations and configurations within the Kentico CMS, Google will rank your site higher in the index and improve positioning in the search engine results. The added benefit is that as quality score improves, your PPC campaigns will be cheaper giving you more impact for your budget.

 

Find out more about Kentico and our development services to help you improve the performance of your web site.