Sunday, 10 November 2013
How to Boost Google Pagespeed Score.
With the recent updates in Google Pagerank algorithm recently many of the webmasters who were achieving good scores earlier are getting bad scores now. This clearly has no relation whatsoever to ranking on SERPs and we can not relate the Page sizes and load times with higher/lower positions. But it was found in a survey on Moz that TTFB (Time to first Byte) correlated to ranking positions, but still it is doubtful as to if those sites rank higher because they have lesser TTFB (Better Back-end) or they rank higher so they have to keep good back-end to keep with the Loads.
Recently the Google Pagespeed score has been updated to make sure that User experience is flawless for everyone who clicks on a link through SERPs (maybe it is updated to reflect better on the algorithm changes, god knows). Google doesn't want users to have a bad experience so it won't hesitate to rank those sites lower which have low performance/Heavy Pages/Bad requests/Other issues.
Apart from that it would leave a good impression on users if they come across and clean, no nonsense designs that load blazing fast independent of their Internet connection speeds. You can gain some regular visitors, have an increase in your Brand recall value and reduce your Bounce and Exit rates and not to forget user satisfaction avoiding Pogo sticking(it happens when a user comes to your site, doesn't like it, goes back to SERPs and clicks on another result, implying to Search Engine that user was not satisfied). These small things send a positive signal about your site to Search Engine and you can actually improve Rankings this way, so indirectly Pagespeed is a Ranking Factor.
So here i have compiled some points which may help you improve on your Website's user experience and improve rankings and generate a devoted audience for your Brand, and also tell you How to increase your PageSpeed score :-
Avoid CSS @import
for example when you want to load a new CSS element like a Font, instead of this -
you should use this
CSS @import is not a good practice and doesn't cater to W3 validations and should be avoided at all costs, using it can affect you load speeds of other CSS elements too.
Bad/Broken Links and Requests
Bad Requests and broken links can really affect the load times. If you are not using asynchronous loading for your scripts and content requests, this can cause other content to be stuck at loading and cause timeouts for fetched scripts.
So always make it a point to test all the third-party scripts and requests you make from your webpage to avert broken webpages and inferior user-experience.
Reduce Image Requests
CSS sprites is one thing that you must learn if you want to reduce unnecessary number of requests for images etc. that are loaded every-time at page-loads. CSS sprites joins all the static images resources and loads them in one request, this drastically reduces the number of requests and accelerates Page load times.
The working of CSS sprites is simple, all the Images that you want to load are combined in a sprite or combined image, and ordered with pixel perfect accuracy. And then you call the same image, but start showing the required image using, empty divs and tell it to start and where to end, this will still render all you images, but the number of requests has been reduces to only 1.
Minify CSS and JavaScript/HTML
Minifying is a simple process with huge effect on Page load times and this is why its widely used by Webmasters. It reduces unnecessary spaces and tabs to minimize the file size and improve the page laod times.
HTML Gzip compression can also reduce page load times by reducing page size, you can add gzip compression parameters to your .htaccess files for this.
It can be done easily with use of online tools like CSS minifier and JavaScript minifier.
Combine Javascript and CSS
Combining JavaScript and CSS has a huge affect on number of server requests, this improves page load times and number of requests.
To combine a JavaScript or CSS, you just need to combine them in a single file, just open them in Notepad, and copy them one after other and, and save them as a single script. If you combine this with the above trick, you wold have easily saved up on quite a few server requests and bytes.
Inline Small CSS and JavaScript
In-lining CSS and JavaScript which is small and not much resource heavy can help you if it is not being used anywhere other than 1-2 places.
To Inline scripts, just place them in <script src=' '> tags and embed them in place, take care not to inline big scripts and those that are being used too many times.
Reduce excessive CSS
Using CSS on HTML elements is a bad idea and can really affect your load times, and sometimes can block page rendering times too.
Some times you may find it easy if you want to adjust an HTML element, you just use inline CSS, but it is bad for render speeds and page load requests. To apply CSS on elements, create separate classes and use them on elements you want to use on.
Optimize Script load orders
Always place style CSS higher up the page than Scripts, This means that in you head section there have be all the CSS and style based files, and they have to be placed as high as possible on <head>. On the other hand, make sure the JavaScript's are placed the lowest just above closing </body> tags.
Some of these techniques that i talk about require moderate level of HTML/CSS knowledge, learn them easily by many of the methods in this post : 4 Simple HTML Online tutorials for Beginners
Reduce Render Blocking
What is render-blocking ? When Browsers start loading webpage, when they encounter a script, they stop loading all other content and and focus on that script, this causes render blocking if the script is slow in loading and the other content is also not displayed in spite of it being loaded already.
To avoid render blocking - remove all the JavaScripts from <head> and make sure you put them all the way down before ending </body> tag. If you are using Third party ads and Scripts, always prefer asynchronous loading scripts.
Use async method to defer loading of JavaScript.
There are many other Methods to optimize the Page Load time and improve on your Google Pagespeed scores, like serving well optimized images, scaled images, Progressive Jpeg's and interlaced png to optimize User experience.
I have covered most of the factors which may affect the load time, but if you think i missed anything, do tell me in comments.
In the End all that matters is what readers want and like. To increase your page load times, you cannot remove any functionality. But still its very vital to have a balance between functionality and Load speeds so readers don't suffer.
Also Read : Backlinking Techniques that no one talks about.
Are you already using all the above methods, if no, then start doing it, and if you stumble across anything, don't hesitate to drop me a comment.
Apart from that it would leave a good impression on users if they come across and clean, no nonsense designs that load blazing fast independent of their Internet connection speeds. You can gain some regular visitors, have an increase in your Brand recall value and reduce your Bounce and Exit rates and not to forget user satisfaction avoiding Pogo sticking(it happens when a user comes to your site, doesn't like it, goes back to SERPs and clicks on another result, implying to Search Engine that user was not satisfied). These small things send a positive signal about your site to Search Engine and you can actually improve Rankings this way, so indirectly Pagespeed is a Ranking Factor.
How to Improve Pagespeed Score
So here i have compiled some points which may help you improve on your Website's user experience and improve rankings and generate a devoted audience for your Brand, and also tell you How to increase your PageSpeed score :-
Avoid CSS @import
for example when you want to load a new CSS element like a Font, instead of this -
@import url("http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic");
you should use this
<"link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,800,700" rel="stylesheet" type="text/css">
CSS @import is not a good practice and doesn't cater to W3 validations and should be avoided at all costs, using it can affect you load speeds of other CSS elements too.
Bad/Broken Links and Requests
Bad Requests and broken links can really affect the load times. If you are not using asynchronous loading for your scripts and content requests, this can cause other content to be stuck at loading and cause timeouts for fetched scripts.
So always make it a point to test all the third-party scripts and requests you make from your webpage to avert broken webpages and inferior user-experience.
Reduce Image Requests
CSS sprites is one thing that you must learn if you want to reduce unnecessary number of requests for images etc. that are loaded every-time at page-loads. CSS sprites joins all the static images resources and loads them in one request, this drastically reduces the number of requests and accelerates Page load times.
The working of CSS sprites is simple, all the Images that you want to load are combined in a sprite or combined image, and ordered with pixel perfect accuracy. And then you call the same image, but start showing the required image using, empty divs and tell it to start and where to end, this will still render all you images, but the number of requests has been reduces to only 1.
Minify CSS and JavaScript/HTML
Minifying is a simple process with huge effect on Page load times and this is why its widely used by Webmasters. It reduces unnecessary spaces and tabs to minimize the file size and improve the page laod times.
HTML Gzip compression can also reduce page load times by reducing page size, you can add gzip compression parameters to your .htaccess files for this.
It can be done easily with use of online tools like CSS minifier and JavaScript minifier.
Combine Javascript and CSS
Combining JavaScript and CSS has a huge affect on number of server requests, this improves page load times and number of requests.
To combine a JavaScript or CSS, you just need to combine them in a single file, just open them in Notepad, and copy them one after other and, and save them as a single script. If you combine this with the above trick, you wold have easily saved up on quite a few server requests and bytes.
Inline Small CSS and JavaScript
In-lining CSS and JavaScript which is small and not much resource heavy can help you if it is not being used anywhere other than 1-2 places.
To Inline scripts, just place them in <script src=' '> tags and embed them in place, take care not to inline big scripts and those that are being used too many times.
Reduce excessive CSS
Using CSS on HTML elements is a bad idea and can really affect your load times, and sometimes can block page rendering times too.
Some times you may find it easy if you want to adjust an HTML element, you just use inline CSS, but it is bad for render speeds and page load requests. To apply CSS on elements, create separate classes and use them on elements you want to use on.
Optimize Script load orders
Always place style CSS higher up the page than Scripts, This means that in you head section there have be all the CSS and style based files, and they have to be placed as high as possible on <head>. On the other hand, make sure the JavaScript's are placed the lowest just above closing </body> tags.
Some of these techniques that i talk about require moderate level of HTML/CSS knowledge, learn them easily by many of the methods in this post : 4 Simple HTML Online tutorials for Beginners
Reduce Render Blocking
What is render-blocking ? When Browsers start loading webpage, when they encounter a script, they stop loading all other content and and focus on that script, this causes render blocking if the script is slow in loading and the other content is also not displayed in spite of it being loaded already.
To avoid render blocking - remove all the JavaScripts from <head> and make sure you put them all the way down before ending </body> tag. If you are using Third party ads and Scripts, always prefer asynchronous loading scripts.
Use async method to defer loading of JavaScript.
There are many other Methods to optimize the Page Load time and improve on your Google Pagespeed scores, like serving well optimized images, scaled images, Progressive Jpeg's and interlaced png to optimize User experience.
I have covered most of the factors which may affect the load time, but if you think i missed anything, do tell me in comments.
In the End all that matters is what readers want and like. To increase your page load times, you cannot remove any functionality. But still its very vital to have a balance between functionality and Load speeds so readers don't suffer.
Also Read : Backlinking Techniques that no one talks about.
Are you already using all the above methods, if no, then start doing it, and if you stumble across anything, don't hesitate to drop me a comment.
Subscribe to:
Post Comments (Atom)
Valuable suggestions and nice article, I am already following some of the methods mentioned, e.g. minify tools and it surely does affect your search rankings and traffic.
ReplyDeleteI tried some your tips and it's effective to increase scores for website on google speed insights
ReplyDeleteI also have an other article http://www.webmastersun.com/threads/5008-How-to-Optimize-Website-for-google-PageSpeed-Insights
I added some new features to it, hope it's useful for people want to optimize for google speed.