{"id":10725,"date":"2019-07-05T15:17:13","date_gmt":"2019-07-05T15:17:13","guid":{"rendered":"https:\/\/www.mageworx.com\/blog\/?p=10725"},"modified":"2022-05-16T14:24:21","modified_gmt":"2022-05-16T14:24:21","slug":"magento-2-speed-optimization-research-proves-default-functionality-is-enough","status":"publish","type":"post","link":"https:\/\/www.mageworx.com\/blog\/magento-2-speed-optimization-research-proves-default-functionality-is-enough","title":{"rendered":"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough"},"content":{"rendered":"\n<!-- SEO Ultimate (http:\/\/www.seodesignsolutions.com\/wordpress-seo\/) - Code Inserter module -->\n<!-- Google Tag Manager (noscript) -->\r\n<noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-5DTCW7B8\"\r\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\r\n<!-- End Google Tag Manager (noscript) -->\n<!-- \/SEO Ultimate -->\n\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 10<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>According to Statista, the number of mobile phone users in the world is expected to pass the<a href=\"https:\/\/www.statista.com\/statistics\/274774\/forecast-of-mobile-phone-users-worldwide\/\"> five billion mark<\/a> in 2019. With that regard, Google places the utmost importance on site loading speed on mobile devices. This parameter undoubtedly influences the search results ranking. Additionally, fast website load time increases conversion as sites get to avoid losing inpatient users.&nbsp;&nbsp;&nbsp;<br><\/p>\n\n\n\n<p>In the first part of this article, we will try to figure out and showcase whether it is possible to speed up Magento 2 page load time using standard means or not and, most importantly, define how effective these means are.<br><\/p>\n\n\n\n<p>In the second part, we will provide an insight into the effectiveness of 3rd party solutions and approaches.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing Environment<\/h2>\n\n\n\n<p>All the measurements will be made in <em>Chrome Audit <\/em>with \u2018For mobile device with simulation Fast 3G\u2019 limitation:<br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"635\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10729\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1.png 450w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-425x600.png 425w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-250x353.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-298x420.png 298w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/figure><\/div>\n\n\n\n<p>Magento 2.3.1 unfolded in the Docker container will be used in the <a href=\"https:\/\/www.mageworx.com\/magento2-product-reviews-and-ratings.html\" data-type=\"URL\" data-id=\"https:\/\/www.mageworx.com\/magento2-product-reviews-and-ratings.html\">review<\/a>. This will allow us to isolate resources.<br><\/p>\n\n\n\n<p> We will measure performance in the production mode with the fully enabled built-in cache.<br><\/p>\n\n\n\n<p>Testing will be carried out on three site pages: main, product and category ones. For each this page, we will run audit checks three times. An average test result will be selected.<br><\/p>\n\n\n\n<p>As we won\u2019t run load-testing \u2015 while pages load time on the client-side in a browser will be primarily covered in this article \u2015 MySQL and PHP versions will not be specified. Not the result in its absolute terms but the difference in performance between various configurations will be of primary interest for us.&nbsp;&nbsp;&nbsp;&nbsp; <\/p>\n\n\n\n<p><em>How is it possible to speed up page load time using standard Magento and server means?<\/em><\/p>\n\n\n\n<p>Above all, this can be achieved by reducing either the size of the sent data or the number of requests. Read on for more detailed insights.&nbsp;&nbsp; <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Chapter 1. Magento Setup and Server Configuration<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Gzip<\/h3>\n\n\n\n<p>As it can be seen from the table below, the first and most critical thing to do \u2015 you are right, it has no relevance to Magento setup \u2015 is to enable compression on the server. Data volume is the key factor that determines loading speed in slow mobile networks. With compression being enabled, a site gets <em>depicted <\/em>much faster. The inevitable drawback includes an increase in the <em>First CPU Idle <\/em>parameter as the result of unpacking on the server-side.&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br><\/p>\n\n\n\n<p>Without Gzip:<br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"801\" height=\"320\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10730\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs.png 801w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-600x240.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-768x307.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-250x100.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-696x278.png 696w\" sizes=\"auto, (max-width: 801px) 100vw, 801px\" \/><\/figure><\/div>\n\n\n\n<p>With Gzip enabled:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"799\" height=\"350\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssd.png\" alt=\"\" class=\"wp-image-10733\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssd.png 799w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssd-600x263.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssd-768x336.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssd-250x110.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssd-696x305.png 696w\" sizes=\"auto, (max-width: 799px) 100vw, 799px\" \/><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1309\" height=\"949\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1.jpg\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10743\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1.jpg 1309w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-600x435.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-1200x870.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-768x557.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-250x181.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-324x235.jpg 324w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-696x505.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-1068x774.jpg 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/1-579x420.jpg 579w\" sizes=\"auto, (max-width: 1309px) 100vw, 1309px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Minify Js and CSS<\/h3>\n\n\n\n<p>What if we try to reduce the size of the transmitted data even more? In the first place, let\u2019s enable Minify Js and Minify CSS. Then, make a comparison.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><\/p>\n\n\n\n<p>All the optimization-related configurations can be found in <strong>Stores -&gt; Configuration -&gt; Developer:<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1034\" height=\"698\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10745\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2.png 1034w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-600x405.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-768x518.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-250x169.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-696x470.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-622x420.png 622w\" sizes=\"auto, (max-width: 1034px) 100vw, 1034px\" \/><\/figure>\n\n\n\n<p>The tab is solely available in the <em>developer mode<\/em>. While in <em>production mode<\/em>, make sure to switch to the developer mode first, using the following command:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt; bin\/magento deploy:mode:set developer<\/code><\/pre>\n\n\n\n<p>Then, you\u2019ll be able to see the Developer section, make the necessary configuration changes, clear cache and switch back to the production mode once again:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt; bin\/magento deploy:mode:set production<\/code><\/pre>\n\n\n\n<p>Upon that, static-content deploy takes place.<br><\/p>\n\n\n\n<p>The suffix min gets added to js\/css files:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"352\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsilgu.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10747\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsilgu.png 792w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsilgu-600x267.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsilgu-768x341.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsilgu-250x111.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsilgu-696x309.png 696w\" sizes=\"auto, (max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<p>Data volume has decreased indeed! For the home page, 1 Mb instead of 1.3 Mb was transferred.<br><\/p>\n\n\n\n<p>If you think this has improved our parameters by one third, you are wrong. The situation has got better, but not significantly.<br><\/p>\n\n\n\n<p>We ran it again and again, but the results were stable, i.e., despite the fact that there were certain improvements, they were not in proportion to the decrease in the transmitted data volume.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1301\" height=\"940\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2.jpg\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10750\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2.jpg 1301w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-600x434.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-1200x867.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-768x555.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-250x181.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-324x235.jpg 324w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-696x503.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-1068x772.jpg 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/2-581x420.jpg 581w\" sizes=\"auto, (max-width: 1301px) 100vw, 1301px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Merge Js and Merge CSS<\/h3>\n\n\n\n<p>Now, it\u2019d be logical to assume that further improvements must be related to the decrease in the number of requests rather than to data volumes.<br><\/p>\n\n\n\n<p>Let\u2019s give it a try and enable Merge Js and Merge CSS configurations.&nbsp;&nbsp;<br><\/p>\n\n\n\n<p>Note that Magento itself describes this feature as an outdated one:<\/p>\n\n\n\n<p><em>\u2018We do not recommend using deprecated settings like merging JS and CSS files, as they were designed only for synchronously-loaded JS in the HEAD section of the page. Using this technique can cause bundling and requireJS logic to work incorrectly.\u2019<\/em><br><\/p>\n\n\n\n<p>Nevertheless, let\u2019s give it a go:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1892\" height=\"915\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4.png\" alt=\"\" class=\"wp-image-10751\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4.png 1892w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-600x290.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-1200x580.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-768x371.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-250x121.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-696x337.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-1068x517.png 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-868x420.png 868w\" sizes=\"auto, (max-width: 1892px) 100vw, 1892px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1316\" height=\"953\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3.jpg\" alt=\"\" class=\"wp-image-10752\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3.jpg 1316w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3-600x434.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3-1200x869.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3-768x556.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3-250x181.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3-324x235.jpg 324w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3-696x504.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3-1068x773.jpg 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/3-580x420.jpg 580w\" sizes=\"auto, (max-width: 1316px) 100vw, 1316px\" \/><\/figure>\n\n\n\n<p>The changes in the number of requests are not impressive, are they?<\/p>\n\n\n\n<p>Though such parameters as \u2018First Contentful Paint\u2019 and \u2018First Meaningful Paint\u2019 have been bettered, there is certainly room for improvements.&nbsp;<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JS Bundle<\/h3>\n\n\n\n<p>Let\u2019s give a try to the JS Bundle technology, where js files get bundled based on a fixed size. This allows us to manage the number of requests while an overall data volume remains unchanged.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"606\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsdhbd.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10754\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsdhbd.png 795w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsdhbd-600x457.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsdhbd-768x585.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsdhbd-250x191.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsdhbd-80x60.png 80w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsdhbd-696x531.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docsdhbd-551x420.png 551w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1303\" height=\"946\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4.jpg\" alt=\"\" class=\"wp-image-10755\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4.jpg 1303w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-600x436.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-1200x871.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-768x558.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-250x182.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-324x235.jpg 324w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-696x505.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-1068x775.jpg 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/4-578x420.jpg 578w\" sizes=\"auto, (max-width: 1303px) 100vw, 1303px\" \/><\/figure>\n\n\n\n<p>The results are underwhelming. The thing is that the built-in Magento mechanism collects js-bundles for all site, i.e., practically all js will be collected all the way through on any page. This will lead to a sharp increase in page volume.<br><\/p>\n\n\n\n<p>Yes, you can exclude certain js files from bundles (some of them are excluded by default). However, you do not get to do that for a specific page.<br><\/p>\n\n\n\n<p>Magento also<a href=\"https:\/\/devdocs.magento.com\/guides\/v2.3\/performance-best-practices\/configuration.html#bundling-tips\"> does not recommend<\/a> to enable Bundle JS in the production mode. Seems like it\u2019s a second option that is available, but factually \u2015 not really.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced JS Bundle<\/h3>\n\n\n\n<p>Magento recognizes difficulties with Bundles JS but offers to avoid addressing them on your own. In the<a href=\"https:\/\/devdocs.magento.com\/guides\/v2.3\/performance-best-practices\/advanced-js-bundling.html\"> official guide<\/a>, you\u2019ll find an example on how it is possible to bundle only the required js-files on a current page. Yes, this is a little more difficult than changing a parameter in the config. For Advanced Bundle, you&#8217;ll have to use Nodejs, Require JS, Phantom JS. Of course, this is not a ready-made solution. But after testing the offered mechanism, we will have an idea about how Advanced Bundle can speed up the page load time, from the theoretical perspective.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br><\/p>\n\n\n\n<p>The suggested mechanism works in manual mode and not <em>inside <\/em>but <em>outside <\/em>the framework. The special tools analyze js-files that are loaded on pages and collect them in a bundle, either a general one or a specific for the page TYPE bundle.&nbsp;&nbsp;<br><\/p>\n\n\n\n<p>Ultimately, the collected bundles get written in require js and loaded by it on a page:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1912\" height=\"708\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10756\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8.png 1912w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-600x222.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-1200x444.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-768x284.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-250x93.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-696x258.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-1068x395.png 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-1134x420.png 1134w\" sizes=\"auto, (max-width: 1912px) 100vw, 1912px\" \/><\/figure>\n\n\n\n<p>On each page type (naturally, for which a bundle was collected), a specific bundle gets loaded. This would be an example for home page:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1221\" height=\"479\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10758\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9.png 1221w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-600x235.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-1200x471.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-768x301.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-250x98.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-696x273.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-1068x419.png 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-1071x420.png 1071w\" sizes=\"auto, (max-width: 1221px) 100vw, 1221px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"956\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5.jpg\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10759\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5.jpg 1300w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5-600x441.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5-1200x882.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5-768x565.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5-250x184.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5-80x60.jpg 80w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5-696x512.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5-1068x785.jpg 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/5-571x420.jpg 571w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/figure><\/div>\n\n\n\n<p>It would seem that after we\u2019ve reduced the number of requests, extra data does not get loaded and performance must significantly increase\u2026 But the critical for SEO First Contentful Paint and First Meaningful Paint time have dramatically increased as well. That makes sense. Until the bundle file gets loaded, no tracking will take place.&nbsp;&nbsp;<br><\/p>\n\n\n\n<p>________________<br><\/p>\n\n\n\n<p>Seems like we\u2019ve tried our utmost, or not? I guess it\u2019s high time to move on and try current technologies.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTTP\/2<\/h3>\n\n\n\n<p>Let\u2019s disable Bundle JS in Magento and enable HTTP\/2 on the server.<br>In our case, it\u2019s just nginx. What we have done is changed a few lines \u2015 added http2 support for 443 port. \n\n<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>listen 80;\n    listen 443 ssl http2;\n\n    server_name md201.local;\n\n    ssl_certificate \/etc\/nginx\/ssl-certificates\/md201.local\/localhost.crt;\n    ssl_certificate_key \/etc\/nginx\/ssl-certificates\/md201.local\/localhost.key;\n<\/code><\/pre>\n\n\n\n<p>For testing in Chrome, we will need to add the self-signed certificate to the Trusted Root Authority (MacOS in our case).<br><\/p>\n\n\n\n<p>Here\u2019s how the HTTP\/2 connection looks like:<br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"866\" height=\"319\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssdcsdc.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10760\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssdcsdc.png 866w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssdcsdc-600x221.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssdcsdc-768x283.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssdcsdc-250x92.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docssdcsdc-696x256.png 696w\" sizes=\"auto, (max-width: 866px) 100vw, 866px\" \/><\/figure><\/div>\n\n\n\n<p>This has improved all the parameters without any exception! It\u2019s all down to the features of the HTTP\/2 technology.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1302\" height=\"957\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6.jpg\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10761\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6.jpg 1302w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6-600x441.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6-1200x882.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6-768x564.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6-250x184.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6-80x60.jpg 80w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6-696x512.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6-1068x785.jpg 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/6-571x420.jpg 571w\" sizes=\"auto, (max-width: 1302px) 100vw, 1302px\" \/><\/figure>\n\n\n\n<p>Decrease in access delays to speed up page load time, in particular by:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>data compression in HTTP headers,<\/li><li>usage of puch-technologies on the server side,<\/li><li>requests conveyerization,<\/li><li>resolution of head-of-line HTTP 1.0\/1.1 protocols blocking,<\/li><li>multiplexing numerous requests in one TCP connection.<\/li><\/ul>\n\n\n\n<p>With HTTP\/2, a large number of requests won\u2019t be a problem as no TCP connection opens for each request.&nbsp;<br><\/p>\n\n\n\n<p>HTTP\/2&nbsp; is supported by up-to-date versions of nginx and apache in the majority of actual browsers:<a href=\"https:\/\/caniuse.com\/#search=http2\"> https:\/\/caniuse.com\/#search=http2<\/a><br><\/p>\n\n\n\n<p>With that regard, you may have the following question: What if we combine Advanced JS Bundle and HTTP\/2?&nbsp;<br><\/p>\n\n\n\n<p>Theoretically, it won\u2019t speed up page load time as HTTP\/2 does not have significant advantages in loading large bundle js files. But to know it for sure, let\u2019s check it.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1305\" height=\"948\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7.jpg\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10762\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7.jpg 1305w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7-600x436.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7-1200x872.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7-768x558.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7-250x182.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7-324x235.jpg 324w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7-696x506.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7-1068x776.jpg 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/7-578x420.jpg 578w\" sizes=\"auto, (max-width: 1305px) 100vw, 1305px\" \/><\/figure>\n\n\n\n<p>As we see, using Advanced Bundle JS within HTTP\/2 connection does not improve speed.<\/p>\n\n\n\n<p>An attempt to fine-tune the bundles is a time-consuming process. It requires bundles to be re-generated after each Magento or a 3rd party extension (that adds JS on the front-end) update, as well as after adding new product types that connect their specific js or that do not use js of other product types. Basically, there are more nuances to consider. In my opinion, moving towards Bundle JS won\u2019t yield significant results if you have a possibility to use HTTP\/2.<\/p>\n\n\n\n<p>What other means of speed optimization exist? Is it possible to make page load time even faster?<\/p>\n\n\n\n<p>_______________<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h.2r62dm5iqsyd\">Move JS code to the bottom of the page<\/h3>\n\n\n\n<p>Honestly, we planned to review this optimization means from 3rd party vendors, but while this article was in the process of creation,&nbsp;<a href=\"https:\/\/www.google.com\/url?q=https:\/\/devdocs.magento.com\/guides\/v2.3\/release-notes\/bk-release-notes.html&amp;sa=D&amp;ust=1562340122279000\">Magento 2.3.2 got released<\/a>. This feature has got added to the new version (and disabled by default).<\/p>\n\n\n\n<p>When enabled, some js-files get transferred from the &lt;head&gt; section to the end of &lt;\/body&gt;, which should speed up the beginning of site\u2019s visualization in theory.<\/p>\n\n\n\n<p><strong>That\u2019s what we had in the beginning:<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1900\" height=\"502\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/11.png\" alt=\"\" class=\"wp-image-10763\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/11.png 1900w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/11-600x159.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/11-1200x317.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/11-768x203.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/11-250x66.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/11-696x184.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/11-1068x282.png 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/11-1590x420.png 1590w\" sizes=\"auto, (max-width: 1900px) 100vw, 1900px\" \/><\/figure>\n\n\n\n<p><strong>Here\u2019s what we\u2019ve got after having it enabled:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1364\" height=\"463\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/12.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10764\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/12.png 1364w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/12-600x204.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/12-1200x407.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/12-768x261.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/12-250x85.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/12-696x236.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/12-1068x363.png 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/12-1237x420.png 1237w\" sizes=\"auto, (max-width: 1364px) 100vw, 1364px\" \/><\/figure>\n\n\n\n<p>To run such testing, we had to update our Magento version to 2.3. The quantity and size of connected files were changed. Therefore, test results can be rough. To understand how Magento version itself has influenced the results, we compared M2.3.1 vs M2.3.2 versions with <strong>HTTP\/2 + Minify JS\/CSS <\/strong>combination first \u2015 and the obtained results were practically equal, which do not surpass the uncertainty of measurement.<strong>&nbsp;<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1283\" height=\"991\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8.jpg\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10765\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8.jpg 1283w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-600x463.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-1200x927.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-768x593.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-250x193.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-696x538.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-1068x825.jpg 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/8-544x420.jpg 544w\" sizes=\"auto, (max-width: 1283px) 100vw, 1283px\" \/><\/figure>\n\n\n\n<p>As we can see,&nbsp;<strong><a href=\"https:\/\/www.google.com\/url?q=https:\/\/developers.google.com\/web\/tools\/lighthouse\/audits\/first-contentful-paint&amp;sa=D&amp;ust=1562340122346000\">First Contentful Paint<\/a><\/strong>&nbsp;and&nbsp;<strong><a href=\"https:\/\/www.google.com\/url?q=https:\/\/developers.google.com\/web\/tools\/lighthouse\/audits\/first-meaningful-paint&amp;sa=D&amp;ust=1562340122347000\">First Meaningful Paint<\/a><\/strong>&nbsp;have been improved in all the cases by 10-15%.<\/p>\n\n\n\n<p>Within all the overviewed means of Magento speed optimization, the following variants seem to be in the lead:<\/p>\n\n\n\n<p><strong>Gzip + Minify JS\/CSS + HTTP\/2 +&nbsp;<\/strong><strong>Move JS code to the bottom of the page<\/strong><\/p>\n\n\n\n<p>Let\u2019s consider it as a starting point and move further. Previously, we played around with configurations that touch upon JS\/CSS solely. Thus, there are certain aspects that can be improved.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h.2jyfht24vqsz\">Minify Html<\/h3>\n\n\n\n<p>The setup can be found here:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1252\" height=\"838\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/10.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10767\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/10.png 1252w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/10-600x402.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/10-1200x803.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/10-768x514.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/10-250x167.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/10-696x466.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/10-1068x715.png 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/10-627x420.png 627w\" sizes=\"auto, (max-width: 1252px) 100vw, 1252px\" \/><\/figure>\n\n\n\n<p><strong>HTML part of the home page \u2015 89 Kb before and 88,7 after HTML Minify \/ with compression on the server \u2015 12,2 against 12,1 Kb.<\/strong><\/p>\n\n\n\n<p><strong>HTML part of the category page \u2015 155 Kb before and 100 after HTML Minify \/ with compression on the server \u2015 16,8 against 15,2 Kb.<\/strong><\/p>\n\n\n\n<p><strong>HTML part of the product page \u2015 80 Kb before and 67 after HTML Minify \/ with compression on the server \u2015 15 against 14,1 Kb.<\/strong><\/p>\n\n\n\n<p>As compression on the server-side is used, 1-2 Kb difference is not critical and is within the audit drawbacks.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Chapter 2. Additional Tools<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Third-party extensions: Minify\/Merge JS\/CSS\/HTML | Bundle JS<\/h3>\n\n\n\n<p>In the meanwhile, there is not much point in going for 3rd-party solutions for JS\/CSS\/HTML and bundle JS. Even if you get to achieve extra compression results, they will be limited to a share of one percent on the front-end. In return, you\u2019ll get one or several more Magento extensions in the system. The fact of their presence and operation of their algorithms requires additional resources, as well as increases the risk of system failure in general. If you are not sure that the potential benefit outweighs the related risks, it is <em>recommended to withdraw from their usage<\/em>.<br><\/p>\n\n\n\n<p>If you know any 3rd party solution that <strong>drastically <\/strong>improves loading speed through compression and bundling, we encourage you to share it in the comments or inform us directly at <a href=\"mailto:support@mageworx.com\">support@mageworx.com<\/a>. We will be happy to investigate it \ud83d\ude09 <strong>&nbsp;<\/strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><\/p>\n\n\n\n<p>Now, let\u2019s try to make improvements using means that are not available in Magento by default.&nbsp;<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Decrease image size<\/h3>\n\n\n\n<p>Usage of images on the web is always a compromise between quality and image file size.<br><\/p>\n\n\n\n<p>Our main concern is the reduction of image size without quality losses. Well, using default Magento functionality, it is possible to decrease image size indeed. But the quality of images will suffer significantly.<br><\/p>\n\n\n\n<p>Let\u2019s decrease the size of standard images, which Magento converted and resized based on the configurations, i.e., we are mostly interested in images that are located in magento_root_directory\/pub\/media\/catalog\/product\/cache.<br><\/p>\n\n\n\n<p>Magento configurations can be found here:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1398\" height=\"857\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/14.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10768\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/14.png 1398w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/14-600x368.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/14-1200x736.png 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/14-768x471.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/14-250x153.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/14-696x427.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/14-1068x655.png 1068w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/14-685x420.png 685w\" sizes=\"auto, (max-width: 1398px) 100vw, 1398px\" \/><\/figure>\n\n\n\n<p>As a start, let\u2019s try to do it manually and use the jpegoptim utility. Multiple modules that are aimed at speeding up Magento (including the paid ones) are powered by this utility.<\/p>\n\n\n\n<p>No results for images from cache unless we decrease image quality:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1118\" height=\"97\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Speed-opt.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10771\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Speed-opt.png 1118w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Speed-opt-600x52.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Speed-opt-768x67.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Speed-opt-250x22.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Speed-opt-696x60.png 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Speed-opt-1068x93.png 1068w\" sizes=\"auto, (max-width: 1118px) 100vw, 1118px\" \/><\/figure>\n\n\n\n<p>There seems to be something wrong about that. For testing purposes, we applied it to the original image, which is not displayed on the page in fact. We did manage to achieve certain results, though insignificant ones:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"797\" height=\"30\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-1.png\" alt=\"Magento 2 Speed Optimization\" class=\"wp-image-10821\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-1.png 797w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-1-600x23.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-1-768x29.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-1-250x9.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-Google-Docs-1-696x26.png 696w\" sizes=\"auto, (max-width: 797px) 100vw, 797px\" \/><\/figure><\/div>\n\n\n\n<p>What about going for automated solutions?&nbsp;<br><\/p>\n\n\n\n<p>Let\u2019s try the following <strong>free<\/strong> image optimizer: <a href=\"https:\/\/github.com\/justbetter\/magento2-image-optimizer\">https:\/\/github.com\/justbetter\/magento2-image-optimizer<\/a>.<br><\/p>\n\n\n\n<p>We\u2019ve installed all the offered utilities that are used by the extension:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"http:\/\/freecode.com\/projects\/jpegoptim\">JpegOptim<\/a><\/li><li><a href=\"http:\/\/optipng.sourceforge.net\/\">Optipng<\/a><\/li><li><a href=\"https:\/\/pngquant.org\/\">Pngquant 2<\/a><\/li><li><a href=\"https:\/\/github.com\/svg\/svgo\">SVGO<\/a><\/li><li><a href=\"http:\/\/www.lcdf.org\/gifsicle\/\">Gifsicle<\/a><\/li><\/ul>\n\n\n\n<p>The image compression settings have been set up to 80 for JPEG. This corresponds to the default Magento settings. Then, we ran optimization for all <em>media <\/em>directory.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"787\" height=\"213\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-ascasc-Google-Docs.png\" alt=\"\" class=\"wp-image-10773\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-ascasc-Google-Docs.png 787w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-ascasc-Google-Docs-600x162.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-ascasc-Google-Docs-768x208.png 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-ascasc-Google-Docs-250x68.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-ascasc-Google-Docs-696x188.png 696w\" sizes=\"auto, (max-width: 787px) 100vw, 787px\" \/><\/figure>\n\n\n\n<p>Full <em>media <\/em>directory size before compression is 353 Mb, after \u2015 340,1 Mb<\/p>\n\n\n\n<p>media\/catalog\/product\/cache directory size is 194,7 Mb and has not changed after compression.<br><\/p>\n\n\n\n<p>We\u2019ve found the solutions convenient and useful, especially if you do not get the images ready before uploading them to your site.<\/p>\n\n\n\n<p>However, when it comes to decreasing the overall image size on product and category pages, no significant improvements have been achieved.<\/p>\n\n\n\n<p>Probably, other image formats are mainly used in your case. Thus, the results might be even more significant.<\/p>\n\n\n\n<p>We intentionally don\u2019t overview webp image format here as apple browsers do not support this format: <a href=\"https:\/\/caniuse.com\/#feat=webp\">https:\/\/caniuse.com\/#feat=webp<\/a>.<br><\/p>\n\n\n\n<p>____________________<br><\/p>\n\n\n\n<p>Alright, if we can\u2019t significantly decrease image file size, let\u2019s try to upload them only for the visible area.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lazy Loading Image<\/h3>\n\n\n\n<p>Let\u2019s try the first FREE 3rd party solution we come across \u2015 <a href=\"https:\/\/marketplace.magento.com\/weltpixel-m2-weltpixel-lazyload.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Lazy Loading<\/a>.<br><\/p>\n\n\n\n<p>As previously, we ran an audit on product, category and home pages.<br><\/p>\n\n\n\n<p>No significant changes have been achieved. The variations are within the uncertainty of measurement.<\/p>\n\n\n\n<p>This is probably because the sample data pages are quite lightweight and all primary images are located right in the visible area.<\/p>\n\n\n\n<p>Products description does not contain images. The category does not have a description at all. <br>Let\u2019s do it the easiest way and simply increase the number of products (including the number of loading images) on the category page in pager \u2015 first from 9 to 30, then up to 48 and list the results. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1294\" height=\"328\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9.jpg\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10774\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9.jpg 1294w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-600x152.jpg 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-1200x304.jpg 1200w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-768x195.jpg 768w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-250x63.jpg 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-696x176.jpg 696w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/9-1068x271.jpg 1068w\" sizes=\"auto, (max-width: 1294px) 100vw, 1294px\" \/><\/figure>\n\n\n\n<p>The results are evident. The larger (in quantity and size) are your images in the invisible at initial load website area, the more significant are the advantages. The feature is surely a useful one from the optimization standpoint though it does have certain usability disadvantages. &nbsp; &nbsp; &nbsp;<\/p>\n\n\n\n<p>_________________<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h.sgt501rhq2p9\">Instead of Final Words<\/h2>\n\n\n\n<p>We\u2019ve overviewed both standard Magento features and some 3rd-party solutions that allow optimizing page load performance.<\/p>\n\n\n\n<p>Despite the research, we find it difficult to draw firm conclusions as all websites are unique and have their own one-of-a-kind peculiarities. Thus, there is always some level of probability that solutions that work for one site won\u2019t have any effect on other ones.  <\/p>\n\n\n\n<p>However, the most useful features that have a meaningful effect is the default Magento\u2019s&nbsp;<strong>Gzip + Minify JS\/CSS + HTTP\/2 + Image Lazy Loading<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">About Bundle JS<\/h3>\n\n\n\n<p>Thus,&nbsp;advanced versions of this&nbsp;<em>bundle&nbsp;<\/em>from 3rd party extension developers will hardly allow significantly increase load speed without additional personalized site fine-tuning. &nbsp;&nbsp;<\/p>\n\n\n\n<p>There are surely more means to try that can help increase load time. However, many of them are not one-size-fits-all solutions. For example, the correlation of site visitors from different countries across the world and the physical server\/servers location also matter. It makes sense to transfer the site to a server, from which data transfer will be faster for the majority of site users\/use CDN for static files. If site visitors are primarily from one region, then you may try to cache static files using Varnish: https:\/\/devdocs.magento.com\/guides\/v2.3\/config-guide\/varnish\/config-varnish-magento.html#cache-static-files. &nbsp; &nbsp;  <\/p>\n\n\n\n<p>Ultimately, a means that essentially changes the situation and makes your site maximally fast on mobile devices is using the AMP technology.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h.xqdtbrbj364v\">P.S. AMP<\/h3>\n\n\n\n<p>(<a href=\"https:\/\/www.google.com\/url?q=https:\/\/amp.dev\/about\/websites&amp;sa=D&amp;ust=1562340122375000\">https:\/\/amp.dev\/about\/websites<\/a>)<\/p>\n\n\n\n<p>For handheld devices, from Google SERP, a user will get not to your site but to its cached version that is stored on Google servers. The initial load will be as quick as lightning. Such websites get naturally indicated with a&nbsp;<em>lightning&nbsp;<\/em>in the SERP.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"571\" height=\"666\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-\u0444\u044b\u0441\u0444\u0441Google-Docs.png\" alt=\"Magento 2 Speed Optimization: Research Proves Default Functionality is Enough | MageWorx Magento Blog\" class=\"wp-image-10777\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-\u0444\u044b\u0441\u0444\u0441Google-Docs.png 571w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-\u0444\u044b\u0441\u0444\u0441Google-Docs-514x600.png 514w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-\u0444\u044b\u0441\u0444\u0441Google-Docs-250x292.png 250w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2019\/07\/Copy-of-Page-Speed-Extension-Review-2-\u0444\u044b\u0441\u0444\u0441Google-Docs-360x420.png 360w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/figure><\/div>\n\n\n\n<p>This technology is not a simplistic one and assumes using only own amp js-libraries. Additionally, you get a chance to have a separate pages&#8217; version that is not connected to your current theme in any way. <\/p>\n\n\n\n<p>This can be a tough choice to make. On the one hand, it\u2019s all about <a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-resources\/experience-design\/mobile-page-speed-load-time\/\">improved load speed and conversions<\/a>. On the other one, it\u2019s limitations that the AMP technology imposes, i.e., you get to use js and HTML only from AMP libraries. As a result, the functionality gets limited. <\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 10<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>Introduction According to Statista, the number of mobile phone users in the world is expected to pass the five billion mark in 2019. With that regard, Google places the utmost importance on site loading speed on mobile devices. This parameter undoubtedly influences the search results ranking. Additionally, fast website load time increases conversion as sites [&hellip;]<\/p>\n","protected":false},"author":47,"featured_media":12387,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[255,425],"tags":[436,434],"class_list":{"0":"post-10725","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-magento-2","8":"category-magento-how-tos","9":"tag-developer-diaries","10":"tag-magento-2-speed-optimization"},"_links":{"self":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/10725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/comments?post=10725"}],"version-history":[{"count":29,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/10725\/revisions"}],"predecessor-version":[{"id":16037,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/10725\/revisions\/16037"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media\/12387"}],"wp:attachment":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media?parent=10725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/categories?post=10725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/tags?post=10725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}