前端网站常规优化方案

优化原则和策略

1、减少请求次数

2、减小资源大小

3、提高响应和加载速度

4、优化资源加载时机

5、优化加载方式

具体方法

1、合并、压缩、混淆html/css/js文件(webpack实现,减小资源大小)

2、Nginx开启Gzip,进一步压缩资源(减小资源大小)

3、图片资源使用CDN加速(提高加载速度)

4、符合条件的图标做base64处理(减小资源大小)

5、样式表放首部,JS放尾部(JS单线程,会阻塞页面;资源加载方式)

6、设置缓存(强缓存和协商缓存,提高加载速度)

7、link或者src添加rel属性,设置prefetch或preload可预加载资源。(加载时机)

8、如果使用了UI组件库,采用按需加载(减小资源大小)

9、SPA项目,通过import或者require做路由按需(减小资源大小)加载

10、服务端渲染SSR,加快首屏渲染,利于SEO

11、页面使用骨架屏,提高首页加载速度(提高加载速度)

12、使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png,当页面图片较多时,这点作用非常明显

13、使用图片懒加载-lazyload

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容