grownwithus

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
  • Enable Merge Javascript Files and Merge CSS Files to decrease the number of HTTP requests
  • 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

  • Defer parsing of Javascript
  • Avoid AlphaImageLoader filter
  • Avoid URL redirects
  • Make Javascript & CSS external
  • Avoid CSS expressions
  • Reduce the number of DOM elements
  • Leverage browser caching
  • Delete duplicate Javascript & CSS
  • Minify Javascript & CSS
  • 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
  • Put Javascript at bottom
  • 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:


Speed Up Your Magento 2.0 Frontend


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”.

Speed Up Your Magento 2.0 Site From the Admin Panel

How to minify and merge JS in the admin panel of Magento 2.0

Navigate to Stores => Configuration => Advanced => Developer and find the “JavaScript Settings” section. Click to expand it and select “Yes” to Merge JavaScript Files and Minify JavaScript Files. Press “Save”.

Speed Up Your Magento 2.0 Site From the Admin Panel


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”.


Speed Up Your Magento 2.0 Frontend


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.


Viewed 372 Times

Post On 2018-10-16