Magento 2 speed optimization

Magento 2 speed optimization, Magento’s low performance is the lack of server/hosting resources.
The hosting solution that powers the Magento store is the key to the success of the Magento store.
Magento speed also affected third-party modules and theme customization.
As a normal Magento page, it takes more than 3s to load a page
There are many different ways that you can perform a Magento 2 speed optimization.
Here are the best practices.
Please keep your eyes on this post

before starting the process, check the current speed of the store using
WebPageTest
GTMetrix
Google PageSpeed Insights

in order to compare the results.

Step 1. Magento Updates

Use the latest Magento version and check PHPINFO below values

memory_limit 2048M 
max_execution_time 18000 
post_max_size 4096M
max_file_uploads 2000
max_input_time 1000
max_input_vars 1000

Step 2. Caching

Enable Cache:-In the backend, System > Cache Management.

Step 3. Enable Flat Categories and Products

Go to backend, Stores > Configuration > Catalog > Catalog > Storefront, choose Yes in Use Flat Catalog Category field.

Step 4. Image Optimization

You can use JPEG format for Product images, and PNG or SVG for the layout as well as the logo.

And add height and width on the image tag.

Step 5. Defer Loading of JavaScript

Deferring parsing of JS might greatly improve start render time
Example : <script defer> your code </script>

Step 6. Enable HTTP/2

You contact your server administrator to make sure HTTP/2 is enabled.
HTTP/2 is a majorly updated version of the HTTP network that is used on the web

Step 7. Use lazy loading to images

This is really useful for increasing mobile page speed because the site only has to worry about loading photos that the user could see, while the rest of the images stay.
Add attribute(loading=”lazy”) on the img tag.
Example: <img src=”URL” loading=”lazy”>

Step 8. Leverage Browser Caching

A browser can cache files for faster access.
You can take advantage of this to lower the start render time. The configuration depends on your server

Step 9. GZIP Compression

Compress your HTML page so that a browser has fewer kilobytes to download. Enable gzip compression on the server-side

Step 10. Merge CSS and JS Files

Javascript File:-
Go to backend, Stores -> Configuration > Advanced > Developer > JavaScript Settings
Set Merge JavaScript Files to Yes
Set Minify JavaScript Files to Yes

CSS File:-
Go to backend, Stores > Configuration > Advanced > Developer > CSS Settings
Set Merge CSS Files to Yes
Set Minify CSS Files to Yes

Remove unused CSS and JS files from particular page.

<head>

<remove src=“name.css”/>

<remove src=“css/name.css”/>

<remove src=“js/name.js”/>

<remove src=“Vendor_Module::js/name.js”/>

</head>

Step 11. Switch to Production Mode

To find out what mode you are running issue this ssh terminal command:

php bin/Magento deploy:mode:show
To switch to production mode run:
php bin/Magento deploy:mode:set production

Step 12. Reduce Server Response Time

Try switching to one of those Magento optimized hosting companies. Nexcess, Magemojo, Lexicon etc.
your site’s response time is quite good with approximately 0.5s.

Step 13. Custom module Audit

To help you with time to the first-byte optimization Magento 2 has a built-in feature called profiler.
You can enable it by adding the following line at the top of index.php:

$_SERVER['MAGE_PROFILER'] = 'HTML';

Profiler outputs a trace with code blocks and time spent running them. You can find a trace at the bottom of a frontend page:

Step 14. Use Content Delivery Network

Set up CDN for Magento 2 stores. Go to the backend,
Stores -> Configuration > General > Web > Base URLs (Secure)