Improve Google Pagespeed Insights – Best Website Page speed Test Tool

July 4, 2017 admin Search Engine Optimisation 0

Google Pagespeed Insights is the best website or page speed test tool to analyze your website speed. Google Pagespeed Insights tool is very helpful to boost your website speed due to its awesome information and quick fix tips.

Google pagespeed insights provides lots of information about website for improvement. After website or page speed test every single problem are listed in report. They even provides with quick solution tips and also details on how to solve the problem listed. Its a free tool so any one can run their website or page speed test. Some people finds them helpful ( almost many peoples). Some are not able to get nice score in google pagespeed insights.

you can actually score 100 but lots of things must be fixed properly. 100 does not mean you should have 100 score for you website. A website with score of 65 is also a good thing but don’t fall below 65. A website with score of 65+ in both mobile version and desktop version loads under 3.5 seconds. This is a good thing for SEO. If you want you website to be Search engine friendly, consider fixing speed of your site with google pagespeed insights tool.

You may have already tried most of the solution from google pagespeed insights consider fixing tabs. If it didn’t worked then do not worry, this article will help you to get your red score into almost green.

Do you think it’s hard to score high with Google pagespeed insights?

Noooooo..!!!!!!, According to my experience fixing few major problems of page loading can get you good score and make your website loads under 3 seconds for best user experience.

Below are the most major problems and easy solutions for them and “yes” it works actually.

Let’s get started with all possible major problems which makes your website load very slow.

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

As far as I know, this was a head pain. When I just started with newly customized website by my own. I ran the website speed test with google pagespeed insights. This problem was like never gonna fix. I tried many ways to fix this issue but was not able to do so. Don’t worry if you are beginner and reading this article. You ain’t experience as I did.

To fix this issues, there are many(not so much) steps. Best way to understand this problem is to have a look on the details provided by google pagespeed insights tool.

So what did you figured out? Nothing right? Let me describe this issue. JavaScript and CSS is actually blocking your html codes to load at beginning. This means your html codes can not be execute before your Javascript and CSS files. So to fix this issue you must let your site load the html codes first and load other necessary files like JS and CSS.

Steps to fix:

  • Open your header file or main template file (index file) in code editor.
  • Navigate your all JS and CSS files inside <head> </head> tag.
  • Cut and Paste all of them before </body> tag at the bottom of your main template file.


WordPress user might have problem with this step but they can do it more easily.

  • Go to your Dashboard > Appearance > Editor > Functions.php
  • Locate Load CSS & JavaScript in your functions.php file
  • Simply Copy the code :

function  footer_enqueue_scripts()  {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');
 
  • Paste the code just above your Load CSS & JavaScript function
  • Save it

So, Above code will replace the styles and scripts call action from header to footer just by removing action from head and hooking it right in footer.

The process is very simple and quick to fix render blocking resources but there are other methods too.

If you do not like to load the javascripts files in footer. Lets assume we have a slider in our website. Moving slider scripts to footer may not work properly or your slider may not function as you requested. In such case, you can defer or async the scripts.

Defer Example:

<script type="text/javascript" src="js/jquery-2.2.2.js" defer></script>

Async Example:

<script type="text/javascript"  async src="js/jquery-2.2.2.js" >

WordPress users can use plugins for this quick fix for delaying javascripts.

Don’t want too much plugins for your website? You may have been worried about more new problems with tons of plugins.

 

Async scripts of your wordpress site

  • Copy the function below

Async tutorial by ikreativ.

function async_scripts($url)
{
    if ( strpos( $url, '#asyncload') === false )
        return $url;
    else if ( is_admin() )
        return str_replace( '#asyncload', '', $url );
    else
	return str_replace( '#asyncload', '', $url )."' async='async"; 
    }
add_filter( 'clean_url', 'async_scripts', 11, 1 );
  • Paste the following code in Functions.php

Note: You must call your javascript with new function ( async_ scripts ) to work everything like a charm.

Example:


if (!function_exists('async_scripts')) {
function tuto_scripts() {
wp_enqueue_script('async-scripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'));
if (is_singular() && comments_open() && get_option('thread_comments') == 1) {
wp_enqueue_script('comment-reply');
}
}

add_action('wp_enqueue_scripts', 'async_scripts');

Applying anyone steps from above tutorials will help you to get rid of render blocking problem and boost your website speed.

You should now see changes in your Google pagespeed insights results.

Minify Javascripts, CSS and HTML

Minifying your files will boost up your website speed. This is a common problem in new website when the sites are tested by Google pagespeed insights. This is very easy to fix just by compressing the sizes of your js, css and HTML file.

Often Minifying removes spaces, semicolon, punctuation and comments etc from your codes.

Javascript and CSS minifier tool: Javascripts and CSS minifier

Html minifier tool : Html minifier

You can find lots of tools out there and use any tools to minify your codes.

WordPress users can use plugins like Better WordPress Minify to boost your website speed.

By now you should have more than 75 score in Google pagespeed insights. Go ahead and start your website or page speed test.

Optimize Images

A website without images are not attractive at all. Nowadays, people always wants quantity. Low resolution images are no any longer helpful. Lots of images in your website or pages makes it more attractive but their quality makes the image sizes much bigger and bigger. If your images are bigger in size than your website loading speed will be slow.

To increase your website speed use low image sizes. If you think low image sizes are low in quality, then here what comes image optimization. Optimising your images will help you to reduce sizes more than 50% without loosing quality.

There are lots of website which can optimize your images. All you have to do is upload them and they will reduce the size and upload them back to your website root.

Image optimize tool : Optimizilla

Lots of plugins like WP Smush are out there for wordpress users too or they can simply use the above link to optimize images.

 

Leverage browser caching

Caching your website will increase speed by downloading files from local disk rather than the server. So when you cache your website or pages even database. Those files are downloaded from your server to your local disk. When you try to load the website, the saved or downloaded files will be used instead of downloading same new files from the server. Don’t worry about changes or updates done in your website. Browser will automatically downloads the files from server once it reaches expiry dates. Its very simple to cache your website using .htaccess files. Be sure to have backup.

  • Goto your root directory (public_html / www )
  • Find .htaccess file
  • Copy the code below

## EXPIRES CACHING ##


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"

## EXPIRES CACHING ##
  • Paste the code in .htaccess file anywhere at the top and save it.

There are lots of plugins for wordpress to cache their website. You can use anyone of them. W3 total cache can be used for many solution regarding page speed. You can minify your files, cache them and even async the javascripts. You can load your scripts and css files in footer too. Some find it helpful and some don’t.

So above tutorials will help you to get a score of more than 80 and which is better result then before. You can score 100 by solving every issues. These four are the most common and should fix issues to boost your website speed.

After following all the steps from above you can start your website or page speed test in google pagespeed insights or any other website speed test tools. If you find it helpful please share the content. Sharing is always sexy. Don’t forget to comment down below.

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*