Back to Top

Category Archives: Page Speed

 

page speed

 

Website page speed is a fundamental part of user experience and used as a increasingly important factor in Search Engine Optimisation.

 

Google have even created a online speed test called Pagespeed Insights which developers can use to help them speed up their websites.

 

On this website blog you will find the information you need to improve your website speed and hopefully get that perfect 100% score for both mobile and desktop versions of your website.

 

PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

 

PSI provides both lab and field data about a page. Lab data is useful for debugging performance issues, as it is collected in a controlled environment. However, it may not capture real-world bottlenecks. Field data is useful for capturing true, real-world user experience – but has a more limited set of metrics

 

In 2019 google added many factors to how they calculate the page speed insights score and now uses ‘Lighthouse’ to collect and analyse site data

 

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

 

Leverage Browser Caching

Leverage Browser Caching

Leverage Browser Caching

This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing how to leverage browser caching. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.

 

 

What is Browser Caching?

Browser Cache

When elements of a web page is downloaded your browser will save certain parts onto your computer and is stored temporarily in your cache (cache is just a temporary file).

This means that if you visit a site often your computer doesn’t need to repeatedly download elements such as images etc.

These files in the cache are given a time limit, based on the type of file. This not only prevents your device from being clogged up with files but also means that changes to websites resources will be updated.

These files can also be deleted manually, which can speed up a computer or device that is taking time to start up a web browser or you can use private browsing which prevents these downloads altogether.

Why Leverage Browser Caching?

Why Leverage Browser Caching

By telling a browser to cache files from your website you not only speed up the load time of your users but also reduce drag on your servers.

When a user requests a web page the browser (Chrome, Explorer, Firefox etc.) it will check the cache files for the resources required. If it doesn’t have those files needed, such as the main html file, the CSS file, any JavaScript files, and all the image files, it needs to download them.

Firstly it will make a request to the server that stores your site and ask for the html file. It will then reads through the file line by line and if it is told it requires another resource, such as an image file, it will then request that file from the server, download it and then continue reading the html file until it comes to the next resource.

If it comes across a CSS or JavaScript file it will have to download that, read it and request and download any resources that that file requires before it continues with the original html file. As you can imagine this can take a fair amount of time, relatively, making the user wait and keeping your server busy. If you have a busy site with multiple users making requests at the same time this can put a lot of strain on your server.

This can be prevented if you leverage browser caching.

How to Leverage Browser Caching

One way to reduce this to tell the browser to store the files needed for a period of time and therefore if a user returns to your site it will not need to make requests to your server or download any files. Instead it just loads them from the cache file.

With that in mind you may be tempted to set the resources to stay on users computers indefinitely but that can cause other issues. Mainly if you make any updates to your site it will only be visible by new users. This is because a returning user’s browser will look for the resources, find them all in the cache and therefore not download the updates.

So how do we leverage browser caching?

We have to separate the files by their type i.e. Images, JavaScript, HTML, CSS files etc. and then set the period that they are cached appropriately.

The easiest and most common way is to add some code to our .htaccess file.

If you haven’t already created a .htaccess then you can use our tutorial to create the file. Firstly copy and paste the code into notepad and the follow the instruction we have outlined here How to create a .htaccess file.

Open up your .htaccess file and paste the following snippet into it.

## LEVERAGE BROWSER CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access plus 1 year”

ExpiresByType image/jpeg “access plus 1 year”

ExpiresByType image/gif “access plus 1 year”

ExpiresByType image/png “access plus 1 year”

ExpiresByType text/css “access plus 1 month”

ExpiresByType application/pdf “access plus 1 month”

ExpiresByType text/x-javascript “access plus 1 month”

ExpiresByType application/x-shockwave-flash “access plus 1 month”

ExpiresByType image/x-icon “access plus 1 year”

ExpiresDefault “access plus 2 days”

</IfModule>

## LEVERAGE BROWSER CACHING ##

And once uploaded that is it. Congratulations, your have successfully leveraged Brtowser Caching on your site. That’s another tick and an increase in points for your google pagespeed insights results.

To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.

 

 Improving page speed using the Google page speed insights developer tool

eliminate Render-blocking JavaScript and CSS in above the fold content

Eliminate render-blocking JavaScript and CSS in above-the-fold content

