Chrome DEV Tools.

Let's Analyse some random page performance using Chrome dev Tools. Our main aim is to improve page performance through the following analysis.

Tools Used

• Chrome dev Tools

• Google page insights

Overall Analysis

• The page made 100 requests, and the total time for loading was 14.17s

  

Site Audit

For auditing, the site performance the following parameters were selected

• Parameters that require improvement :

1. Defer offscreen images

2. Does not use HTTP/2

3. Reduce unused JavaScript

4. Serve images in next-gen formats

5. Eliminate render-blocking resources

6. Properly size images

7. Reduce unused CSS

8. Efficiently encode images

   

• Parameters that passed the Audit

1. CSS is minified

2. Java Script is minified

3. Text compression Enabled

4. Prior connection to required origins established

5. Short initial server response time

6. Multiple pages redirects avoided

7. Video formats used for animated content

8. Duplicate modules from java-script bundles removed

9. Largest contentful paint image preloaded

10. Enormous network payloads avoided

11. JavaScript execution timeless

12. Minimal 3rd party usage

13. The largest Contentful Paint image was not lazily loaded

14. Avoids document. write()

15. Has a <meta name="viewport"> tag with width or initial-scale

16. Avoids unloading event listeners

SOLUTIONS:-

1. Defer offscreen images

If we observe the initial performance analysis of our web page we see Time to interact is not in a good range. Deferring offscreen images is one of the factors which is directly influencing this performance parameter. And in order to fix this we need to enable the images to lazy-load and load the important contents 1st. The solution can be basically summarised as “load it as you need it”

This lazy load can be applied simply by using a loading attribute in your img html tag and set the value as lazy.

<img src=”Shahima.png” loading = “lazy” alt = “shahima” width = “100%” height = “100%”>

1. Does not use HTTP/2

The resources requested by the website do not use HTTP/2. Using HTTP/2 offers more performance and optimization to the website than HTTP 1.1 . And leading to further improvement in the page load and overall performance.HTTP/2 offers many benefits over HTTP/1.1, including binary headers and multiplexing

To pass this audit we would have to enable HTTP/2 on our server.

1. You can use CloudFlare to get HTTP/2 without touching your backend at all.

2. Alternatively, you can use KeyCDN’s HTTP/2 test tool, which visits any URL for you and tells you if HTTP/2 has been set up correctly.

3. According to w3techs.com, Apache is still the most used web server today with over 55% of the websites using it. For HTTP/2, you need Apache >= 2.4. If you are running Ubuntu LTS (16.04), the default apt sources won’t bring you very far.

4. AWS added support for HTTP/2 to CloudFront. Source

5. Google Cloud Storage If you use a non-custom domain you will get HTTP/2 automatically. For custom domains, there is no HTTP/2 support just yet

1. Reduce unused JavaScript

Java script can slow down the page load speed as the browser needs to download and compile before it can proceed with rendering work. JavaScript is asynchronous (not render-blocking), and the code competes for bandwidth with other resources while it's downloading, which has significant performance implications.

your website has the following JavaScript file with more than 20 kibibytes of unused code:

You can see the unused code in the coverage tools: as u see only 49% used it so far

If we analyse the 1st file then all the red bar section shows the unused code that can be removed for this web page. Similarly, other files can also be analysed and unused code can be removed.

1. Serve images in next-gen formats

The Opportunities section of your Lighthouse report lists all images in older image formats, showing potential savings gained by serving AVIF versions of those images. AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

1. Properly size images

Images can be handled in the following ways:

1. Resize during the build process

2. Create multiple sizes and use srcset

3. Use img CDN

1. Eliminate render-blocking resources

Check for the following resources in the coverage tools and decide which is the most unused.

Coverage tools will show a waterfall graph and %age of each URL used and hence the elimination can be decided based on that

Instead of directly removing the files, libraries and URLs you can test them in the block tool.

8. Efficiently encode images

lists all unoptimized images, with potential savings in kibibytes (KiB). Optimise these images so that the page loads faster and consumes less data:

1. Reduce unused CSS

Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Again you can detect the unused css using coverage tool and block and see it if no changes detected then remove the unused CSS from the page.