Know Your Website Loading Speed On Desktop / Mobile Using Google Page Speed API

If you have a website that takes much to load in the browser  that makes your website user get frustrated and they leave out of the site. To avoid this most of the site must be optimized to load too quickly.

Google provides pageSpeed Service to know your site performance interms page score. To know site page speed score please go to demo page by click on the demo link below and enter site name like this  (http://smarttutorials.net/) as well select dropdown option either mobile or desktop to know page speed on either of the device.(mobile/desktop)

Know Your Website Loading Speed On Desktop / Mobile Using Google Page Speed API

Demo

Know Your Website Loading Speed On Desktop / Mobile Using Google Page Speed API

Know Your Website Loading Speed On Desktop / Mobile Using Google Page Speed API

If you page score more than 90 means there no problem as per site performance. If page score less than 90 you need to optimize your site to load quickly.

Some tips to optimize your site.

1. Use minified versions of the jQuery library, If you are using development version of the jQuery libary file.

2. As well minify the style.css file.

3. Optimize images that used in your site. If you own wordpress site plaese install following plugin Smush it, that will take care of image optimization.

4. Optimize your database, so that it keeps only needed data’s. If you own wordpress site plaese install following plugin Wp- Optimize that will take care database optimization.

Know Your Website Loading Speed On Desktop / Mobile Using Google Page Speed API

Download

I am going to implement page speed service using jQuery. Before continuing this tutorial plaese refer my previous tutorial on How to get Google API key and Google oAuth 2.0 client ID to get Google api key to access this service. Once you created API access key please continue this tutorial.

Create index.html file and and add the following css and jQuery files in your html file.

now add following html and jQuery scripts.

Once user entered their site name in the textbox and clicked on analyze button, Using jQuery we are getting site name and sending their sitename to Google page speed API with api key we generated before. Google page speed service analyze your site and send respones back to the client.

Posted by:

muni
  • http://www.techforgeek.com Indrajeet

    wow awesome post. i am going to try this in my site too. thanks

  • http://www.smarttutorials.net muni

    highlight: function(element) {
    $(element).closest(‘.form-group’).removeClass(‘has-success’).addClass(‘has-error’);
    },
    success: function(element,lab) {
    $(lab).next().text(‘Success!!!’);
    $(lab).text(‘OK!’).addClass(‘valid’).closest(‘.form-group’).removeClass(‘has-error’).addClass(‘has-success’);
    }

Related articles

Back to Top