How to Increase Your Page Speed Score

No Comments » Written on July 17th, 2016 by
Categories: SEO

page-speedIf you have a website, you may have heard already that Page Speed is one of the ranking factors used by Google. Of course, they are interested in pushing forward the best experience to users, so if it is to choose between two similar results to rank higher, they would probably go for the one that loads faster rather than one that takes a few seconds to load - hence improving the user experience. In an ever changing Internet world, the speed of your website has become vital.

Speed of your website may be affected by many factors, like your hosting account and the Internet connection between your server and the main Internet hubs. Other factors are down to website development, the use of multiple scripts in your website, un-optimized images, bad HTML code and so more.

Improving your Page Speed score is however easier than you think, and in the long run this may this may be beneficial to you as it could increase your search engine rankings. If you are not a tech person, do not be afraid by the technical terms listed above, as there are some simple changes that you can do to improve the score by easily 15-20%.

1.Page Speed Test - first go check your website page speed. Used the Google Page Speed testing tool for that. Insert the address of your website and hit the "Analyze" button. The test will provide you with a set of 2 results: one for mobile and another for desktop devices. Note your scores!

There will most likely be a list of suggestions given with your results on fixes you should apply. I am not a tech person either, so at first sight I thought is too complicated for me to do anything of that. I was wrong! Although I am not able to implement all fixes suggested in those reports, some of them are really simple and as stated, can improve your score by 15-20% if not more.

So here are the most likely suggested fixes you will come over that you can attend by yourself:

2. Compression - compression will make files like your website pages, scripts, css files or images smaller in size, which means these will load faster when visitors browse your website. Given that your hosting account is most likely on a Linux server, all you need is to activate a compression module for your website:

  • use your FTP connection or Web FTP to check if you have a .htaccess file in the root/main folder of your website. If you have one, simply download it on your computer to edit it. If you don't have one, create such a file with Notepad editor, and save it .htaccess (no file name, and extension use .htaccess, not .txt)
  • enable compression with one of the two options below. One option is by activating the Deflate module, and the other is by activating the Gzip module. I recommend you try the first one, Deflate, as it is more widely supported, but if for some reason after doing so your website doesn't work, try the second module:
Deflate Module - copy the following code to your .htaccess file<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype

# For Olders Browsers Which Can't Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

Or, if above code does not work for you, try enabling the Gzip module:

Gzip Module - copy the following code to your .htaccess file<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>
  • upload the saved .htaccess to your server
  • check your website, browser several pages and hit reload to see if everything is ok and you do not get any errors

If you managed to do one of the above, great! If for some reason neither code works for your, simply edit the .htaccess file by deleting the code inserted to get everything back the way it was before and check with your hosting provider to see of Deflate or Gzip modules can be activated on your hosting account.

3. Leverage browser caching - this basically tells the browser which resources are fixed and should be saved locally for future use. By activating browser catching, certain resources like images, css files, javascript files will be saved on the user computer so that it speeds up the website by using local resources rather than downloading them from the server with each page load. This can be done by adding another few lines of code to the .htaccess file. Do not create a new file, just update the one you worked on above at point 2, and add the following line at the end:

Browser Caching - copy the following code to your .htaccess file## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## EXPIRES CACHING ##

Save the .htaccess file and upload it back to your hosting account.

Another option for leveraging browser caching is by using CloudFlare (free or paid). You can edit the Caching settings and change to minimum 1 week or more (usually 6 months is fine if you do not plan any redesign soon as this only applies to fixed resources). This way, by leveraging browser caching, you can get around another 10% increase in your page speed score.

3. Optimize images - did you get a list of images in the report that should be optimized? Most likely you did. There are a few tools that can be used to decrease the size of your images without lowering the image quality - that is "losslessly compressing". Reducing image size will make them load faster on your visitors' browsers.

Try using an online tool like Compressor where you can upload each of the images suggested to be optimized. Upload each image and in a few seconds there will be a new version of the image available to download. They will even show you hoe much it was reduced in size. Save the new optimized images and upload them to your hosting account, overriding the older ones.

4. Minify resources - that is also a way of saying to reduce the file size for some common resources used by your website, like .css files, .js (Javascript) files. In terms of minifying Javascripts (.js files), use the Closure Compiler service. Simply visit the link, delete the code under the "Compile" button, then in the "Add a URL" field just copy and paste a link to the Javascript file returned in the minifying report (it should be from your website, something like "http://www.yourwebsite.com/script.js") and hit "Add", and then you can hit the "Compile" button. In the right side window you will receive a new code (please check there are no Warnings or Errors returned), copy the new code to your Javascript file (go to your Javascript file, open it with Notepad, delete everything there is in that file and paste the new code). Once you saved the new Javascript, upload it to your server and override the old one. The same thing can be done for .css files, and one such service that can be used is the CSS Minifier. Just visit the previous link, open your .css file with notepad and copy its whole content to Input CSS on CSS Minifier, hit the "Minify" button and get the new code and put in your .css file, overriding all your old code. Upload the new file to your server.

5. Retest your Page Speed - surely not all issues were addressed, but the above suggestions were simple enough for anyone to implement. See your new page speed score and compare it with the pre-optimization score.

By following the above simple steps, I managed to increase the page speed for one of my websites from 55 to 77 for Mobile version, and from 67 to 94 for Desktop version. Not bad for some quick fixes!