For page to be downloaded and processed faster we need to:

  • Minimize bytes (smaller code takes less time to dowload),
  • Reduce critical resources (minimize use of render-blocking CSS and parser-blocking JS files)
  • Shorten CRP (Critical Rendering Path) length.

Page rendering path: https://developers.google.com/web/fundamentals/performance/critical-rendering-path

  • Begin DOM construction by parsing HTML,
  • Request CSS+JS resources,
  • Parse CSS and construct CSSOM
  • Execute JS (these are render-blocking JS files)
  • Merge DOM + CSSOM into the Render Tree,
  • Run layout on the render tree to compute geometry of each node and
  • Paint the individual nodes to the screen

Place Any Non-CSSOM Querying JavaScript Before CSS; Place Any CSSOM-Querying JavaScript After CSS!!!

All non-essential scripts that are not critical to constructing the visible content for the initial render should be deferred.

WHY SO? If the files do not depend on one another, then you should place your blocking scripts above your blocking styles—there’s no point delaying the JavaScript execution with CSS upon which the JavaScript doesn’t actually depend.

Broadly speaking, this is why CSS is so key to performance:

  1. A browser can’t render a page until it has built the Render Tree;
  2. the Render Tree is the combined result of the DOM and the CSSOM;
  3. the DOM is HTML plus any blocking JavaScript that needs to act upon it;
  4. the CSSOM is all CSS rules applied against the DOM;
  5. it’s easy to make JavaScript non-blocking with async and defer attributes;
  6. making CSS asynchronous is much more difficult;
  7. so a good rule of thumb to remember is that your page will only render as quickly as your slowest stylesheet.

HTTP/2 has made obsolete:

  • Domain sharding
  • concatenation
  • image sprinting

RESOURCES:

  • https://web.dev/fast/#prioritize-resources
  • https://developers.google.com/web/fundamentals/performance/critical-rendering-path
  • https://csswizardry.com/2018/11/css-and-network-performance/

While open Google DevConsole click CTRL+SHIFT+P and search for:

  • Coverage (to see what portion of external resources is actually used and to see which part)
  • Lighthouse (to generate report on performance).

Further optimize Bootstrap4 resources (remove CSS and JS which is not needed)

Use imagemin webp package to convert all images to webp format. https://web.dev/serve-images-webp/

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Use critical tool to detect the critical assets which should be preloaded.  https://github.com/addyosmani/critical/blob/master/README.md

Use https://gtmetrix.com/ plugin to test web page speed.

Create our plugin which would work as: https://perfmatters.io/features/