Performance optimization magento 2

For an e-commerce website, the speed factor is very important to help buyers feel comfortable and thereby easily make a buying decision.

Today I will show you some ways to make your website faster.

I will divide it into 2 basic and advanced parts, let's start with the basic part first.

1. Cache

Enable all of the available caches from the admin panel System –> Cache Management.

Basically, caching means pre-storing copies of your web pages. So when users access your web site they can view those pre-stored copies instead of going through the process of creating the pages all over again.

Caching is a great way to improve site performance. If you use the right caching tools and implement them correctly, you will see a significant rise in web page loading speed.

 

2. Merge and Minify(CSS, JS)

 

CSS and JS make your site look better, but it is one of the reasons why your site is slower.

In Magento 2, You can Merge and Minify Css and Js files using admin configuration.

For Merge and Minify Js files, navigate to

Magento Admin -> Stores -> Configuration ->Advanced -> Developer -> Javascript Settings->Enable Merge javascript, Enable Minify javascript.

For merging and minifying CSS, navigate to
Magento Admin -> Stores -> Configuration ->ADVANCED -> Developer -> CSS Settings->Enable Merge CSS, Enable Minify CSS.

3. Optimize Images

 

You can find some unusually large images on your site through site scoring sites like GTmetrix and reduce the image size to the lowest possible level, which will improve your page loading speed.

4. Content Delivery Network (CDN)

 

CDN helps reduce the load on the web servers, by serving the static content like images, CSS files or JavaScript files through a network of servers, which may be closely located to your customer’s geographic locations.

 

Magento 2 provides support for CDN support, media and static content can be loaded from separate subdomains located on different servers of CDN networks.

To configure CDN, navigate to

Magento Admin -> Stores -> Configuration -> GENERAL -> Web -> Base URLs (Secure)
We can insert our CDN URL here and improve the store speed.

There is a quicker way to help you configure some functions mini, merge CSS, js file, change to production mode..etc
You try run 8 commands below to optimize speed

php -dmemory_limit=-1 bin/magento deploy:mode:set production --skip-compilation
php bin/magento config:set dev/css/minify_files 1
php bin/magento config:set dev/css/merge_css_files 1
php bin/magento config:set dev/js/minify_files 1
php bin/magento config:set dev/js/merge_files 0
php bin/magento config:set dev/js/enable_js_bundling 1
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Now, we come to the advanced part.

Coding Standards

1. Reduce Unwanted Looping


The unwanted looping in the coding logic will increase the loading time of the page. Removal of unwanted looping and server requests will reduce the page speed and loading time.

 

2. Reduce DOM Elements

 

A high number of DOM elements make the page more complex and increases the size. Consequently, the increase in download time and slower access to JavaScript makes the web page load slower. Investigate the options to reduce the number of DOM elements. There are free tools available like DOM Monster to analyze your page and provide suggestions for improvement.

 

3. Remove Commented Lines

 

We have to remove all the commented lines from the files. Removal of unwanted commented lines will reduce the loading time of the page.

4. Remove Inline JS and CSS

 

Always place CSS calls at the top and Java Scripts at the bottom. It helps to increase the progressive rendering in many browsers, thus increasing load speed of the web page.

5. Enable Production Mode

 

Switching to production mode improves store responsiveness and prevents long initial page load times that can occur in default mode.
Run the following terminal command to switch to production mode:

bin/magento deploy:mode:set production

Tweak .htaccess

The default .htaccess file included with Magento includes several sections discussing performance. Comment out the following sections and enable them to apply for their benefits.

1. Disable ETags

 

ETages allow browsers to validate cached page components from visit to visit. While useful, they can hamper websites hosted on server clusters in some cases. Disabling them as follows will often improve performance:

############################################
## If running in cluster environment, uncomment this
## http://developer.yahoo.com/performance/rules.html#etags

FileETag none

 

2. Enable Expires headers

 

Attention: The following will not function on LiteSpeed servers.

Browsers use Expires headers to define the lifespan of cached page components. While all page components should include Expires headers, static components and images should use far-future expires headers.

To activate this feature, uncomment the appropriate line and, directly above it, add ExpiresActive On. For example:

############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires

ExpiresActive On
ExpiresDefault "access plus 1 year"

 

3. Enable compression

You will need to add the following lines to your .htaccess file:

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


After you've saved your .htaccess file, test your site again in GTmetrix to make sure it has been properly compressed.

4. Static content

 

This will activate the Apache mod_deflate module and compress static resources into smaller files before transfer to the browser. To enable, uncomment the appropriate lines as shown below:

############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip

# Insert filter on all content
SetOutputFilter DEFLATE
# Insert filter on selected content types only
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary

 

5. Dynamic content

 

If, however, your site relies on dynamically generated content, instead create a file called .user.ini in your site's document root folder with the following contents:

zlib.output_compression = on
If you are a Nexcess client, we can make this the default setting for your account upon request.

 

If you have done the things I have mentioned above, surely the loading speed of your website will be significantly improved, see you in the next article.