Speed Up Your Magento 2 Frontend
The sites can be really slow or at least not fast enough. Basically the first thing you can do is to check speed on different metrics and as a result you will get the list of recommendations about how to speed up your site. Not all of them require technical development skills, and can simply be done from the admin panel. In this post I will show you a few simple steps to speed up your Magento 2.0 site using admin panel.
MAGENTO WEBSITE PERFORMANCE ENHANCEMENT – QUICK CONFIGURATION
- Enable cron & log cleaning
- Enable Use Flat Catalog Category and Use Flat Calalog Product to decline database queries
- Turn on Magento’s built in caching
- Uninstall all extensions you don’t really need
- Utilize canonical link Meta tag for categories and products
- Don’t use category paths for product URLs
- Remove .html in category URL suffix
- Restrict the number of products on category page
MAGENTO WEBSITE PERFORMANCE ENHANCEMENT – APPLICATION LEVEL FIXES
- Avoid AlphaImageLoader filter
- Avoid URL redirects
- Avoid CSS expressions
- Reduce the number of DOM elements
- Leverage browser caching
- Compress components with gzip
- Put CSS at the top, in document head
- Combine images using CSS sprites
- Optimize images
- Optimize the order of styles & scripts
- Avoid bad requests
- Get rid of query strings from static resources
- Avoid CSS @import
- Specify a Vary: Accept-Encoding header
- Serve resources from a consistent URL
- Specify a cache validator
- Avoid a character set in the meta tag
- Make Ajax cacheable
- Prefer asynchronous resources
- Use a Content Delivery Network (CDN)
- Decrease DNS lookups
- Avoid HTTP 404 – Not Found error
- Enable gzip compression
- Make favicon small and cacheable
- Decrease size of cookie
MAGENTO WEBSITE PERFORMANCE ENHANCEMENT – CONFIGURATION LEVEL FIXES
- Optimize size of cookie
- Disable Magento log
- Clean up Magento database log
- Set unique name for products
MAGENTO WEBSITE PERFORMANCE ENHANCEMENT – SERVER LEVEL FIXES
- Use Varnish cache
- Use Redis
- Use a dedicated server
- Use the latest PHP version
- Use high-performance SSD drive
- Use RAM 2GB and up plus a dual core CPU
- Use separate web & database servers
For example, I checked a store on GTmetrix and got the following list of errors:
You can see that among other recommendations, GT Metrix to Minify CSS and Minify JS, Merge CSS and Merge JS and minify HTML.
What does minification mean? Code minification is the process of removing unnecessary characters from the code without changing its functionality. Minifying reduces the amount of code that needs to be transferred = it helps to increase the speed of your side. If you are already working with a development team, please ask them if such measures are necessary. Sometimes, if the JS code is not properly written, minifying can break it.
What is merging? Merging means multiple files with code will be united in one file. And all the requests will be sent to this file only, so merging will reduce the number of requests = speed up your site.
How to minify and merge CSS in the admin panel of Magento 2.0
Navigate to Stores => Configuration => Advanced => Developer and find the CSS Settings section. Click to expand it and select “Yes” for both Merge CSS Files and Minify CSS Files. Press “Save”.
How to minify and merge JS in the admin panel of Magento 2.0
How to minify HTML in Magento 2.0?
In order to Minify HTML, navigate to Stores => Configuration => Advanced => Developer. Click to expand the “Template Settings” section and select “Yes”.
Of course, such measures won’t significantly speed up your site and it won’t get, let’s say, twice faster, but it’s something that you can do without the assistance of a developer.