网站前端首屏加载优化

一.首屏加载慢的原因

• 网络延迟

• 资源太大

• 服务器响应慢

1.网络延迟

首屏优化中网络延迟是一个重要的考虑因素，它直接影响到页面资源的加载速度和用户体验。
影响原因

• 后端服务器性能原因，导致响应速度慢，从而影响了首屏加载速度。

• 网络传输速度慢或网络状况较差，导致资源传输速度慢，从而影响了首屏加载速度。

解决方案

• 使用CDN（内容分发网络）,将静态资源部署到离用户最近的服务器上，用户在访问相关产品时可以就近获取资源，从而降低由于网络传输带来的部分延迟。这种方式在一定程度可以解决大多数因为距离而产生的网络延迟问题。（但值得注意的是，这种方式一般是需要更多的服务器资源，并且需要考虑服务器的负载均衡问题，会导致成本上升，需要综合考虑是否采用）

• preload 资源预加载，提前加载关键资源，减少等待时间。这种方式在前端开发中主要体现为对js,css文件的预加载。

• 使用link标签的rel属性，设置为preload，可以告诉浏览器在解析HTML文档时，提前加载指定的资源。这种方式可以用来加载就是，css等文件。

• prerender页面预渲染，通过预先生成完整的首页HTML文件，在用户访问时直接返回生成好的页面，前端无需再进行渲染，节省了前端渲染的操作，从而减少了首屏优化的时间。

• 使用webpack插件 prerender-spa-plugin来实现，该插件可以在构建时预渲染指定的页面，生成对应的HTML文件，并在用户访问时直接返回预渲染的页面。

2.资源太大

资源太大是首屏加载问题中的一个常见问题，它直接影响到页面的加载速度和用户体验。
影响原因

• 项目中的静态js文件，css文件过大，在首次加载时需要花费较长时间。

• 项目中的图片资源，多媒体资源等过大，在首次加载时需要花费较多的时间，从而影响了首屏加载速度。

• 项目使用的第三方库过大，在首次加载时需要花费较多的时间，从而影响了首屏加载速度。

• 首屏的http请求过多，导致浏览器需要花费较多的时间来处理这些请求，从而影响了首屏加载速度。

解决方案

• chunk方案，一般指的是webpack的代码分割方案，在项目打包时将代码分割为多个chunk,在项目加载时每次只加载需要的chunk,从而减少首次加载的资源大小。

• 懒加载,特别适用于减少页面的初始加载时间和改善用户体验.懒加载是一种按需加载资源的技术，意味着资源只有在需要时才会被加载。这可以减少页面的初始负载，加快页面的显示速度，提升用户体验。

• 在项目中可以使用进入视口（Intersection Observer API）或滚动事件（scroll event）来检测元素是否进入视口，然后加载对应的资源。

• 缓存(强缓存，协商缓存，策略缓存)，使用缓存方式将一些必要的数据存储在本地，当下次访问时就可以通过本地读取，从而减少网络请求，加快页面加载速度。

• SSR(服务端渲染)，通过服务端渲染框架，在服务端将页面的HTML渲染好，在用户端直接传输渲染好的HTML文件，从而减少客户端的数据请求和资源下载的时间。（这种方式也是性能优化的终极方案）

• 局部SSR(C端的一些广告页，活动页)，局部SSR是指在应用的某些部分或页面上实施服务端渲染的技术。与全站SSR不同，局部SSR只针对特定的页面或组件进行服务端渲染，这样可以减少服务器的负载，同时对用户体验和搜索引擎优化（SEO）有积极影响。

• PWA（渐进式网络应用）,通过优化数据请求，首先满足基本功能的正常使用，现将基本数据和功能显示给用户，后续的其他功能可以通过异步的方式进行加载，从而减少首屏加载时间

  
  

二.优化方案

1. 优化图片:推荐webp/jpg格式，不要使用png格式，在需求开发时控制图片的size。

• 使用webp/jpg格式

• WebP格式由Google开发，提供了比JPEG和PNG更好的压缩效率，这意味着在相同质量的情况下，WebP文件的大小可以更小。WebP支持无损压缩和有损压缩，可以根据不同的需求选择最合适的压缩方式。WebP格式支持透明度，这使得它在需要透明背景的场合比JPEG更为合适。

• 确保图片的尺寸适合其在页面中的显示大小，避免使用过大的图片，这样可以减少加载时间和带宽消耗。使用srcset和sizes属性提供不同分辨率的图片，让浏览器根据设备屏幕选择最合适的图片。

• 懒加载（Lazy Loading），对非首屏图片使用懒加载，即在图片进入可视区域时才开始加载，这样可以减少首屏加载时间，提升页面性能。

2. 延迟加载

延迟加载用于推迟非关键资源的加载时间，直到它们被实际需要时才加载。这可以提高应用的初始加载速度和性能，特别是在处理大型应用或页面时。

3. tree+shaking

Tree-shaking 是一个基于 ES Module 规范的 Dead Code Elimination（DCE）技术，它通过静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未被其他模块使用，并将其删除，以此实现打包产物的优化。

4. CDN + OSS

• CDN（内容分发网络）和OSS（对象存储服务）是常用的优化方案，它们可以有效地提高网站的加载速度和性能。

• CDN是一种将网站内容缓存到全球多个节点上的网络服务，通过将内容分发到离用户更近的节点，可以减少用户访问网站的时间，提高网站的加载速度和性能。CDN可以缓存静态资源，如图片、CSS、JavaScript等，也可以缓存动态内容，如API请求等。
  OSS是一种对象存储服务，它可以将文件存储在云端，并提供全球访问能力。OSS可以存储任意类型和大小的文件，包括图片、视频、文档等，并且可以提供高可用性和高可靠性的存储服务。OSS可以与CDN结合使用，将静态资源存储在OSS上，并通过CDN进行分发，从而进一步提高网站的加载速度和性能。

5. 缓存

• 缓存是一种常用的优化方案，它可以将静态资源存储在用户的浏览器中，从而减少对服务器的请求，提高网站的加载速度和性能。

• HTTP缓存：
  通过设置HTTP缓存头，如Cache-Control、Expires等，可以控制浏览器缓存静态资源，如图片、CSS、JavaScript等。当用户访问网站时，浏览器会检查缓存头，如果资源未过期，则直接从缓存中加载资源，而不需要再次向服务器请求。

• Service Worker缓存：
  Service Worker是一种运行在浏览器背后的脚本，它可以拦截网络请求，并缓存资源。当用户访问网站时，Service Worker会拦截请求，并检查缓存中是否有对应的资源。如果有，则直接从缓存中加载资源，而不需要再次向服务器请求。Service Worker还可以根据需要更新缓存，确保用户获取到最新的资源。

• 浏览器缓存：
  浏览器缓存是一种自动的缓存机制，它将用户访问过的网站资源存储在用户的浏览器中，当用户再次访问这些资源时，浏览器会直接从缓存中加载资源，而不需要再次向服务器请求。浏览器缓存可以通过设置HTTP缓存头，如Cache-Control、Expires等，来控制缓存的策略和有效期。

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。