Analysis of Google Page Speed Insight Tool - Improve Website Development Standards using Google`s Page Speed Insight Tools

1. Google
Page Speed Insights
Surun Infocore Systems

2. What is Google Page Speed?
1) Analyzes web pages for performance best practices
2) It only evaluates Front End Performance of webpage and NOT any server
side performance evaluation
3) Based on Google Theory of calculating the webpage performance, this tool
rates the webpages with points – individually for desktop and mobile
platforms, where 100 points is being highest.
4) Earlier this tool was available in Add-on (plug-in) format for Chrome
browser but later on Google made it available only in Live Web based
format (you can access from any browser)
Note :
While testing webpage performance with this tool, it is recommended to disable or avoid filtering
plug-ins used (like Add-Block Plus, Flash-Block etc.), so as to get the real performance calculations.

3. How To Use Page Speed Insights?
1) As this tool is available only in Live Web format, navigate to following Link
from your browser and enter your desired website URL in it
https://developers.google.com/speed/pagespeed/insights/
1) The analysis results are found in following major categories
1) Should Fix
2) Consider Fixing
3) Passed Rules
4) Download Optimized Versions of – image , Javascript & CSS Resources etc.
!
!


4. Website Performance Improvement Plan
1) Enable Compression – not images always
2) Leverage Browser Cache – identify the reusable codes
3) Optimize Images – reduce the image size as well as dimensions
4) Implement CSS Sprites – Use of CSS on images & reduce the number of
requests browsers can made
5) Optimize order of CSS and Java Script – sequencing is very important
6) Minify & Bundle CSS and Java Script – Removing whitespace can save few
more bytes
7) Additional Tools and Techniques

5. Website Performance Principles - I
MINIMIZE THE AMOUNT OF SERVER DATA NEEDED
1) As network bandwidth is very limited resources, so make sure that the website fetches only TRULY REQUIRED DATA
from the server
Limited
Network Bandwidth
2 MB Page 3 MB Page 4 MB Page
Cable Model
(15 MB /s)
1.1 s 1.6 s 2.1 s
4G Network
(4 Mb /s)
4 s 6 s 8 s
3G Network
(750 kb /s)
21.3 s 32 s 42.7 s

6. Website Performance Principles - II
CONTROL THE NETWORK LATENCY
1) Reduce the number of Server Request browser has to send to the server, Network latency simply means time required
to travel a packet from one location to other
2) It is different from Network bandwidth
3) Try to reduce the requests
• Reduce the number of Larger Server Requests
• Combine multiple small - small requests into single requests
• Simultaneous connections limited by the Browsers
Time Required To Travel
The Packet To & Fro
Packets

7. Website Performance Principles - III
CORRECT ORDER OF THE RESOURCES
1) Make sure that we supply resources in proper order to the Browsers, because some resources are critical path so
browser cant start rendering the page until it has certain information.
2) On Other hand, some resources in non-critical paths may block the privileges to download in the browser rendering
sequence.
Order Properly – Critical and non-critical resources
For Faster Browser Rendering Process

8. IMPLEMENTING THE PAGESPEED TRICKS
1) Enable Compressions
1) What to compress?
2) How to compress?
3) Verify the compression?
2) Leverage Browser Cache
1) What is Leverage Browser Cache?
2) Empty Cache Vs. Prime Cache
3) Caching Headers
4) Conditional Cache Requests
5) Problems In Conditional Cache Requests
6) Implementing Leverage Browser Cache
7) Cross Check
3) Image Optimization
1) Serve Scaled Images & Optimized Images
2) Serve Scaled Images
3) Optimized Images
4) WebP Images
5) Get Best Optimized Images with an Ease
4) CSS Sprites
1) Network Latency?
2) Simultaneous Browser Connections
3) What is CSS Sprite
4) Implementing CSS Sprite – an Example
5) Limitations of CSS Sprite
5) Correct Ordering Styles & Scripts
1) Why Ordering?
2) Correct Placement of CSS and JavaScript
6) Minify & Bundle Scripts

9. Enabling HTTP Compressions - I
What data should be compressed?
1. Many images, audio, video files are already have special formats inside their algorithms which
enables the compressions
2. Compressions will be beneficial for coding files like
1) HTML
2) CSS
3) JavaScript
4) XML
5) JSON
3. To enable the compressions – use of gzip, deflate
(Limited Network Bandwidth)
Powerful Processor on PC
can decompress the data

10. Enabling HTTP Compressions - II
Implementing gzip in Apache Server?
1. Add the following to your .htaccess file:
2. Apache actually has two compression options:
1. mod_deflate is easier to set up and is standard.
2. mod_gzip seems more powerful: you can pre-compress content.
3. Apart from above method, there are several other methods are also available to enable
compression in PHP pages
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

11. Enabling HTTP Compressions - III
Verify the Compression?
1. Once you’ve configured your server, we have to make sure that it is working perfectly
2. To cross verify there are commonly 3 methods are used :
• Online gzip test –
– http://www.gidnetwork.com/tools/gzip-test.php
– https://varvy.com/tools/gzip/
• Offline Method - View the headers:
– Use Live HTTP Headers plugin in Firefox to examine the response and look for a line that says
“Content-encoding: gzip”.

12. Leverage Browser Cache- I
What is Leverage Browser Cache :
1. On most of the multi page websites, some contents are constant and they do not change page
by page, like , Header, Logo, Images, CSS, JavaScripts etc
2. Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the
browser to load previously downloaded resources from local disk rather than over the network.
Some Contents Don’t Change
Page By Page

13. Leverage Browser Cache- II
Empty Cache Vs Prime Cache?
1. When user visits a website for first time, he have to pay for the full download of the each and
every necessary resources a first – into an EMPTY CACHE
2. When user again tried to load the content either by hitting Refresh button or visiting website
next day again – then if we have enabled Browser Cache then the local resources will provided
to the browser from this Browser Cache (PRIME CACHE) and only the dynamic content will be
loaded from the webserver if needed.
Empty Cache
All resources are downloaded to the Local Cache
Prime Cache
Only Dynamic
Contents are loaded
from server
Static Files are loaded
from Browser Cache

14. Leverage Browser Cache- III
Caching Headers :
1. Webserver includes following two types headers for Caching : (both can be use at a time)
A. Expires Header – includes date and time until data hold in cache
1. Expires: Thu, 27 Aug 2015 12:40:15 GMT
B. Cache-Control – more modern way (mentioned in seconds)
1. Cache-control: max-age=259000
2. In response to these headers webservers responds with following Header
1. Last Modified : Mon, 12 Jun 2015 01:15:30 GMT

15. If resource is already cached and
suppose we change it on server then
How Browser can decide which one
to use?
Leverage Browser Cache- III

16. Leverage Browser Cache- IV
Conditional Cache Updates Requests:
1. Browser always first cross check the Prime Cached data with the web server to make sure that
the Prime Cache holds the latest data, and only after proper confirmation from web server the
browser displays the data from Prime Cache else it will load the latest data received from the
web server.
2. This is handled by the header request : If-Modified-Since
If-Modified-Since: Mon, 12 Jun 2015 01:15:30 GMT
HTTP 304 Not Modified
HTTP Request
HTTP 200 OK
OR
Send New / Updated File

17. Leverage Browser Cache- V
PROBLEMS WITH CONDITIONAL CACHE UPDATES REQUESTS:
1. Not all browsers are making conditional requests to the webservers
2. Due to intermediate proxies, there are possibilities in failing these kind of requests
SOLUTION FOR CONDITIONAL CACHE UPDATES REQUESTS:
1. Version Controlling of Resources
1. Change resource Names in every updates
2. Example – logo.png > logo-1.0.png
3. This will forcefully push the browser to treat this as new resource and then browser will automatically
download the latest resource.

18. Leverage Browser Cache- VI
Implementing Leverage Browser Cache :
1. Through .htaccess directives you can cache these static files in a user browser
2. To cache static contents add the following lines on your .htaccess file.
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days

19. Leverage Browser Cache- VI
Cross Check Implementation of Leverage Browser Cache :
1. To see the results of implementation of Leverage Browser Cached Elements, open website and
then right click and select “Inspect Element” > Navigate to “Networks” tab
2. Here you can see which elements are coming from Cache and which are loading from server

20. Image Compressions – I
Image Optimization :
1. Optimization of images are absolutely necessary component in speeding the webpages, as
images belong to one of the largest resource on the webpages.
2. To achieve Image Optimization, we need to classify the process into two image categories
1. Serve Scale Images : Size the images exactly how you wanted to have displayed on the page
2. Optimize Image : Apply lossless compressions techniques to reduce the size
Served Scale Images
Height & Width Management :
Keep images of exact size which
are appearing on display
Optimized Images
Reducing Few Bytes :
Use Image Optimizations to reduce
the physical size of the image

21. Image Compressions – II
Serve Scale Images:
1. Understanding the scope of today`s resolution independent websites (responsive websites), we
have to be very careful while designing the Serve Scale Images
2. Don’t Define Image Dimensions in absolute units like – Pixels
3. Define images in Percentages
Image Size in Pixels
Image Size in Percentage

