3. Slow server response times
- Optimize your server
- Route users to a nearby CDN
- Cache assets
- Serve HTML pages cache-first
- Establish third-party connections early
- Use signed exchanges
Optimize your server
Route users to a nearby CDN
- When placed in front of an application server, configure reverse proxies (Varnish, Nginx) to provide cached content or operate as a cache server.
- Configure and monitor the cache behavior of your cloud provider (Firebase, AWS, Azure).
- Use a content delivery network (CDN) with edge servers to cache and store your material closer to your users.
Serve HTML pages cache-first
Establish third-party connections early (To be written by the developer)
Use signed exchanges (SXGs)
Reduce CSS blocking time
- Minify CSS
- Defer non-critical CSS
- Inline critical CSS
a. Minify CSS
b. Defer non-critical CSS (To be checked by the developer)
c.Inline critical CSS
Critters is a webpack plugin that loads the remainder of the CSS after the important CSS has been inlined.
5. Slow resource load times
- elements using the <img> tag
- Within an <svg>element, <img> elements
- <video> elements (LCP is measured using the image on the poster )
- The url() method is used to load a background image for an element (as opposed to a CSS gradient)
- Text nodes or other inline-level text components in block-level components
- Image optimization and compression
- Important resources should be preloaded.
- Text files should be compressed.
- Depending on the network connection, deliver various assets (adaptive serving)
- Using a service worker, cache assets.
Optimize and compress images
- Instead of using a picture, think about not using one at all. Remove everything that isn’t related to the content.
- Images should be compressed (with Imagemin for example)
- Convert photos to a more modern format (JPEG 2000, JPEG XR, or WebP)
- Use photos that are mobile-friendly.
- Consider employing a content delivery network (CDN) for images.
Preload important resources (To be written by the developer)
Compress text files
- Check first to see whether your server compresses files automatically. Most hosting platforms, CDNs, and reverse proxy servers either compress assets by default or provide you the option to do so.
- If you need to change your server to compress files, use Brotli instead of gzip because it has superior compression ratios.
- Once you’ve decided on a compression strategy, compress assets ahead of time during the development process rather than when the browser requests them. This reduces server costs and latency while making requests, particularly when utilizing high compression ratios.
Adaptive serving (To be written by the developer)
Cache assets using a service worker
6. Client-side rendering
- Make use of client-side rendering.
- Make use of pre-rendering.
- Using as few polyfills as possible
Use server-side rendering
Some of our Magento 2 optimization Blogs
Follow More Articles
19 July 2021 | 8 min Read [...]
15 July 2021 | 5 mins read [...]
July 13, 2021 | 6 min read [...]
July 02, 2021 | 7 min read [...]
July 02, 2021 | 4 min read [...]
June 29, 2021 | 8 min read [...]
June 29, 2021 | 8 min read [...]
June 24, 2021 | 5 min read [...]
June 23, 2021 | 8 min read [...]
June 18, 2021 | 5 min read [...]
June 11, 2021 | 4 min read [...]