eliminate Render-blocking JavaScript and CSS in above the fold content

This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing how to eliminate render-blocking JavaScript and CSS in above-the-fold content. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.

What is render-blocking JavaScript and CSS in above-the-fold content?

How to eliminate render-blocking JavaScript and CSS in above-the-fold content

What is above-fold-content?

Above the fold content (or Visible Content) is content that appears on the page first when a user loads your website.

As you can see in the image it is the first portion of your page and by making sure this loads first your users will not have to wait with a blank screen before they are engaged. This makes for a better user experience and, as statistics show, will increase the amount of users that will become customers (known as the conversion rate).

What is render-blocking JavaScript and CSS?

When a web browser loads a website it follows a particular process

  • 1. First it downloads the HTML file.
  • 2. Then it reads (or renders) through the HTML code line at a time
  • 3. If it requires a resource such as JavaScript or CSS it will download and render that resource before continuing with the html
  • 4. If the as JavaScript or CSS calls on another resource that too has to be downloaded and read before it can continue

This means that if you have request a JavaScript or CSS file before the html then the browser is held up downloading and reading that file before it can display your content.

 

How to eliminate render-blocking JavaScript and CSS in above-the-fold content?

 The answer to this sounds simple. Move the requests for such files below the html that loads your above the fold content, right? Well yes that is correct and in fact we place it right at the bottom of the code before the closing body tag but that does cause an issue.

The above fold content requires information from the CSS file in order to display properly. So what we do is place all the CSS required to display the above-the-fold content within the html file itself. We place it within style tags above the html and within the header tags as shown below.

<head>

<meta charset=”utf-8″>

<title>Example</title>

<style>  REQUIRED CSS </style>

</head>

<body>

<div>  REQUIRED HTML FOR ABOVE-THE-FOLD CONTENT </div>

</body>

</html>

This may sound very complicate however there are some tools that help us do this.

TOOL 1

The simplest tool I have found is “Sitelocity’s Critical Path Generator”

Simply enter your site address including the http:// or https:// and click the ‘GENERATE CRITICAL PATH CSS’ button. The tool will then automatically download your sites CSS file and copy the required section for the above the fold content. It then minifies the CSS and outputs it ready for you to input into your HTML file as described above.

 

TOOL 2

 

Another tool is the Critical Path CSS Generator

 

  1. 1. enter your website address
  2. 2. Paste your entire CSS file into the box indicated
  3. 3. Hit the “create Critical Path CSS” button

Then it will generate the CSS required to display the above fold content. You then simply add the generated CSS into your html file as described above.

And once uploaded that is it. Congratulations, you have successfully eliminated render-blocking JavaScript and CSS in above-the-fold content. That’s another tick and an increase in points for your google pagespeed insights results.

To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.

 

 improving page speed using the Google page speed insights developer tool

Prioritize Visible Content

 

This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing how to prioritize visible content. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.

Prioritize Visual Content

What is visible content?

Visible content (also known as above the fold content) is what a user first sees on a website. This is normally the title and navigation menu as shown in the diagram.

 

Why Prioritize Visible Content?

Many webpages are fairly large and no user wants to wait for an entire page to load before they see any visible content. Loading the visible content before other elements of a page creates a much better user experience.

How to Prioritize Visible Content?

There are many ways to reduce the loading time of the above the fold or visible content and thus prioritizing this content.

One way is to reduce the memory required to display this content which reduces download time and increases the load time. If you have been following this tutorial in order then you will have already reduced the memory of all images, CSS and html.

Prioritize Visual Content HTML Example

The next step is to make sure that the html required for the above the fold content is placed at the top of the html file (within the <body>……</body> tags).

 This is because a web browser reads the html one line of code at a time and in order. So if you have placed the code for the visible content below another page element then the browser has to read and execute this code first.

To fix this simply cut and paste the html block that contains the visible content above all the other elements.

Another way to speed up the loading of the visible content is to place all the CSS required to display the content within the HTML file itself instead of a separate file. But this is the next chapter in our tutorial.

Congratulations, you have managed to prioritize visible content. That’s another tick and an increase in points for your google pagespeed insights results.

To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.

 

 Improving page speed using the Google page speed insights developer tool

Enable Compression

Enable Compression

