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
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.
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.
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <script type="text/javascript" src='jquery-1.9.1.min.js'></script> <script type="text/javascript" src='bootstrap.min.js'></script> </head> <body> </body> </html>
now add following html and jQuery scripts.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<style type="text/css">
body {
width: 100%;
}
.container {
width: 500px;
margin: 150px auto;
}
.btn-ttc,.btn-ttc:hover,.btn-ttc:active {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #007da7;
}
/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ttc {
background-repeat: repeat-x;
background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
}
/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ttc:hover {
background-position: 0 -15px;
}
p {
margin-bottom: 30px;
}
.progressbar {
width: 220px;
margin: 230px auto;
display: none;
}
.progressbar p {
margin-bottom: 25px;
margin-left: -35px;
}
.progress {
width: 300px;
margin: 0px auto;
}
.score {
width: 300px;
margin: 25px auto 0px;
text-align: center;
}
.score_container {
display: none;
}
#title {
margin-left: 30px;
}
.form-control {
border: 1px solid #00BB64;
}
</style>
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='bootstrap.min.js'></script>
</head>
<body>
<div class='container'>
<p class="text-center">Analyze Your Site.</p>
<select class="form-control" id='strat'>
<option value=" ">Select Strategy To Know Score Desktop / Mobile</option>
<option value="desktop">desktop</option>
<option value="mobile">mobile</option>
</select> <br> <input type='text' id='url' class="form-control"> <br>
<button id='sub' class="btn btn-ttc col-lg-6 col-lg-offset-3"
data-loading-text='wait analyzing.......'>Analyse Your Site</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<p class="modal-title text-center">
Page Score on <span id='type'></span>
</p>
</div>
<div class="modal-body">
<div class='score'>
<p id='title' class='text-center'></p>
<span class='text-center'>Score : <span class='sc'>40</span>/100
</span>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<script>
$('#sub').on('click',function(){
var url=$('#url').val();
var st=$('#strat').val();
if(st=" "){
st='desktop';
}
var request = $.ajax({
url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url='+url+'&key=API-KEY&strategy='+st+'',
beforeSend: function ( xhr ) {
$('#sub').button('loading');
}
});
request.done(function(msg) {
//console.log(msg);
$('#sub').button('reset');
$('.progress-bar').width(msg.score*3);
$('.sc').html(msg.score);
$('#title').html(msg.title);
$('#type').html(st);
$('#myModal').modal('show');
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
$('.close').on('click',function(){
$('input[type=text],#strat').val('');
});
});
</script>
</body>
</html>
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..
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
