Should you do a site speed test? Off course. How? There are a few ways of finding out how well your site performs on pagespeed. Let me go through some of the best resources to answer that question and explain which ones I like to use to answer the question whether or not pagespeed is holding back the performance of your website.

Google Analytics Site Speed

You can go into your Google Analytics account and open the Behavior section. You will find Site Speed section there, which will give you a good steer on how your pages are performing. Please note that the Google Analytics definition of “Average Page Load Time” is a measure that counts the time it takes for the last element of a page to load. What you notice is when a page is fully rendered. These two are very different.

Google Page Speed Tool

The Speed Suggestions report (in Google Analytics > Behavior > Site speed) links to the Google Page Speed insights tool. This tool is accessible by anyone and can give you instant to-do list if you want to work on improving site speed. If you have never entered your your main pages into this tool, you really should do so asap. It will give you a steer on what needs to be fixed. If you have anything in red I would advise you to address it. As you can tell from the screenshot below, when I was writing this content, we were doing “ok-ish” on desktop (no feedback in red), but we had several things to fix on mobile (average score of 63 in red).

There is a wonderful overview of the rules it applies to come up with those recommendations here if you are keen to dive in deep.

Other handy tools are use by a lot of people are Pingdom and Webpagetest.org. Both give you very detailed feedback on what is slowing down your page. And both are free to use.

The exercise of creating a site speed plan is to understand what is slowing down your website. That understanding is key in making smart decisions down the line. There is a huge difference between a site running slowly because it is on a low-cost server, and being slow because of inefficient code or massive images being loaded.

One major reasons website are slowing down is any code that is used on top of your CMS. For WordPress, this means themes and plugins, for Joomla and Drupal they may be called templates and extensions. Another pretty common reason is poor server and hosting conditions. The physical location where your server is based is important as well. Or how many clients share a server. How is your server is configured. All of these are things that can make a considerable difference.

Enable caching is one of the most simple and useful techniques to increase site speed. Caching allows for webpage elements to be stored on your hard drive’s cache memory or temporary storage. This enables the browser to load the page from cache memory rather than making another request to the server the next time user visits the site page. As such, caching decreases the request size of the webpage. Content that is cached is loaded from the cache memory instead of the server.

There are some plugins also available that caches whole html of the page on server storage and then serve that html every time the page is requested. While using caching, make sure to clear the cache every time you change any contents of the site to reflect them on the website.

We started using the WP Super Cache plugin. Based on the recommendation of a new hosting partner we switched to W3 Total Cache plugin. That was still eating into our Pagespeed so we eventually ended up using the Autoptimise plugin.

Let me share my experience with getting this website up and running and choosing my hosting. I was not really aware of how important selecting a good hosting company is. When I did the speed check I was consistently getting “reduce server response time” feedback.

Your hosting solution and server response time

I was using shared hosting. It was cheap, but I was not getting much in return. Sometimes my server responded in less then o.3 second, sometimes in more then four seconds. As I was sharing a server with numerous others, it was unreliable due to others overusing resources.

Another option is getting dedicated hosting. A dedicated hosting service, dedicated server, or managed hosting service is a type of Internet hosting in which the client leases an entire server not shared with anyone else. It is for those that have a lot of traffic and understand how to manage server technologies. You might want to invest in someone knowing what they are doing if you qualify for the first condition (high traffic) and not for the second (understand servers).

For most businesses, this is not a realistic option. So basically, you have two options left.

The first one is the Virtual Private Server. When I complained to my shared hosting provider about the wild variance in server response time, I got the following response:

We currently have an average response time of 259ms for the website on your domain name with peaks of a few seconds. With each web hosting on a shared platform where you will notice fluctuations. However, these fluctuations are not always consistent and are influenced by many different factors. You are using a web hosting package on the shared platform where you share the resources of a server with multiple clients. This can affect the response time of other individual websites like yours. Depending on the amount of your visitors that you have, you might be better of with your own VPS (Virtual Private Server). In this case you will have your own server with its own resources and your site should have a more consistent performance.

VPS is a great alternative and do not necessarily cost a lot more then the shared hosting option. Beware of he fact that there are many different prices and quality services. This option often come with additional services like backups, automatic updates and more.

Managed Hosting

Another option is managed hosting.

This could be specific for your WordPress site or any other platform you have chosen to work with. I have found a great tool to discover and compare managed hosting services. You can filter on platform, server location, hosting type, top features, control panel and many more factors. Or you could simply check the reviews.

On the down-side, there may be some restrictions on what you can and can not do if you take the managed hosting route. The host may disable some plugins and themes due to speed or security concerns.

