个人WEB前端性能优化总结

非阻塞加载字体和优先加载字体


使用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

延迟加载图片


大部分浏览器已经原生支持图片懒加载,非常棒
只要在img标签加上 loading="lazy" 即可实现图片懒加载
<img loading="lazy" src="https://www.livelu.com/usr/themes/handsome/img/sj/30.jpg">

使用基线JPG而不是渐进式JPG


渐进式JPG虽然可以优先展示模糊图片,但不利于SEO.
使用基线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

此处评论已关闭