About PageSpeed Insights:

Google's 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.

The PageSpeed Score ranges from 0 to 100 points. A higher score is better and a score of 85 or above indicates that the page is performing well. Please note that PageSpeed Insights is being continually improved and so the score will change as we add new rules or improve our analysis.

PageSpeed Insights measures how the page can improve its performance on:

1. time to above-the-fold load: Elapsed time from the moment a user requests a new page and to the moment the above-the-fold content is rendered by the browser.
2. time to full page load: Elapsed time from the moment a user requests a new page to the moment the page is fully rendered by the browser.

1. time to above-the-fold-load:

Above the fold content is some thing  that appears on screen's worth, anything that you don't scroll. This is completely related to Designing part, so we'll not concentrate on this in this post.

2. time to full page load:

Time to full page load depend upon the following factors.

1. Reducing the Server response time.
2. Enable compression.
3. Optimise images.
4. Leverage browser caching.
5. Minify CSS.
6. Minify JS.
7. Minify HTML.

In the current post, we'll try to know the factors which cause the issues for the above 7 factors.

1. Reducing the Server Response Time:

The programmatic cause of over server response time is querying the DB. This can be of using Unused/ unwanted queries and Using more queries for getting the result. Unused query means trying the get the data which is not at all being used in the view. Unwanted query means querying the  DB for  the data which is already there in our hands. 

2. Enable Compression:

Compression allows your web server to provide smaller file sizes that load faster for your website users. To enable compression for the page we use 'Django-Compressor'.

3. Optimise Images:

When PageSpeed Insights detects images on the page, those can be optimized to reduce their filesize without significantly impacting their visual quality. Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements.

4. Leverage browser caching:

Leverage browser caching means, 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. Generally we'll load either static images or the images those were being served from the 3rd party resources.

5. Minifying CSS, JS and HTML:

Minification CSS, JS and HTML refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

We'll learn the techniques of how to overcome the above problems in the next blog post.