Running my web stores on Magento feels like the right thing to do when compared to other e-commerce CMS currently available. I have been working with Magento since version 1 and since then I have been mesmerized by how powerful this platform is and still is. The upgrade to 2 was a bit confusing for many but still kept its force and shape. When I decided to run my own e-commerce business I had no doubt that Magento will be the platform I trust.
Nothing is perfect and nor is Magento with all its tools especially due to the external demands when it comes to marketing. Google page speed will not give your Magento store a high score but there are things to change to give Google what he requires in order to index it better.
The market is filled with Magento themes ready to purchase and although I am a Magento developer I do prefer to work with themes already built merely due to the updates. For my store, I have used Dukamarket Multipurpose Magento theme and for desktop optimisation I did the following:
Modify htaccess
The htaccess can be found at the root of your Magento installation, add the following lines in your htaccess at the bottom:
<IfModule php7_module>
php_flag display_errors Off
php_value max_execution_time 3600
php_value max_input_time 600
php_value max_input_vars 200000
php_value memory_limit 2048M
php_value post_max_size 256M
php_value session.gc_maxlifetime 1440
php_value session.save_path "/var/cpanel/php/sessions/ea-php73"
php_value upload_max_filesize 256M
php_flag zlib.output_compression Off
</IfModule>
<IfModule lsapi_module>
php_flag display_errors Off
php_value max_execution_time 3600
php_value max_input_time 600
php_value max_input_vars 200000
php_value memory_limit 2048M
php_value post_max_size 256M
php_value session.gc_maxlifetime 1440
php_value session.save_path "/var/cpanel/php/sessions/ea-php73"
php_value upload_max_filesize 256M
php_flag zlib.output_compression Off
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/webm "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
# Others
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
The added lines will increase the speed and performance of your Magento store by sending info for the PHP settings and also by enabling Gzip compression. Gzip helps in compressing web pages and stylesheets before sending them to the user. Therefore, it will help to load the website faster.
Replace images to webp
Webp is an image format developed by Google and it makes sense that Google will request to use this type of format but Magento 2 doesn’t support uploading this type of format from the admin panel. Although it will load faster webp images will keep their same or higher quality as it supports both lossy and lossless compression.
The great news is that there are ways to convert all the images from your already running Magento store from jpg, png, and gif to webp. There are a lot of paid modules that can help you achieve this but I have used: yireo/Yireo_Webp2 which is open source.
You can easily install it by running:
composer require yireo/magento2-webp2
bin/magento module:enable Yireo_Webp2 Yireo_NextGenImages
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento c:f
The images I have used as background didn’t change the formats from jpg to webp though. but all other images I have added including from the category or product page all changes and now I can see the difference in the speed.
Minify html, js and css
Javascript settings:
Go to Stores > Configuration > Advanced > Developer > Javascript Settings.
Set Merge JavaScript Files option to Yes
Set Enable JavaScript Bundling option to No
Set Minify JavaScript Files to Yes
Set Move JS code to the bottom of the page to Yes
CSS Settings:
Go to Stores > Configuration > Advanced > Developer > CSS Settings.
Set Merge CSS Files option to Yes
Set Minify CSS Files to Yes
To minify HTML:
Go to Stores > Configuration > Advanced > Developer > Template Settings.
Set Minify HTML option to Yes.
Flush Cache at System > Cache Management page.
The minify will not work unless the Magento store is in production mode.
To test your Magento mode:
bin/magento deploy:mode:show
To change it to production mode:
bin/magento deploy:mode:set production
To change it to developer mode:
bin/magento deploy:mode:set developer
Note: after you switch your Magento store to production the Stores > Configuration > Advanced > Developer will not be available anymore.
Disable default Magento 2 modules
Add the following code to your composer.json below require {…}:
"replace": {
"amzn/amazon-pay-and-login-magento-2-module": "*",
"amzn/amazon-pay-and-login-with-amazon-core-module": "*",
"amzn/amazon-pay-module": "*",
"amzn/amazon-pay-sdk-php": "*",
"amzn/login-with-amazon-module": "*",
"magento/module-braintree": "*",
"magento/module-braintree-graph-ql": "*",
"braintree/braintree_php": "*",
"braintree/braintree": "*",
"dotmailer/dotmailer-magento2-extension": "*",
"dotmailer/dotmailer-magento2-extension-package": "*",
"dotmailer/dotmailer-magento2-extension-enterprise": "*",
"dotmailer/dotmailer-magento2-extension-enterprise-package": "*",
"dotmailer/dotmailer-magento2-extension-chat": "*",
"dotmailer/dotmailer-magento2-extension-b2b": "*",
"dotmailer/dotmailer-magento2-extension-sms": "*",
"klarna/m2-payments": "*",
"klarna/module-core": "*",
"klarna/module-kp": "*",
"klarna/module-kp-graph-ql": "*",
"klarna/module-ordermanagement": "*",
"klarna/module-onsitemessaging": "*",
"paypal/module-braintree": "*",
"paypal/module-braintree-core": "*",
"paypal/module-braintree-graph-ql": "*",
"temando/module-shipping": "*",
"temando/module-shipping-m2": "*",
"temando/module-shipping-remover": "*",
"vertex/product-magento-module": "*",
"vertex/module-tax": "*",
"vertex/sdk": "*",
"vertexinc/module-tax-staging": "*",
"vertexinc/product-magento-module": "*",
"vertexinc/product-magento-module-commerce": "*",
"vertex/module-address-validation": "*",
"vertex/module-tax-staging": "*",
"yotpo/magento2-module-yotpo-reviews": "*",
"yotpo/magento2-module-yotpo-reviews-bundle": "*"
},
Remove from the list above the modules that you are actually using.
Conclusion
Although I have managed to grow my pagespeed score from 35 to 97 on desktop view on mobile the maximum reach is 39. The settings above comply with Magento version 2.4. I haven’t seen much difference for mobile for which the best decision is to use Google AMP. Follow up for future articles for Google AMP and Magento 2.
We’re a team of creatives who are excited about unique ideas and help fin-tech companies to create amazing identity by crafting top-notch UI/UX.