Enable Compression

This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing how to enable compression. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.

What is Enabling Compression?

A compressed file has had its memory reduced and therefore uses less memory. You may have come across some popular formats of compressed files that end in .zip or .rar. Almost any file can be compressed in this manner from images to program files but although these files are much smaller, they are unable to be used until they have been decompressed by the appropriate software (winzip or winrar etc).

 

Why Enable Compression on your website?

Compression Speedometer

Well as we said compressed files use less memory so if you compress your site it will take less time for the user’s browser to download.  Web browsers are able to decompress the files and show them in their original state. This gives website owners a great opportunity to increase the download speed of their site and improve user experience. Many site owners already use compression so if you are not you are at a disadvantage.

The two most common compression tools are GZIP compression and Deflate compression. Gzip  and Deflate have their different advantages and sometimes it is an advantage to use one over the other (1and1 prefer to use the Deflate code shown below for example).

 

How to Enable Compression

There are several ways of enabling compression the most common being using your .htaccess file on apache servers or your web.config file if you are on a windows server. This method works whether you are using shared hosting (allocated space on a server) or if you have a dedicated server. Because of this I will show you these methods for enabling gzip and deflate compression.

Enable Compression using .htaccess file

(if you don’t have a .htaccess file and are not sure how to create one then check out this tutorial)

Insert the following into your .htaccess file

# BEGIN GZIP
# mod_gzip compression (legacy, Apache 1.3)
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|xml|txt|css|js)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP

Enable Deflate Compression on 1and1

Copy and paste this into your .htaccess file

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE image/svg+xml

</IfModule>

And once uploaded that is it. Congratulations, your site is now compressed. That’s another tick and an increase in points for your google pagespeed insights results.

To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.

 Improving page speed using the Google page speed insights developer tool

Optimise Images

Optimise Images

Optimise Images

This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing how to optimise images. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.

 

 

What are Optimised images?

Optimised Images

In many cases image files of a very high quality which is required for printing good quality documents. However many screens do not display at that high quality and so in general the image quality, such as the amount of colours, can be reduced without noticeable change in quality for web users. Additionally images are normally larger in actual size than they need to be on the web page and they are actually downloaded as large images and then told to display smaller by the CSS or HTML.

An optimised website image is one that has been reduced in quality and size to meet the requirements of the webpage.

Why Optimise Images?

A websites images are, in most cases, the largest files and greatest drag on servers meaning that they dramatically increase the download speed of any website. Additionally images are shown to improve user experience and so graphic rich sites are the norm. Most sites have a minimum of 5 graphics on the home page so a huge amount of resources go into downloading all the graphics for any particular page.

HTML Graphics Codes

There are ways to reduce the amount of graphics used on a page such as using CSS to create coloured backgrounds instead of background images where possible or using HTML codes to create simple graphics (see Image for some examples. To use the codes simply copy the code in the first row replacing the x with the number in the corresponding column).

While these options are a good idea to increase the overall download speed they are not always practical and it’s never a good idea to substitute a useful graphic for a weaker substitute simply to improve page load speed.

The best option is to reduce the size of your images by compressing their overall memory size and therefore reducing page load speed.

So how do we reduce the memory requirements of an image?

Well as explained above. To optimize an image we need to reduce the quality and size of an image to meet the requirements of the website. This can be done with software but we will show you the easiest way.

Pagespeed insights download images,javascript and CSS resources

 The image above shows the google pagespeed insights results page for a site without optimized images. As you can see down the bottom of the results (indicated here in a red box) google has the option to download optimized versions of your website resources including images. Simply click on the link and your browser will start downloading a zipped version of your files. Locate the downloaded file (you can right click and select ‘show in folder’) and unzipped the file using winzip, winrar or other similar software.

A folder will be created containing the optimized images, CSS JavaScript etc. In this case you need to copy all the images (highlight and press Ctrl + C) and then upload them to your site using an ftp client. (We have another article explaining how to use ftp clients – Sorry for the inconvenience but it requires a lot of direction and too much to add to the bottom of this article).

And once uploaded that is it. Congratulations, your Images are now optimized. That’s another tick and an increase in points for your google pagespeed insights results.

To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.

 

 Improving page speed using the Google page speed insights developer tool

