#DevTools  #PageSpeed  #Dev 

Techniques for improving site performance

  • Image optimization
  • Serve static assets with an efficient cache policy
  • Eliminate render-blocking resources
    • Remove unsued CSS and JS
    • Use defer and async for JS
  • Compress JS and CSS
  • HTTP/2 protocol is used instead of HTTP/1.1,

Image optimization checklist

  • Remove unnecessary image metadata
    • Many images contain unnecessary metadata about the asset: geo information, camera information, and so on.
    • Use appropriate tools to strip this data.
  • Use image CDNs to optimize images
    • Compress, resize and reduce image quality
  • Defer offscreen images
    • Lazy-load images
    • Only load images when they are needed

Use image CDNs to optimize images

  • Image is processed with a lossy filter that eliminates some pixel data.
    • Aggressive optimization to reduce the filesize of the image asset.
  • Image is processed with a lossless filter that compresses the pixel data
    • Communicate intricate detail in its full fidelity.
  • ImageKit.io

Defer offscreen images

  • Images can appear on a webpage due to
    1. <img> elements in HTML(inline image) or
    2. CSS background images.

Lazy load can be done by:

  1. Lazy Load Images on Scroll Using JavaScript
    • On scroll all the images in view area will be loaded
    • Better solution
  2. Using browser-level lazy-loading
    • Chrome and Firefox both support lazy-loading with the loading attribute
    • <img src="image.png" loading="lazy" alt="…" width="200" height="200">
  • Using Intersection Observer
    • Check if the images are in the viewport.
    • Intersection Observer is available in all modern browsers.
    • We use JavaScript to check if they’re in the viewport.

Serve responsive images

  • web.dev
  • Web Fundamentals
  • Resize images
    • Two of the most popular image resizing tools are the sharp npm package and the ImageMagick CLI tool.
    • npm sgarp
    • [imagemagick]https://www.imagemagick.org/script/index.php)

Reference

Serve static assets with an efficient cache policy

Caching

  • Lighthouse considers a resource cacheable if all the following conditions are met:
    • The resource is a font, image, media file, script, or stylesheet.
    • The resource has a 200, 203, or 206 HTTP status code.
    • The resource doesn’t have an explicit no-cache policy.
  • Chrome serves the most requested resources from the memory cache, which is very fast, but is cleared when the browser is closed.
  • AWS S3 static file caching
# Bucket > Select objects > Action > Edit metadata > Add metadata
System defined Cache-Control max-age=31536000

Place JavaScript and CSS in External Files

  • If your JavaScript and CSS are directly in your HTML document, they are downloaded every time an HTML document is requested.
  • This, then, doesn’t take advantage of browser caching and increases the size of the HTML document.

Compress JS and CSS

Use HTTP/2 over HTTP/1.1

Eliminate render-blocking resources

  • Lighthouse flags two types of render-blocking URLs:
    • Stylesheets (By default, CSS is treated as a render blocking resource)
    • Scripts (By default all JavaScript is parser blocking.)
# A <script> tag is render-blocking if:
  * Is in the <head> of the document.
  * Does not have a `defer` attribute.
  * Does not have an `async` attribute

# A <link rel="stylesheet"> tag is render-blocking if:
  * Does not have a disabled attribute. 
    * When this attribute is present, the browser does not download the stylesheet.
  * Does not have a media attribute that matches the users device specifically. 
    * media="all" is considered render-blocking

Remove unsued CSS and JS

  • Remove all the JS and CSS that are not used for initial load
  • JavaScript can also block DOM construction and delay when the page is rendered.
    • Make your JavaScript async and eliminate any unnecessary JS
  • Find Unused JavaScript And CSS With The Coverage Tab
    • Press: ctrl + shift + p
    • Type: coverage

Use defer and async for JS

Reference

Other way to improve page load time

Reference