In gtmetrix, I am facing high initial server response time and render-blocking resources.
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.jitsetting in PHP 8+ can yield some truly remarkable performance improvements if you aren't already using them. Note,
opcache.jitdoes 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.
- 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
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.
Time to first byte optimization:
- 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.
- Use Varnish as a Full Page Caching Application (recommended by Adobe).
- Do a 3rd-party extensions audit. Turn them off one by one and see if it affects server response time.
Eliminate render-blocking resources:
- 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.
- 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!