22. Image Compressions – III
Optimize Images:
1. Prefer PNG or GIF images over JPG image formats, as JPG images are more lossy compressions
2. In process of optimization – JPG images degrades the quality where are in PNG images this is
not true
3. As PNG images are internally separately divided into various levels of data and each level can
be get involve into compression level – indicating there can multiple levels of compressions
4. Example of a Software to compress PNG images – PNG Crush, Kraken.io, Tiny PNG,

23. Image Compressions – IV
WebP Images:
1. As per latest updates – Google Developers Team have evolved with new image format “WebP”
which is more compact (26% smaller) in size compared with PNG files, And 25-34% smaller in
size as compared with JPG format
2. The major problem with this WebP images – it is supported only by Google & Opera Browsers
3. But Google developer teams have provided separate code for detection of browsers and using
that code we can use WebP images and also to support other browsers we can use regular
image formats

24. Image Compressions –V
Get Best Optimized Images with an ease:
1. The process of getting the best optimize images with maximum ease is – Take help of Google
itself
2. After PageSpeed Insights Analysis – check these links at bottom of the result

25. CSS Sprites – I
Important Factors – The reason behind Implementing CSS Sprites:
1. Network Latency
2. Simultaneous Network Connections Browsers Can Make At Single Time
Time Required To Travel The
Packet To & Fro
Packets
Transferring One Larger File incurs network Latency on Only This One Request
Transferring Multiple Small Files incurs network Latency on Only Every Request
Network Latency