Minify CSS, HTML and JavaScript

Minify CSS, HTML and JavaScript – Google Page Speed Insights

Minify CSS, HTML and JavaScript

This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing the Minify CSS, HTML and JavaScript section.

When CSS JavaScript and HTML are written it is common practice for good coders/developers to insert comments and adequate spacing making it easier for others to read and where need make any changes required in the future. While this makes perfect sense, and is still encouraged, it can increase the size of the files considerably.

Where speed is concerned these spaces and comments that don’t actually add anything from a computers point of view and if you remove them then a smaller file can be downloaded much faster. It may sound trivial but any saving in time, however small, can be very important when you consider the following statistic from Kiss Metrics.

“47% of consumers expect a web page to load in 2 seconds or less.”

And

“25% of users will abandon a site that takes more than 4 seconds to load”

How To Minify CSS, HTML and JavaScript?

Page Speed Insights
Minified HTML

Minifying is the process of removing everything from the file that is ignored by a computer, so any comments or spaces are removed and this can, in many cases, reduce the file to half its original size.

The two images above are of the same code for our 404 error page. The image on the left is the original HTML of the file and can’t fit on to the screen but you can see that it takes 103 lines of code despite being a relatively small file (57.1 kilobytes). The image on the right show the same code after it has been minified and as you can see it has been compressed onto a single line and easily fits onto just over half the screen.

The memory saved from this html file wasn’t much (about 0.80 kilobytes) as stated this was a small file and html tends to have less space and comments than CSS. In comparison my CSS file for the main site was 14,435 lines long and was 331 kilobytes. After I minified the file it became 219 kilobytes which is just over a third of its original.

Options to minify

If you are using a WordPress site there are several plugins you can use that will you automatically minify your code files for you.

Or you can use a CDN, many of which have many options to automatically minify your content as well as a host of other useful tools. I personally use Cloudflare and would definitely recommend them to everyone.

We will talk about CDN’s in another article. If you are interested in site speed and increased security, and let’s face it who isn’t, using a CDN is a must.

Additionally Google actually supplies you with a minified copy of your files you can simply replace the originals with using an ftp client. Or there are many online tools you can use to do the same job. I would however recommend you keep a copy of the originals. If you wish to make changes to the files later they are incredibly difficult for humans to read. Additionally I would recommend you follow the Reduce Server Response Time section of the tutorial before minifying any files.

 Improving page speed using the Google page speed insights developer tool

Web Site Page Speed

Avoid landing page redirects – Google Page Speed Insights

Web Site Speed

This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing the Avoid Landing Page Redirects section. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.

 

What is the landing page?

To explain how to avoid landing page redirects I will first explain what the landing page and redirects are.

The landing page is the first page seen by a user when they type in your sites URL. This is often the index page (or Homepage) but can be anything you desire.

What are redirects?

 

If a site owner wants to change a page that the user sees and replace it with another page or site that already exists they can redirect that page.

 

 

The Problem with Redirects

 

Despite the wording ’avoid landing page redirects’, redirects are fine and common practice but it’s the method used that may have significant effect on the load speed of a page.

Client Side Redirect

 

The wrong way to redirect a page is to add code to that page that does the redirecting. This is known as ‘client side redirection’ and is a problem because the user has to wait longer for the page to load.

Avoid landing page redirects

Normally the user selects a website and this request is sent to the server. The server then sends back the code for the webpage which is assembled and displayed by the user’s browser.

If the webpage includes the command to redirect then once the site has been sent to the users browser, the redirect is read and then another request is made to the server for the required web page. And while this repeated request is being made the user is left with a blank screen.

But there is an alternative.

Server Side Redirect

 

A redirect command can be added to a file which remains on the server. That way when the user requests the site, the server already knows to correct page to send back and this cuts down the amount of requests.

To do this you need to know the type of server you are using and you can get this information from your web host. What you want to know is whether your site is run on apache or windows servers.

 

Apache Servers

 

The majority of websites are run on Apache servers and that being the case you can give your server certain commands using a ‘.htaccess’ file.

To create your .htaccess file you can use any code editor or even notepad.

Avoid landing page redirects - htaccess redirects

Using notepad you can simply create a new file and enter the following.

