4

In google page-speed test it shows best opportunity to speed up is eliminate blocking resource. So is there anyone who can guide me to do this?

2 Answers 2

0

You can try this:

Merge js files.

Minify js files.

Enable Javascript bundling.

Merge CSS files.

Minify CSS files.

Optimise CSS delivery by enabling LoadCSS js library.

Minify the critical CSS.

Move JS to the bottom.

Review above-the-fold (AF) content. Do you see any parts that are rendered by javascript? Get that javascript placed in head section so that your AF is not distorted initially.

Identify critical CSS - ie. CSS that is needed to render AF content. Place critical CSS in head section.

Place all the other CSS at bottom of a page.

0

You can try the following points:

1. Minify JavaScript

Minification can help reduce JavaScript file sizes by removing comments, white spaces, and redundant code, and in some cases, also makes the code more efficient by using shorter variable and function names.

Technically Magento2 Backend setting:

  • If your store is in developer Mode
  • Go to Stores > Configuration > Advanced > Developer > Javascript settings
  • Set minify javascript files yes
  • Cache clean and cache flush Javascript_setting

2. Use the defer and async attributes

Instead of the < head > section, place the < script > tags just before the closing < /body > tag to remove them from the critical rendering path.

Async – You should use async if your script contains the following conditions:

  • The DOM you need is already present (or the script doesn’t need the DOM)
  • The script doesn’t depend on other scripts.

< script async src=”test.js” > < /script >

Defer – Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

< script defer src=”test.js” > < /script >

3 Use Advanced JavaScript Bundling

Bundling JavaScript modules for better performance is about reducing two things

  • The number of server requests.
  • The size of those server requests.

This is the inbuilt feature of Magento 2, enabling this setting from the Magento backend.

Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings > Enable JavaScript Bundling.

Test cases :

i) Backend > store > Configuration > Advanced > Developer > Javascript settings

  • Merge javascript file: No
  • Enable js bundling: Yes
  • Minify js files: No
  • Move js code to bottom: Yes

ii) From CLI

  • Set store mode as production
  • Run full deployment
  • Clear all cache and set all permissions

After Bundle –

i) Looks like most of the js code is missing in the newly created bundle js files

ii) Along with newly created bundle js files. All js files present in the request queue

iii) Observed that the Merge JavaScript Files option automatically set as “Yes” but was not before.

4. How to eliminate render-blocking CSS

CSS files can include characters like space, indentation, and comments to make them simpler to read . Unused CSS block time and block resources.

5. Minify CSS

CSS files can include characters like space, indentation, and comments to make them simpler to read. All of these characters are superfluous for the browser, and by minifying these files, they will be deleted. At the end of the day, lowering the amount of blocking CSS will always improve the time it takes to fully render the page’s core content (LCP).

To improve: Remove any unneeded CSS from your site or relocate it to a different stylesheet if it’s needed on a different page.

Use loadCSS to load files asynchronously for any CSS that isn’t required for initial rendering, leveraging rel=”preload” and onload.

Example, < link rel=”preload” as=”style” href=”https://static.sooqr.com/custom/117844/1/combined.css” >

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.