3

We migrated a website from Drupal to Magento. After the migration the website's Google Pagespeed scores are much lower.

With WordPress I can easily get to scores 99 for mobile and 100 for desktop. It's a bit harder with Drupal. I was hoping that the Magento community had figured this out like WordPress (after all, faster pages means more sales). Now I'm pretty new to Magento myself, so I'm wondering, maybe the shop that handled the migration missed something important? Or is it generally hard to optimize Magento?

enter image description here

Plus the actual experience of opening a product page is sub-optimal: it takes about 7 seconds before the most important image is showing.

What are some things we can do to speed up our website? That will help us get a better Pagespeed score. After all, it's all about the Google SERPs.

enter image description here

  • Defer offscreen images
  • Serve images in next-gen formats
  • Properly size images
  • Eliminate render-blocking resources
  • Minify JavaScript
  • Defer unused CSS

Diagnostics More information about the performance of your application.

  1. Ensure text remains visible during webfont load
  2. Minimize main-thread work 11.6 s
  3. Reduce JavaScript execution time 7.4 s
  4. Avoid an excessive DOM size 1,524 nodes
  5. Serve static assets with an efficient cache policy 12 resources found
  6. Avoid enormous network payloads Total size was 2,843 KB
  7. Minimize Critical Requests Depth
0

I've done three main things which drastically improved my performance; although, it is still far from good enough on mobile device (page speed around 60 on four different pages).

  1. Secure enough server resources : some ideas on how to check if your server is short on resources, for unix-server
  2. Implement server side optimization such as pagespeed module
  3. Turn on the built-in features of Magento to optimize performance such as minify, cache.

In addition, some may forget to move Magento from development to production mode. This will make Magento very slow.

bin/magento deploy:mode:set production
0

Images appear to be your biggest issue. Lazy loading images are always a good practice especially if you have hundreds of product images on a single page. There are some good plugins out there free and paid like:

https://www.weltpixel.com/magento-2-lazy-load-product-extension.html https://marketplace.magento.com/bsscommerce-bss-lazyimageloader.html

Another tool that you can implement is an image CDN, which can help solve

  • Serve images in next-gen formats
  • Properly size images

Using a tool like ImageEngine is very easy to implement: https://www.scientiamobile.com/how-to-add-image-optimization-to-magento-2/

ImageEngine will dynamically resize your source images to the end users screen size, apply compression based on the devices DPI (Higher resolution devices can be compressed at higher rates without impacting quality) and of course it will dynamically convert images to WebP or JPEG-2000 depending on the end users device.

Another thing you can do is if you are using Google fonts is implement this script, https://googlefonts.3perf.com.

The generated code snippet:

  • downloads the Google Fonts stylesheet asynchronously,
  • patches it to insert the font-display declaration,
  • and inserts that stylesheet into the document.

When the site first loads you can get a bit of a flicker with the script updating the font, so you can weigh the pros and cons of using this script.

I hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.