26. CSS Sprites – II
Simultaneous Network Connections Browsers Can Make At Single Time
1. Typically all browsers allow max 6 – to 10 simultaneous network connections at any one time
to a single host
At a time only 6 Connections will be made by the Browser to download the resource from server
Resource 1 – Connection -1
List of Resources
Resource 2 – Connection -2
Resource 3 – Connection -3
Resource 4 – Connection -4
Resource 5 – Connection -5
Resource 6 – Connection -6
Web Server
Wait for available connection

27. CSS Sprites – III
What is CSS Sprites:
1. An image sprite is a collection of images put into a single image. A web page with many images
can take a long time to load and generates multiple server requests. Using image sprites will
reduce the number of server requests and save bandwidth.

28. CSS Sprites – IV
Implementing CSS Sprites – Part 1:
1. Combine all smaller images into one single image file in what ever layout you wanted to have –
like Horizontal, Vertical, or Grid Layout – but remember the coordinates of each image properly
2. Else there are several online tools available which can make this task easy –
1. http://csssprites.com/
2. http://instantsprite.com/
3. http://css.spritegen.com/
4. http://www.spritecow.com/
One Single Image
Say, Saved this image as – SocialMediaIcons.png
Each of all Images are of 64px X 64px with gap of 1px in each of them

