PageSpeed - How to reduce Reduce initial server response time and Eliminate render-blocking to increase page speed

Question

In gtmetrix, I am facing high initial server response time and render-blocking resources.

Answer 1

These are really two questions, so I'll address them separately.

Reduce initial server response time

Initial server response time is influenced by many things:

• Server-side PHP code: Lots of things can influence this, especially inefficient database calls like loading entities in a loop (as opposed to loading the data in a batch using resource collections), or waiting for outside API calls to return. I recommend installing an APM service like NewRelic on a separate development environment to troubleshoot if there are any bottlenecks.
• Default caching: Make sure that you are using as much caching as feasible. This includes using Redis for the default cache
• Full page caching: The best-case scenario is when PHP doesn't need to be used at all to serve a page. The best is to use Varnish, Fastly, or some other edge cache that integrates well with Magento 2. You may also wish to look into various cache warmer extensions from third-party vendors, to ensure that your highest traffic pages are pre-cached frequently.
• Server hardware: Performance problems may be able to be solved by just migrating to newer or bigger hardware. Magento 2 is a very CPU-hungry beast, and running on CPU-optimized instances usually yield the best performance for your money than general-purpose instances. If you can afford it, SSD storage is ideal.
• PHP tuning: Enabling PHP opcache and especially the new opcache.jit setting in PHP 8+ can yield some truly remarkable performance improvements if you aren't already using them. Note, opcache.jit does not play nicely with some extensions like NewRelic or IonCube Loader, and it can cause the site to break, so definitely test new settings on a separate development environment before implementing them on a production server.

Eliminate render-blocking resources

This is about client-side performance. You want to make sure that any dependencies that are needed to start rendering above-the-fold HTML to the browser are kept small.

• Compress and Minify Javascript and CSS: The best performance comes from creating Advanced Javascript Bundles, which in my experience, can reduce load times by 50%, but this can be painstaking to set up.
• Use an efficient theme: Lots of themes load way too much Javascript, adding dozens of RequireJS dependencies to do things that Magento's core libraries already provide. Even using Luma as a base theme is pretty heavy. Many modern sites are choosing the Hyva theme or going completely headless for this reason.
• Avoid Jquery UI Compat mode like the plague: It's a very heavy library, and you should only load exactly what you need, not the whole thing.
• Use smaller, less visually complex images: Vector graphics like SVG can be rendered on any screen size and compress great. Large, full-page ads or videos look great on billboards, but they aren't a good fit for ecommerce.
• Tune product thumbnail sizes: Your theme's view.xml file contains the standard product image sizes that Magento 2 will create automatically. Make sure that these match the maximum size that your design can actually utilize. It makes no sense to download a 500px wide image and have the browser size it down if your CSS limits the image display area to 80px.
• Use a CDN: This is already pointed out by PageSpeed, but it impacts render blocking as well.
• Use efficient image formats: Image formats like WebP can save a lot of space, and some CDNs can provide this automatically. However, taking the time to run your high-res images through compression like Adobe Photoshop's Save for Web feature can also go a long ways towards making compression good by default. Even the inexpensive Photoshop Elements has this feature.
• Defer JS as much as possible: If you can, lazy-load expensive Javascript libraries like Google Recaptcha until they are absolutely needed, like the user focuses a form that uses it. Doing so does require some coding experience, but it can save significant load time. The following sample code is from https://dev.to/uf4no/improve-page-performance-lazy-loading-recaptcha-442o, to illustrate this technique.

  <script>
  
   function sendForm() {
     document.getElementById('contactForm').submit();
   }
  
   // Function that loads recaptcha on form input focus
   function reCaptchaOnFocus() {
     var head = document.getElementsByTagName('head')[0]
     var script = document.createElement('script')
     script.type = 'text/javascript';
     script.src = 'https://www.google.com/recaptcha/api.js'
     head.appendChild(script);
  
     // remove focus to avoid js error:
     document.getElementById('subName').removeEventListener('focus', reCaptchaOnFocus)
     document.getElementById('subEmail').removeEventListener('focus', reCaptchaOnFocus)
   };
   // add initial event listener to the form inputs
   document.getElementById('subName').addEventListener('focus', reCaptchaOnFocus, false);
   document.getElementById('subEmail').addEventListener('focus', reCaptchaOnFocus, false);
  
  </script>
  

Answer 2

Time to first byte optimization:

1. Use a PHP profiler to find code bottlenecks. In many cases it's a 3rd-party extension or a poorly written theme file. My personal choice - tideways profiler, it's free the first 14 days or so, it should be enough for an initial audit.
2. Use Varnish as a Full Page Caching Application (recommended by Adobe).
3. Do a 3rd-party extensions audit. Turn them off one by one and see if it affects server response time.

Eliminate render-blocking resources:

1. Move all JavaScript to the bottom. I believe the latest Magento 2.4.6 already does that. If not - find an extension.
2. Remove unused CSS and JS from all pages. Google Chrome Coverage tab will help, it shows what's being used and what's not. See a screenshot of this site and that 90%+ of stacks.css isn't being used.
3. Identify critical and non-critical CSS. Critical CSS is what it takes to render above-the-fold content. Inline critical CSS and move everything else to the bottom.

Always test, test, test. Do a cross-browser testing to make sure your layout is OK with all the changes. Good luck!