想发外链网
如何实现网站前端优化
1、加速页面加载速度。尽可能用CSS代替背景图片，对背景图片进行压缩，将多个图标集成到一个图片中，利用background-position定位所需图片位置。减少HTTP请求次数，以提升网页加载效率。
2、分离结构、表现和行为。导致网页加载缓慢的另一重要原因是将CSS和JS代码直接嵌入HTML页面中。看到有人直接在页面上编写CSS和JS，我常感到痛心。通过外部链接方式可以有效提升网页加载速度，CSS文件置于head部分，JS文件置于body底部，在不影响阅读的前提下加载JS。
3、优化网站层级结构。在每个内页添加面包屑导航非常必要，有助于蜘蛛进入页面后不会迷失方向。如有条件，最好单独创建一个Sitemap页面，将网站结构清晰地展示给蜘蛛，有利于蜘蛛抓取信息。
4、集中网站权重。蜘蛛分配给每个页面的权重有限，这些权重也会平均分配到每个a链接上。为了集中网站权重，可以使用“rel=nofollow”属性，告知蜘蛛无需抓取目标页，将权重分配给其他链接。
5、使用文本强调标签。在需要强调某个关键词时，使用strong标签比b标签更能突出强调作用。
6、利用a标签的title属性。在不影响页面功能的前提下，尽量为a标签添加title属性，有利于蜘蛛抓取信息。
7、使用图片alt属性。当图片无法加载时，alt属性会在页面上显示相关文字信息，作用类似于上述。
8、合理使用H标签。特别是H1标签的使用需特别注意，因为它自带权重，一个页面只能有一个H1标签，通常放置在页面最重要的标题上，如首页的logo可以添加H1标签。
常规前端网站优化策略
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和WebP等图片格式替代现有的jpeg和png格式，当页面图片较多时，这一点尤为明显
13、实施图片懒加载-lazyload