First we turn on the redirect engine which is done with the simple line RewriteEngine On. This command is only input once in the file, no matter how many redirects we want to do. Then on a new line enter

Redirect 301 /old-page.html http://www.mydomain.com/new-page.html

 

The “Redirect 301” is the command and states that this is a permanent redirect. Google will pick up on this also and use it accordingly for SEO purposes. Alternatively you can use a ‘Redirect 302” which states that it is a temporary redirect. In this case Google makes no change to backlink attribution etc.

After entering “Redirect 301” you must leave a space then a forward slash followed by original page you wish to redirect. So in the case of your homepage it would generally be ‘/index.html’. Finally you leave another space and enter the entire path of the new page you want to redirect too.

If you wish to redirect more pages you just simply enter the “Redirect 301 on a new line followed by the links as stated above. You can even redirect the entire site with just a few lines of code but we will cover that in another article.

Saving your .htaccess file for the first time

Avoid landing page redirects - htaccess redirects

 

To save your .htaccess file for the first time you need to go to file and then save as. In the File Name field enter “.htaccess” (including the speech marks as shown in the image) and press save. That’s it you have created your .htaccess file and from now on you can just save that file in the normal way. If you didn’t include the speech marks then notepad would just create it as a text file which couldn’t be read by the server.

The next task is to upload the file into the top directory of your site using an ftp client such as Dreamweaver or Filezilla.

 

Redirects using Windows Servers

 

There are various methods to implement URL redirects on windows servers including using the web.config file, or using Microsoft’s URL Rewrite

We hope you found this guide to avoid landing page redirects useful and if so you may find more articles in the series helpful. For more in the series please click on the link below.

This is part of our guide on improving page speed using the Google page speed insights developer tool.

Google Page Speed Insights

Google Page Speed Insights

Google’s Page speed insights is an important tool for all website owners/developers. It looks quite complicated at first sight but, as I will explain, it is well worth the effort. This guide was created to help explain the requirements to get 100% for your website.

 

Why is page speed important?

 

The speed of your website is a very important consideration for any site owner. If your site takes too long to load the user may get fed up and leave before your site is loaded. Data suggests that the average time users are willing to wait is surprisingly short. According to KissMetrics “47% of consumers expect a web page to load in 2 seconds or less.”

So one major reason for increasing your sites loading speed is improving the user experience (abbreviated as UX) of the site.

For years Google have made changes to their algorithm to ensure that UX of sites is a factor in their ranking. In 2010 Google announced that page load speed would be one of those factors, and in the same year they introduced ‘Google Page Speed Insights’ to help developers improve their websites page load speed.

What is Page Speed Insights?

 

Page Speed insights is a website speed development tool created by Google to help identify possible problems that may be slowing a site. Go to  https://developers.google.com/speed/pagespeed/insights/ and enter a websites URL and click analyse. The website then tests the site and gives it a grade out of 100 (100 being fully optimised) for both desktop and mobile rendering. It also gives fairly detailed information on where the problems exist and information on how to fix them.

Page speed insights has 10 sections or tasks that need to be completed to improve the page loading speed.

  1. Avoid landing page redirects
  2. Reduce Server Response Time
  3. Minify CSS
  4. Minify HTML
  5. Minify JavaScript
  6. Optimise Images
  7. Enable Compression
  8. Prioritize Visible content
  9. Eliminate render-blocking JavaScript and CSS in above-the-fold content
  10. Leverage Browser Caching

 

Click on the sections above to get more information on how to fix each issue using our step by step guide written in plain English.

Google Page Speed Insights

Once you have completed the sections above then congratulations. You have joined a fairly unique club. The majority of website developers have not mastered this and many have got incredibly low scores indeed. Just test some of your favourite sites with the tool to see how they are doing.

Page Speed Insights

It’s surprising that so many, including professional web design companies, ignore this facet of web development despite the benefits. But their loss is most definitely our gain. If most sites aren’t taking advantage of increasing page speed then it gives you the chance to get ahead.

So I would recommend to anyone reading this to fix their sites and improve not only user experience but also website traffic and search engine optimisation.

If you are having trouble with implementing the improvements or simply don’t have the time, then please get in contact with us and get a quote. Page Speed optimisation is included in several of our website creation packages as well as many other crucial improvements.

Pin It on Pinterest