Page Speed Insights for QA

Page Speed Insights:-
Page Speed Insights measures the performance of a page for mobile devices and desktop devices. It fetches the URL twice, once with a mobile user-agent, and once with a desktop-user agent. Basically Page Speed Insights can examine your website and make recommendations for manual improvements.

What are Google Page Speed Insights?

Google Page Speed Insights is a free open source web page analysis service which can offer guidelines on how to maximize the performance of your pages. It is part of Google Page Speed Tools which provides both analysis and optimization services. Page Speed Insights doesn't require you to host your site with or be a customer of Google. You don't have to fill out any annoying registration forms, set up an account, or provide an email address to use it. You can enter any URL you'd like to check, you do not need to be the owner or administrator. There is no need to provide any credentials for the site being analyzed, nor share any other confidential information.

Google offers a link to let you access the service directly, or you can install a browser extension for Google Chrome and Firefox which is essential for internal sites which aren't public facing as well as some other specific public sites.

How does Page Speed Insights work?

Page Speed "analyzes the content of a web page, and then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates. It runs a number of diagnostic tests against a web page, and analyzes the page's performance on a number of 'rules' that are known to speed up page load time. The rules are based on general principles of web page performance, including resource caching; data upload and download size, and client-server round-trip times. They examine factors such as web server configuration, JavaScript and CSS code, image file properties, and so on. For each rule, Page Speed gives a general score, using a simple red-yellow-green grading scheme, then suggests specific techniques for correctly implementing each rule. It also provides some automatic optimization of external resources included on a page, such as minifying JavaScript code and compressing images."

For Developers - Page Speed Insights plug in for Google Chrome/Mozilla:
Page Speed Insights is available as an open-source browser extension for Google Chrome. Webmasters and web developers can use Page Speed Insights to evaluate the performance of their web pages and to get suggestions on how to improve them.
Install by clicking this link: http://developers.google.com/speed/pagespeed/insights_extensions
you can also add a plug in to Chrome and Mozilla browser.

To test a page with Page Speed:-
- To get started, click "Analyze your site online" (again, this does not have to be your site - keeping in mind it must be publicly accessible only).
- Enter a URL to analyze and click "Analyze." For instance, I'll analyze www.xyz.com.
- Note you can analyze both the "Desktop" and the "Mobile" versions of the page using the corresponding buttons in the upper right.
- The result doesn't actually reflect the loading time of a page; it indicates "how much faster a page could be." For ex 70/100 means the performance could increase by about another third of what it currently is.
- Now the suggestions are mentioned and after getting those suggestions it is easy to make website performance better.

What can the mobile site analysis function do?
- Click the "Mobile" button and you will get a similar but separate set of recommendations.

Suggestions for developers mentioned in page speed insights to enhance the speed of their website pages:-
1. Leverage browser caching
- 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.
2. Enable compression
- Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.
3. Optimize images
- properly formatting and compressing images can save many bytes of data.
4. Eliminate render-blocking JavaScript and CSS in above-the-fold content
- None of the content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources or inline the critical portions of those resources directly in the HTML
                -Remove render-blocking JavaScript
                -Optimize CSS Delivery
Consider Fixing:
- Minify JavaScript (Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.)
- Minify CSS (Compacting CSS code can save many bytes of data and speed up download and parse times.)
- Minify HTML (Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up download and parse times.)