个人WEB前端性能优化总结

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


使用font-display: swap; 非阻塞加载字体.
使用preload优先加载字体.
<link rel="preload" href="/usr/themes/handsome/fonts/sourcesanspro/sourcesanspro-light.woff" as="font" type="font/woff" crossorigin="anonymous">

延迟加载javascript


使用defer延迟加载JS脚本
https://www.livelu.com/201911368.html

优先推送加载css


使用HTTP2 SERVER PUSH推送css及重要资源
https://www.livelu.com/201803300.html

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

发表评论