Сергей Незбрицкий, CTO в Magecom, 11 ноября выступил на Magento Meetup Online #11 с темой «Google Page Insights и Magento 2». В своем докладе Сергей перечисляет основные проблемы, связанные с Magento 2 Frontend performance. А также он перечислил требования к Google Pagespeed Insights, чтобы сделать Magento 2 френдли. --- Sergey Nezbritskiy, CTO at Magecom, talks on “Google Page Insights and Magento 2” Magento Meetup Kharkiv Online on November 11th. Sergey lists the main issues related to Magento 2 Frontend performance in his talk. He also listed the requirements for Google Pagespeed Insights to make Magento 2 friendly. Magecom: https://magecom.net/careers/ Facebook: https://www.facebook.com/magecomcompany Instagram: https://www.instagram.com/magecomcompany/

1. Google PageSpeed
Insights & Magento 2
Magento
Meetup
Kharkiv
#11

2. Magento
Meetup
Kharkiv
#11
About me
CTO at Magecom
Location: Kharkiv, Ukraine
3x Oceanman
Piano lover at https://solschool.com.ua/
www.credly.com www.zend-zce.com

3. Magento
Meetup
Kharkiv
#11
Why ?
Por que ?
Pourquoi ?
Perché ?
Почему ?
Чому ? Warum ?

4. Magento
Meetup
Kharkiv
#11
Потому что
Magento is not for your business
You simply cooked your Magento wrong
You need Magento Cloud
You need to invest more
money into performance

5. Magento
Meetup
Kharkiv
#11
Google
PageSpeed
Insights

6. Magento
Meetup
Kharkiv
#11
Core Web Vitals
Try
It

7. Magento
Meetup
Kharkiv
#11
What is measured ?
https://web.dev/lighthouse-performance/

8. Magento
Meetup
Kharkiv
#11
What Magento performance I see:
0h 0h 8h 40h
Start new project Development
(add more code)
Go live
(add more content)
Support
(performance optimisation)

9. Magento
Meetup
Kharkiv
#11
What Magento performance I want to see:
8h 16h 24h 40h
Start new project Development
(add more code)
Go live
(add more content)
Support
(performance optimisation)

10. Magento
Meetup
Kharkiv
#11
Rule #1 Measure performance
npm install -g lighthouse-ci
npx lighthouse-ci https://som.e/plp.html --filename=plp.html

11. Magento
Meetup
Kharkiv
#11
Defer offscreen images
public function process(string $content): string
{
$closure = function (array $match) {
return str_replace('<img', '<img loading="lazy"',
$match[0]);
};
return preg_replace_callback('/(<s*img[^>]+>)/i', $closure,
$content);
}
/**
* @see MagentoFrameworkControllerResultInterface::renderResult
*/
public function afterRenderResult(
MagentoFrameworkControllerResultInterface $subject,
MagentoFrameworkControllerResultInterface $result,
MagentoFrameworkAppResponseInterface $response
): MagentoFrameworkControllerResultInterface
{
$content = $response->getBody();
$content = $this->imageProcessor->process($content);
$response->setBody($content);
return $result;
}
https://web.dev/offscreen-images/

12. Magento
Meetup
Kharkiv
#11
Reduce server response times (TTFB)
public function getUnusedModules(): array
{
$allModules = $this->getAllModules();
$requiredModules = $this->getRequiredModules();
$unusedModules = array_diff_key($allModules, $requiredModules);
ksort($unusedModules);
return $unusedModules;
}
private function getRequiredModules(): array
{
$requiredModules = [];
$modules = $this->configProvider->getConfig();
foreach ($modules as $moduleName) {
$this->addRequiredModules($requiredModules, $moduleName);
}
ksort($requiredModules);
return $requiredModules;
}
private function addRequiredModules(array &$requiredModules, string $moduleName): void
{
if (array_key_exists($moduleName, $requiredModules)) {
return;
}
$module = $this->moduleRepository->getModuleByModuleName($moduleName);
$requiredModules[$moduleName] = $module;
foreach ($module->getDependencies() as $dependency) {
$type = $dependency['type'];
$dependencyName = $dependency['module'];
if ($type === 'hard') {
$this->addRequiredModules($requiredModules, $dependencyModule->getFullName());
}
}
}
Check it out
https://web.dev/time-to-first-byte/

