非阻塞加载字体和优先加载字体
使用
font-display:swap; 非阻塞加载字体.https://fonts.googleapis.com/css?family=Sintony%7CPoppins&display=swap
使用preload优先加载字体.
<link rel="preload" href="/usr/themes/handsome/fonts/sourcesanspro/sourcesanspro-light.woff" as="font" type="font/woff" crossorigin="anonymous">
还可以使用
preload 预加载其他文件- 预加载字体
- CSS中背景图片
- 折叠导航的JS脚本
延迟加载javascript
使用defer延迟加载JS脚本
https://www.livelu.com/201911368.html
优先推送加载css
使用HTTP2 SERVER PUSH推送css及重要资源
https://www.livelu.com/201803300.html
使用 103 Early Hints
由于HTTP2 SERVER PUSH已经被chrome禁用，使用103 Early Hints替代。
nginx暂时没有支持103 HTTP状态码，需要等待官方跟进。
延迟加载图片
大部分浏览器已经原生支持图片懒加载,非常棒
只要在img标签加上
loading="lazy" 即可实现图片懒加载<img loading="lazy" src="https://www.livelu.com/usr/themes/handsome/img/sj/36.jpg">
为图片设置宽度和高度,优化布局偏移(CLS)
<img style="max-width:100%" width="800" height="400" loading="lazy" src="https://www.livelu.com/usr/themes/handsome/img/sj/36.jpg">
使用基线JPG而不是渐进式JPG
渐进式JPG虽然可以优先展示模糊图片,但不利于SEO. 如果是为了网页加载速度，可以放弃基线jpg.
使用基线JPG,Google有机会在搜索页面右侧显示你的图片,对用户来说更加显眼,有利于提高点击率.
检测JPG图片格式网站:
https://www.imgonline.com.ua/eng/progressive-or-baseline-jpeg.php
其他优化
js代码优化以及CSS优化咱也不会,就不提了...
参考网站:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
https://trac.nginx.org/nginx/ticket/2432
此处评论已关闭