Magento 2 e-commerce platform has been criticized for its speed problems, with slow product catalog pages and slow checkout process being common problems. This article will share seven practical tips to help you improve the running speed of the Magento 2 online store.

1. Use Varnish as cache application

Varnish is an HTTP proxy server that caches content and installs it in front of a web server to significantly improve website performance. Magento 2 has built-in support for Varnish. The activation method is as follows:

1. Enter the admin panel > Store > Configuration > Advanced > System > Full-page cache and set "Cache Application" to Varnish Cache.

   

2. Expand the Varnish configuration tab and export the VCL file.

   

Talk this file to your system administrator or host support team for Varnish daemon configuration.

2. Install the cache preheating tool

Magento 2 uses full page cache (FPC) to reduce server response time, but FPC's first request is usually slower. A cache warm-up tool (script or extension) can make these requests in advance, populating the cache storage, thereby reducing first-byte time (TTFB). You can install Magento 2 module (paid or free) as a cache preheating tool, or create a simple PHP script that warms up all categories and most popular pages:

ini_set('memory_limit','12000M');
use Magento\Framework\App\Bootstrap;
require __DIR__.'/app/bootstrap.php';
$params = $_SERVER;
$bootstrap = Bootstrap::create(BP,$params);
$obj = $bootstrap->getObjectManager();
$state = $obj->get('Magento\Framework\App\State');
$state->setAreaCode('frontend');
$categories = $obj->create('Magento\Catalog\Model\ResourceModel\Category\Collection');
$categories->addIsActiveFilter()
           ->joinUrlRewrite();
foreach($categories as $cat){
   $st = microtime(true);
   $dd = file_get_contents_ssl($cat->getUrl());
   $fn = microtime(true);
   if(($fn - $st) > 0.9)
    echo $cat->getUrl()." : time: ".($fn - $st)."\n";
   sleep(3);
}
$open = fopen("1000-popular-pages.csv","r");
while(($data = fgetcsv($open,4000,",")) !== FALSE){
    if(filter_var($data[0],FILTER_VALIDATE_URL) !== FALSE && strpos($data[0],".pdf") === FALSE && strpos($data[0],"/blog/") === FALSE){
      $st = microtime(true);
      $dd = file_get_contents_ssl($data[0]);
      $fn = microtime(true);
      if(($fn - $st) > 0.9)
       echo $data[0]." : time: ".($fn - $st)."\n";
      sleep(3); 
    }
}
fclose($open);

function file_get_contents_ssl($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_REFERER, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3000); 
    curl_setopt($ch, CURLOPT_TIMEOUT, 10000); 
    $result = curl_exec($ch);
    if($result === FALSE)
       $result = curl_error($ch);
    curl_close($ch);
    return $result;
}

You can export a list of popular pages from Google Analytics.

3. Move JavaScript code to the bottom of the page

Moving JavaScript code to the bottom of the page can improve the speed of drawing content on the first screen. Magento 2.4 provides corresponding management settings, or use the command line:

php bin/magento config:set  dev/js/move_script_to_bottom 1
php bin/magento cache:flush

4. Convert the image to WebP format

WebP images take up less disk space than JPEG and PNG. Converting website images to WebP format can reduce page size and improve performance. You can use the cwebp command line tool to convert:

cwebp -q 80 image.png image.webp

(-q parameter setting quality, here is 80). Magento 2 also has some modules that can implement this transformation.

5. Enable HTML compression

HTML compression helps reduce page size and speed up. Magento 2.4 Compress HTML without additional modules. Enable method:

php bin/magento config:set dev/template/minify_html 1
php bin/magento deploy:mode:set production

6. Compress and merge JavaScript and CSS files

Compressing and merging JS and CSS files helps reduce page size and reduce HTTP requests, thus speeding up your website. Enable method:

php bin/magento config:set dev/js/merge_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/css/minify_files 1
php bin/magento deploy:mode:set production

7. Cache ElasticSearch query results

Magento 2.4 Use the ElasticSearch engine for indexing and directory management. For large directories, cache query results can improve ElasticSearch performance. Open the vendor/elasticsearch/elasticsearch/src/Elasticsearch/Connections/Connection.php file and add the following code near about 365 lines:

ini_set('memory_limit','12000M');
use Magento\Framework\App\Bootstrap;
require __DIR__.'/app/bootstrap.php';
$params = $_SERVER;
$bootstrap = Bootstrap::create(BP,$params);
$obj = $bootstrap->getObjectManager();
$state = $obj->get('Magento\Framework\App\State');
$state->setAreaCode('frontend');
$categories = $obj->create('Magento\Catalog\Model\ResourceModel\Category\Collection');
$categories->addIsActiveFilter()
           ->joinUrlRewrite();
foreach($categories as $cat){
   $st = microtime(true);
   $dd = file_get_contents_ssl($cat->getUrl());
   $fn = microtime(true);
   if(($fn - $st) > 0.9)
    echo $cat->getUrl()." : time: ".($fn - $st)."\n";
   sleep(3);
}
$open = fopen("1000-popular-pages.csv","r");
while(($data = fgetcsv($open,4000,",")) !== FALSE){
    if(filter_var($data[0],FILTER_VALIDATE_URL) !== FALSE && strpos($data[0],".pdf") === FALSE && strpos($data[0],"/blog/") === FALSE){
      $st = microtime(true);
      $dd = file_get_contents_ssl($data[0]);
      $fn = microtime(true);
      if(($fn - $st) > 0.9)
       echo $data[0]." : time: ".($fn - $st)."\n";
      sleep(3); 
    }
}
fclose($open);

function file_get_contents_ssl($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_REFERER, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3000); 
    curl_setopt($ch, CURLOPT_TIMEOUT, 10000); 
    $result = curl_exec($ch);
    if($result === FALSE)
       $result = curl_error($ch);
    curl_close($ch);
    return $result;
}

This will enable the ElasticSearch internal query caching mechanism.

Summary

This article introduces seven ways to improve the speed of Magento 2 websites: using Varnish as a full-page cache, setting up cache preheating tool, lazy loading of JavaScript, converting all images to WebP, enabling HTML compression, compressing and merging JS and CSS Files and cache ElasticSearch query results. These steps will improve server response time and core network metrics.

The above is the detailed content of 7 Easy Ways to Make a Magento 2 Website Faster. For more information, please follow other related articles on the PHP Chinese website!