13. Magento
Meetup
Kharkiv
#11
Preload key requests
Modify your themes's layout and add <link rel=preload> tags.
https://web.dev/uses-rel-preload/

14. Magento
Meetup
Kharkiv
#11
Minify CSS
bin/magento config:set dev/css/minify_files 1 --lock-config
https://web.dev/unminified-css/

15. Magento
Meetup
Kharkiv
#11
Minify JavaScript
php bin/magento config:set dev/js/minify_files 0 --lock-config
https://github.com/terser/terser
https://web.dev/unminified-javascript/

16. Magento
Meetup
Kharkiv
#11
Eliminate render-blocking resources
CSS:
php bin/magento config:set dev/css/use_css_critical_path 1 --lock-config
https://web.dev/render-blocking-resources/
JavaScript:
php bin/magento config:set dev/js/move_script_to_bottom 1 --lock-config
https://www.npmjs.com/package/grunt-
critical
https://github.com/addyosmani/critical
Try Me !!!

17. Magento
Meetup
Kharkiv
#11
Keep request counts low
https://web.dev/resource-summary/
CSS:
php bin/magento config:set dev/css/merge_css_files 1 --lock-config
JavaScript:
composer require creativestyle/magesuite-magepack
npm install -g magepack
bin/magento config:set dev/js/merge_files 0 --lock-config
bin/magento config:set dev/js/enable_magepack_js_bundling 1 --lock-config
magepack generate --cms-url="{HOMEPAGE_URL}" --category-url="{PLP_URL}" --product-url="{PDP_URL}"
magepack bundle
https://github.com/magesuite/magepack-magento
Don’t
forget
about
Terser
!!!

18. Magento
Meetup
Kharkiv
#11
Avoid an excessive DOM size
There is no easy way to fix this, but...
https://web.dev/dom-size/
- disable Page Builder
- download some parts of html content/data with ajax

19. Magento
Meetup
Kharkiv
#11
Serve images in next-gen formats
Consider searching the Magento Marketplace for a variety of third-party extensions to
leverage newer image formats.
https://web.dev/uses-webp-images/
Consider using CDN services which allow converting images on-the-fly.
https://developer.fastly.com/reference/io/format/
https://blog.cloudflare.com/a-very-webp-new-year-from-cloudflare/

20. Magento
Meetup
Kharkiv
#11
Serve static assets with an efficient
cache policy
add webp format and any other missing formats to nginx config cache lifetime section
https://web.dev/uses-long-cache-ttl/

21. Magento
Meetup
Kharkiv
#11
Remove unused CSS
https://web.dev/unminified-javascript/
php bin/magento config:set dev/css/merge_css_files 0 --lock-config

22. Magento
Meetup
Kharkiv
#11
Enable text compression
https://web.dev/unminified-javascript/
php bin/magento config:set dev/template/minify_html 1 --lock-config

23. Magento
Meetup
Kharkiv
#11
Efficiently encode images
Consider using a third-party Magento extension that optimizes images.
https://web.dev/uses-optimized-images/
https://marketplace.magento.com/apptrian-image-optimizer.html
Consider using CDN services which allow optimizing images.

24. Magento
Meetup
Kharkiv
#11
Todo
● Properly size images
● Reduce JavaScript execution time
● Preconnect to required origins
● Avoid multiple page redirects
● Use video formats for animated content
● Reduce the impact of third-party code
● Avoid non-composited animations
● Lazy load third-party resources with facades
● Avoid enormous network payloads
● Avoid chaining critical requests
● User Timing marks and measures
● Minimize main thread work
● Ensure text remains visible during webfont load

25. Thank you for attention