Lazy Load插件

https://bsscommerce.com/magento-2-lazy-load-extension.html
https://github.com/magepal/magento2-catalog-lazy-load
初筛magepal,bss

magepal可以设置顶部的x数量图片立刻显示。
运行逻辑，图像渲染之前，标签替换src为data-original
preg_replace_callback，正则替换回调函数

bss滚动加载支持排除页面
用了事件controller_front_send_response_before
效率低

最终使用原生的loading=”lazy”

性能

在评分、开发成本和客户满意度之间做一个平衡

Largest contentful paint，测量页面开始加载到最大文本块内容或图片显示在页面中的时间
Total Blocking Time，阻塞总时间
Cumulative Layout Shift，累计布局偏移
First Contentful Paint，首次内容绘制
Speed Index，速度指数 反映了网页内容填充的速度
Time to Interactive，可交互时间

核心指标
加载，Largest contentful paint（LCP）
交互，First Input Delay (FID)
视觉稳定性，Cumulative Layout Shift (CLS)

LCP一般是网站banner
1.优化实践
CSS, yes,yes
JS，no,no,yes
js move bottom
首屏之外的lazyload，原生的loading=”lazy”
图片加width和height，img {height:auto;}
magefun的defer（测试中）
banner添加aspect-ratio避免CLS
禁用模块

Links

关键css
https://www.rohanhapani.com/how-to-enable-and-generate-css-critical-path-in-magento-2/
magefun的defer更优?
https://magefan.com/rocket-javascript-deferred-javascript
跑分
https://medium.com/@jahvi/how-to-improve-magento-2-page-speed-insights-score-bb37e8946192
Magento2 google web vitals
https://onilab.com/blog/core-web-vitals-magento-optimization/
关闭无用模块
https://jvmsaas.com/support-en/magento-2-uninstalling-unused-modules
https://gist.github.com/erwinromkes/6574f0a7f973be5e5088b634ec1d93f0
优化CLS
https://www.debugbear.com/docs/metrics/cumulative-layout-shift

M2 move_script_to_bottom 是如何实现的
module-theme/Controller/Result/JsFooterPlugin.php
也是使用了preg_replace_callback

magefun的defer
只有在bundle列表里的才打包

测试环境生产模式

php bin/magento deploy:mode:set production —skip-compilation
php -dmemory_limit=2G bin/magento setup:di:compile
php -dmemory_limit=2G bin/magento setup:static-content:deploy en_GB
php bin/magento cache:flush
bundle只有生产模式才生效

测试工具

PageSpeed Insights
https://web.dev/
Lighthouse
Search Console

实验室数据和真实数据有差别的