Gzip compression. Reduce the overall size of your web page by gzip compressing all JavaScript, CSS, and HTML files. A smaller page equals less time to download. All major browsers can work with gzip compression, and Nginx, Apache, and all major web servers have this capability built in. Be mindful of your processing power and the compression level you are targeting. Higher compression levels will require more processing power, so make sure you can complete compression without delaying other server requests.

Cache lifetime. When a customer loads your website and views multiple pages, they should not be required to download common elements reused for each page (images, javascript, and other files). Every resource on your website should specify whether it can be saved in cache, by whom, and for how long. If you know a resource does not change often, allowing it to be cached for up to a year might be appropriate. Every time a visitor’s browser avoids making a request across the internet for data or files, it frees up bandwidth on your servers and creates a better experience for the visitor.

Content Delivery Network (CDN). A CDN is a network of servers located in different locations around the world. No matter where your website visitors come from, they will always be able to download images and other resources from a server near them. This can have a dramatic impact on reducing the amount of time it takes for visitors to download your web page. There is usually an extra cost associated with adding a CDN to your hosting, but once configured it will pull the resources from your main web server as needed. It is typically seamless for a good development team. Magento has built-in capabilities to support a CDN for all javascript, css, and image files.

Automated Image Optimization. Several services exist that automatically apply several types of optimizations for all of your website’s images. Services such as Fastly Image Optimization or Cloudinary. Many of these optimizations, like removing unnecessary metadata, are easily done by hand. But on an ecommerce website with thousands of images it can be difficult to ensure that every image was properly optimized before it was uploaded to the server. Other optimizations are impossible to do manually but make a big difference, such as detecting whether a visitor’s browser accepts webp format, and if so automatically converting your images to webp. This type of service also makes it much easier to create multiple sizes and crops of your images to add art direction via tags and provide multiple size options via srcset.

HTML Caching. Magento 2 natively supports Varnish out of the box, and makes full page caching available to everyone. Caching the HTML of the high-traffic pages of your website on a CDN running Varnish has the potential to massively improve your page speed. It means that when visitor A visits a web page, the entire Magento code stack is engaged to build the page. But then all that work is saved, and stored in a CDN for the next visitor. This means visitor B doesn’t even have to connect to your original Magento server, saving processing and download time, and decreasing load on your Magento server (so it can focus on other tasks). And by using targeted Ajax updates, you don’t have to sacrifice custom sections of the page.

2. Delay Loading Third-Party Tools

And as an added benefit, a tag manager enables you to reuse settings between these 3rd party scripts, making it easier to add new ones in the future. And centralizing 3rd party tools can be helpful when making changes for GDPR and other privacy regulations.

3. Optimize the Size of JS Bundles

It is important that if you are going to use this feature that you carefully consider a couple questions:

Are there files which should not be downloaded on the first page of the website? All of the bundles will be downloaded on the first page view your visitor makes to the website. That means subsequent page views will be faster because there is no additional javascript to download, but if you have an extra large javascript file which is only needed in some parts of the website many visitors will never go to, then that file should probably be excluded from the bundles.

Do you have a javascript file which does not compress well with gzip? Typically a 1 Mb javascript bundle will compress down to less than 300 kb. However, if a file that does not compress well is included in the original 1 Mb bundle, then you will have one bundle file that is a bottleneck. This is especially damaging to page speed because the javascript has to be all downloaded and executed before the browser can move forward with other page rendering tasks.

This issue will be different from website to website, so you will want to start by working with your developer to check on JS bundle sizes.

The best way to serve scaled images to a user is with the element. This handy HTML5 tag communicates to the user agent which image resource is best, based on the screen pixel density, viewport size, and image format. You’ll need to create several variations of an image to effectively use this tag: high-definition and low-resolution. Once you do, users will benefit by receiving the best image file for their device. The desktop high-DPI display users will receive the correlating HD image, and mobile, non-HD device users will receive a more suitable image file.

Selecting the right file type to use for your images is another important step in the optimization process.

• For vector images use SVG
• For raster images, use JPG, PNG or WebP. WebP is capable of retaining visual quality while reducing image file size up to 34% compared to JPG and PNG. WebP is currently only supported in Chrome, Android, and mini Opera, so if you do use WebP be sure to include fallback JPG or PNG file versions for browsers and devices that are not WebP enabled.
• Avoid using GIF files. If any static GIF files exist on your site, convert these to WebP or PNG files. For animations, use the video element rather than a GIF file.