SEO Page Speed

Page speed plays a vital role in search engine rankings. So, it's better to know any website's loading speed and optimize it to perform better.

Page Speed Testing Tools

A lot of online applications are available for free that allows you to test your website's performance. Although, all these applications have the same motive, additional features they provide differ from each other. Here's a short list of such applications with their featues.

  • Webpage Test - This application segregates each component that affects the page speed like time consumed to load the site for the first time, image compression state, cache configuration and effective use of CDN. It suggests you on the optimization you need to carry out for better performance.
  • GTmetrix - This application displays google page speed score for your site along with yahoo yslow score. It also enlists the page speed factors independently and highlights the components that are slowing down the site loading speed. It also provides you with the downloadable optimized version of the images that need optimization.
  • Pingdom - This application provides you with the performance grades, google page speed score along with fullpage analysis by breaking down the page contents and displaying loding time for each of those contents. It also compares your website with others tested with this tool and display the result.
  • Official Page Speed Insight From Google - Google's page speed insight provides a different set of information than other speed testing tools. It also displays the details on what you need to optimize and instructions on how to optimize. It also provides you with the downloadable optimized images, stylesheets and javascript files.

Configure Browser Cache or Leverage Browser Caching

Caching static assets of a webpage should be enabled as it helps to load the webpage faster for the next time a visitor runs the same webpage. If you are working on a wordpress site, you can use external plugins like W3 Total Cache for that purpose. If you are working on a custom website then you can modify the .htaccess file as follows.

AddType text/javascript .js    
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
<IfModule mod_headers.c>
    <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
        Header set Cache-Control "max-age=2628000, public"

This helps the browser store static assets like images, stylesheets and javascript files which ultimately makes the webpage load faster in future.

Implement CDN

Content Delivery Network (CDN) refers to a group of geographically distributed servers that work together to provide faster delivery of global internet contents like bootstrap stylesheets and scripts, font-awesome stylesheets and font files as well as google fonts. This allows a website to load using such files from the users closest server rather than retrieving them from the server from where the website is being hosted.

Eliminate Render Blocking CSS Stylesheets and Javascript Files

When we load the website stylesheets and javascript files unnecessarily in the <header> tag of our HTML page, it prevents the website contents being loaded prior to loading all those stylesheets and javascript files. That's what is called as render blocking stylesheets and javascript files. By default, all those files must be placed below the footer of a page right above the closing </body> tag. Only the styles that are needed to diplay above the fold contents which is the contents that appear on a page prior to scrolling should be placed inside the <header> tag inside a <style> tag. It helps the webpage display those above the fold contents faster and increase overall page loading speed.

Minify CSS and JS Files

All the stylesheets and script files should be minified which will reduce their file size and hence reduce the page loading speed.

Optimize Images

Most of the images we add in a website are high quality and that probably means a larger size. But, for a better performing website, these images need to be optimized so that the quality is preserved and the size is reduced as much as possible. You can find a lot of image image optimization tools online but it's been made easier by GTmetrix and Google Page Speed Insights as they do it on their own and let us download and use those images. In this case Google Page Speed Insights has a upper hand on GTmetrics because images optimized by GTmetrics can further be optimized by Google Page Speed Insights.

Improve Server Response Time

Server response time is the amount of time taken by a browser to receive a response from the server. According to Google Page Speed Insights a searver's response time should be below 0.2s. If your server response time is still much higher than the time recommended by google page speed insights after all those optimizations, you need to go for a different and dedicated hosting service provider instead of the one you are using.