GZIP is a method of compressing files (also a file format) for faster network transfers. Enabling GZIP compression is a standard practice. If you are not using it, your webpages are likely slower than they should be.

GZIP performs best on text-based assets: CSS, JavaScript, HTML. All modern browsers support GZIP compression and will automatically request it. Your server needs to be configured to enable GZIP compression. Some CDNs require special care to ensure that GZIP is enabled. GZIP is a generic compressor that can be applied to any stream of bytes: under the hood it remembers some of the previously seen content and attempts to find and replace duplicate data fragments in an efficient way.

However, in practice, GZIP performs best on text-based content, often achieving compression rates of as high as 70-90% for larger files, whereas running GZIP on assets that are already compressed via alternative algorithms (e.g. most image formats) yields little to no improvement.

The three ways to enable compression by adding a bit of code via either a .htaccess file or an Apache/Nginx server configuration file. Let’s start with the .htaccess route.

Enable compression via .htaccess

The .htaccess file controls many important things for your site. If you are not familiar with the .htaccess file, please read my working with .htaccess article to get some know how before changing it. Following is the code that should put in the .htaccess file.

mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
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.*

Save the .htaccess file and upload it to the server.

Compression on NGINX webservers

For NGINX add the following code to your config file

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
# Disable for IE < 6 because there are some known problemsgzip_disable “MSIE [1-6].(?!.*SV1)”;
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6gzip_vary on;

Compression on Apache webservers

The .htaccess technique also work on Apache If you see this .htaccess solution is not working then try below commands instead.

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

You can check whether your compression is working or not using this tool: GZIP.

To prioritise above the fold content is simple and makes total sense. Above the fold content is the portion of a Web page that is visible in a browser window when the page first loads. If this part of a page loads slowly, that is when users do not see a page rendering properly. And bounce. To make pages load faster, limit the size of the data (HTML markup, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page. There are several ways Google suggests to do this:

• Structure your HTML to load the critical, above-the-fold content first
• Reduce the amount of data used by your resources

Load the main content of your page first. Structure your page so the initial response from your server sends the data necessary to render the critical part of the page immediately and defer the rest. This may mean that you must split your CSS into two parts. An inline part that is responsible for styling the ATF portion of the content, and the part that can be deferred.

Google provided following examples of how a site could be restructured to load faster.

• If your HTML loads third-party widgets before it loads the main content, change the order to load the main content first.
• If your site uses a two-column design with a navigation sidebar and an article, but your HTML loads the sidebar before the article, consider loading the article first.

You should make use of minified files (and minify JS and CSS) as these files tend to have less size then regular files. Minifying eliminates extra blank spaces, line breaks, and removes comments and indentation in your code that results into a reduction of the file size. It also shortens variable names thus reducing download time for your JavaScript files. There are many online tools available to minify javascript and CSS files. Replace your regular JS and CSS code with minified code. There are lots of websites available online which converts JS and CSS in minified format.

If possible include all javascript code in one file and all style sheet code in single file. This will make it load all at once which will make site loading a little bit faster.

The sole benefit of minified JavaScript code is allowing a client to download fewer bytes, enabling the page to load faster.

Minification is NOT like normal data compression

Normally when you think of data compression, one of the first things that may come to mind is “zipping” a file. When you zip a file, you are compressing it using a special algorithm. When someone else has to unzip that file, they have to decompress the file using a special program (which you may have used without knowing it since it comes with most operating systems built in).

However, with Javascript minification, no special program is needed by the browser in order to understand how to read the minified Javascript – because minified Javascript is still readable by the browser as is. A human can even read it – although with great difficulty since there won’t be any whitespace and newline characters. But, the point is that no intermediate program is needed in order to convert the minified Javascript into a form that is readable by the browser, and for that reason it is very different from normal data compression.

If you have large sized images this can cause the page to load slowly. Therefor it is important that you keep your images as small as possible. You can optimize the size of images to make it up to 40% less then the original size. Also there are many online tools available for optimising images. You can also use plugins or extensions for whatever large content management system you are using.

There are a few things you need to keep in mind. First of all, be careful to check your image width is not more pixels then the width of your page. On top of that you should make sure the SRC attribute of the image tag is not empty and referencing to proper image. If no source is provided then web browser makes request to your page directory and this can cause unnecessary traffic to your server.

Run the PageSpeed Insight under Google Developers to check which images needs optimization and discover to what percentage the image size can be reduced.

Finally, most websites are embedding one or more YouTube video(s). You should use optimized YouTube video embed code. This will decrease the page size by not adding the iframe on page at the page load. You can get your optimized YouTube embed code and script from this URL to get optimized YouTube code.