THE ECOMMERCE HANDBOOK
How to IncreaseYour Page Speed on Magento
A Guide for Developers and Designers
Tony is Corra’s SEO Manager – he helps launch search-friendly enterprise ecommerce sites with the might of his SEO team and fantastic developers. He loves helping clients prepare their businesses for what’s coming next from our search-bot overlords – which currently includes page-speed and mobile-first indexation.
Duane is a Magento 2 Certified Professional Developer who has been consulting with online merchants for 10 years – helping bend Magento to their will. That often means conjuring solutions to the age-old question of, "How do I make my site faster?"
Jax is an expert code sleuth, multi-level web artisan, and full-blown technical SEO geek with more than 15 years experience. She specializes in finding opportunities to make enterprise-level ecommerce sites mobile-search friendly and fast loading.
August 09, 2018 | By: Tony Castillo, Duane Day, Jacqueline Harvey
Improving your Magento website’s page speed - has it been on your list of technology updates since last year? If you put this task on hold due to its complexity or difficulty knowing where to start, then it's time to revisit the work and start to make progress with this new guide from Corra, Magento’s 2018 North American Commercial Partner of the Year. Our developers, designers, and strategists have spent the first half of 2018 finding solutions that move the needle - toward faster load times and higher converting visits - and we're pleased to share our results.
In January of 2018, Google issued an announcement saying, “Page speed will be a ranking factor for mobile searches beginning July 2018.” Rarely does Google give such a clear indication on items that influence search rank, so we took this seriously. We started building a process that helps Magento websites operate as your customers expect them to be: lightweight and free of unnecessary roadblocks in their user experience.
Page speed will be a ranking factor for mobile searches beginning July 2018.
Google Webmaster Central Blog
1. Server Optimizations
Every Ecommerce website can benefit from a review of server-level configurations. The following are a list the important settings we know make a big impact on Magento’s page speed performance.
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
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 ToolsEvery ecommerce website is a circus of third-party scripts that all try to load before other elements on the page. Images and third-party scripts are the top two contributors of bloat on most ecommerce sites. Website owners can reap big wins with page speed by analyzing the scripts that load and reduce them if necessary. How many scripts are too many? If you’re running more than 10 scripts for your site, that’s a problem. Each script adds a little bit of time to your page render time, and little-by-little can start to make a big difference. The leanest scripting tracking websites have no more than three, and these are not small businesses with no concern for marketing. McDonald’s, GE Appliance, and Volvo Cars all conduct their tracking and measurement with no more than three scripts loading.
Start by installing a browser extension like Ghostery which will show you all the 3rd party scripts on your website. Visit your homepage and see if there are old tracking scripts that were installed in the past but are not used any longer. If so, remove them from the site completely. Then visit other pages of your website, and complete a checkout and verify that every script you see is still being used AND that it's not appearing on pages where it’s not needed.
Then look at the list of essential scripts. Can these be migrated into a tag management system like Google Tag Manager? If so, move them. Using a tag manager not only enables you to more easily disable unused modules in the future, it makes it easier to delay those scripts from loading until after everything else on your page has rendered. This minimizes their impact on page speed and customer experience.
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.
It is important that if you are going to use this feature that you carefully consider a couple questions:
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.
1. Strive for a Light-Weight Mega Menu
- Use images in mega menus sparingly
- Streamline menu options and reduce link hierarchy to just the essentials
- Keep menu content visible above the fold when expanded
- Use asynchronous loading
- Minify the code that builds the menu
2. Limit Font RequestsFonts are loaded prior to visible page elements loading, which means too many font requests can slow down page speed and degrade mobile user experience. Corra’s practice of using fonts effectively on a website include:
- Limit font server requests to 3 or less
- Have Gzip compression enabled for font resources as relevant
- Implement a relative font size scale, no absolute font sizes, and make sure it’s mobile-friendly by using a base size of 16 CSS pixels and a base line height of 1.2 em
- Use fonts that are web-safe across all devices
3. Optimize ImagesWhen a device requests an image for your website from the server, the image delivered should be no bigger than what is needed for the device. For example, if your user is requesting your web page from their Apple iPhone 6, then the appropriate image width is 375px based on their viewport size. Unoptimized websites deliver load intensive images to its users, often several times too large for the device. An image optimizer can help size image files to a user’s device. Fastly is a content delivery network (CDN) with several image optimization methods to accomplish this task for Magento.
The best way to serve scaled images to a user is with the . 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.
Reach Out to Corra's Page Speed First Responders
The 6 components we just reviewed are part of the 26 that Corra uses to improve the performance of Magento websites.
If troubleshooting page speed feels out of reach for your Ecommerce team, reach out to Corra's Page Speed First Responders. A cross-functional team is required to make Magento websites hum - make sure you have the best roster of talent working on this with you.
Corra is the global digital agency that fashion, beauty, and lifestyle brands trust to create luxury commerce experiences. Over the past 15 years, we have built a reputation for award-winning design, disciplined execution, and innovative thinking.
With technical expertise concentrated on the Magento, SAP Commerce Cloud, and Shopify Plus platforms, we produce memorable journeys that captivate customers and elevate brands to new heights.