29. CSS Sprites – IV
Implementing CSS Sprites – Part 2:
1. Changes in CSS - Define icon class “SocialMediaIcons”
. SocialMediaIcons {
display: block;
width: 64px;
height: 64px;
background: url(‘../images/SocialMediaIcons.png’);
float: left;
margin: 2px;
}
.RSSIcon {
background-position: -0px -0px;
}
.YouTubeIcon {
background-position: -0px -74px;
}
1. Set Display mode to : Block
2. Set Width & Height As per Icon
1. Create Different Class for Each
Icon
2. Define the Exact position to
avoid the override icons
1. Regular CSS properties

30. CSS Sprites – IV
Implementing CSS Sprites – Part 2:
1. Changes in HTML: - Use of Defined icon class “SocialMediaIcons” in Anchor Elements
2. Take a note : No image element is used in the anchor element
Use of previously defined class
Use of previously defined specific class
<a class=“SocialMediaIcons RSSIcon” href=https://...”></a>
<a class=“SocialMediaIcons YouTubeIcon” href=https://...”></a>
<a class=“SocialMediaIcons FacebookIcon” href=https://...”></a>
<a class=“SocialMediaIcons TwitterIcon” href=https://...”></a>
<a class=“SocialMediaIcons EmailIcon” href=https://...”></a>
Cross check this CSS Sprite implementation by clicking each Icon to make sure
that there is no overriding between the icons and links
Important :

31. CSS Sprites – V
Limitations of CSS Sprite :
• Only PNG amd GIF images are supported; JPG will come in a future release.
• Only CSS backgrounds are supported; <img> tags will come in a future release.
• A background image can't be safely sprited if the HTML element is larger than the background
image (since this would allow the combined image's extra pixels to show around the edges).
Accordingly, the CSS must have explicit width and height in the same declaration as the
background URL, and the width and height must be smaller than or equal to those of the
image.
• The CSS must not include any background-position declarations without background-url
declarations. Such a naked background-position declaration could apply to any background-
image, and since we don't know which one, it isn't safe to do any spriting.
• The Sprite Images filter currently arranges images in a vertical strip, which might not be the
most efficient arrangement. More advanced layouts will come in a future release.

32. Correct Ordering Styles & Scripts - I
Why ordering ?
• Its is absolutely necessary because browser`s rendering process is sequential process
• So if some JavaScript is taking more time for rendering then there are great possibilities that
this JavaScript will slow down the process of loading of the next code.
Correct Order :
Move CSS up to load as early as possible
Move JavaScript down to load much later

33. Correct Ordering Styles & Scripts - II
Define CSS Correctly?
• Maintain all the Internal CSS Code and External CSS style sheet references at same place in
HTML <Head>
• Because if styles are defined at random places in HTML <Body> then Browser have to REFLOW
the entire page again to implement the newly found Styles to already downloaded element, its
like re-calculate page layouts
Why keep JavaScript at end to load?
• The first rule of browser rendering is, Browser guarantees that it will be execute the JavaScript
in the order in which it appeared in your code
– If firstly defined JavaScript is much bigger to download and parse then surely it will hold the execution
of next defined JavaScript
• The Second important rule is – DOM elements defined below JavaScript will be get rendered
only after parsing of JavaScript
Where to Define JavaScript?
• The very Ideal place will be - right before the closing tag of <Body> tag

34. Minify & Bundling Scripts - I
Minify - means?
• From Browser point of view – white spaces, comments don’t matter, code exactly work as
written, but these whitespaces, comments are increasing the file size and it will increase the
network bandwidth utilization.
• Why CSS and JavaScript needs to minify – the reason is these files are more important in order
to consider the layout of website rendering process, so if they are in smaller size, it will
increase the website speed.
Bundling Files
+
+
=
=
site.css page.css
app.js logic.js
bundle.css
bundle.js
Easier
For
Development
Better
For
Performance