PageSpeed Insights Checker

I wanted to talk you about PageSpeed Insights, a tool which can be used to find issues affecting your website load time, and give you some tips on how you can fix them. So when you visit our Google PageSpeed Insights checker tool for website load test. You just enter your URL in the field and press submit button. It'll give you a score out of 100, and highlight any problem areas with your site. The focus of this tool is to point out issues which, if fixed, would improve your site’s overall load time and make your users happier.

Why use Pagespeed insights checker?

The big question is, what do you do with this website load test information? Well, the most common problems fall into three buckets.

1. First, problems that can be solved with build tools. For example, JavaScript files where you could minify them using our JS Minifier tool and send fewer bytes down the wire, or merging multiple files, so rather than make four requests, you only make one.
2. The second set of issues are focused on the structured your page. For instance, where you link to your JavaScript files.
3. And thirdly, problems which need to enable things like caching of your page assets.

How to PageSpeed insights Score Up?

When you run PageSpeed Insights checker, it looks at your site and basically checks whether any of the images are larger than they need to be, and in the guidelines it will recommend jpeg optimization, which is a command line tool which strips out any metadata from the image files and can lead to some really impressive reductions in file size. To optimize your page speed insights images you can use Image Optimizer tool.

The second set of problems falls into the category of page structure. Now, I don't know about you, but I've definitely put a JavaScript file in the head of my page before. The problem with this is that the browser will start to pass the document, and as it reads the HTML tag, the head tag, it will eventually reach your script tag, and this is where you'll see the screen of bad times. The reason the page stops rendering is that JavaScript can manipulate the DOM and CSS. So the browser needs to go and fetch the JavaScript from the server and execute it once it's downloaded. This is just in case the script changes a DOM or CSS.

And it's only after the JavaScript is finished executing that the page can continue rendering. So to avoid this delay, simply move your JavaScript to the bottom of the body element. This way the browser can pass and render the page up to this point, and then it'll handle fetching the JavaScript at the very end.

If you have a relatively small amount of CSS for a page, you can inline it directly into the HTML, removing any requests for a CSS file, and allowing the page to be rendered as soon as the HTML is loaded. Turbo Page Speed Checker helps to check page by page or all files size and speed test like Pingdom speed test tool.

If you have a large amount of CSS, however, you could in line just above the full CSS so the browser can render the most important content, and then a load of your CSS using JavaScript.

Speed Up Your website using Pagespeed insights checker

If you look at HTML5 Boilerplate's HD access file, there are a number of caching rules for finding the caching period depending on the type of file. Here's a snippet of the file. We've got CSS and JavaScript cached for a year, images cached for a month, and HTML isn't cached at all.

<IfModule mod_expires.c>
  ExpiresActive on

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"

</IfModule>

Now, this is just a guideline. You may want to cache your images for a year, you may want to cache your HTML for 30 minutes to an hour, just so that any user hopping backward and forwards between pages gets a smooth experience.

The final thing to enable on your server is GZip. Use Check GZIP compression tool to check the current position of your Gzip. If you've not come across this before, it’s supported by all browsers, and it’s an incredibly powerful tool for compressing any text-based assets. There are some huge wins to be had with compression rates up to 80%. Now, how you enable this will depend on your server, but the gains are big for a relatively small amount of work. I recently got this working on my server using some snippets to the .htaccess file. So add the below codes to your server file.htaccess and check your website using Pingdom speed test tool.

<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

  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

It was as simple as just adding GZip on. So those are the three most common problem areas raised by PageSpeed Insights. Build times fixes, page structure, and server-side script. Now, these aren't the only tools to help with performance, so if you're looking for more tips, or just curious about what other tools exist.

I also recommended you to use Turbo SEO Analyzer It helps to find more than 50+ SEO issue and fix all issues easy way.

Hopefully, this has been a useful insight into how you can improve your site's load time performance. I challenge you to get 100 points on your PageSpeed score. Cheers.