面试官：处理首页加载速度除了用户体验还有什么好处？

并没有什么luck
175 阅读6分钟

今天在面试的时候遇到的一个问题，常说解决首页白屏和关注加载速度到底有什么用？水群常看到的提速究竟如何实现？首先我们需要知道提速的目的：

  1. 用户体验
  2. SEO优化

SEO

第一点很好理解，第二点的SEO（搜索引擎优化），我们首先需要知道SEO是为了提升网页在搜索引擎的排行，加载速度是非常影响搜索引擎排行的，他主要取决于搜索引擎在一定时间内通过通用型网络爬虫抓取到的该网页的页面总数。如果页面的加载速度提上来了也就说明爬虫在该时间内抓取到的页面更多。而根据google提出的最新搜索引擎优化策略，主要有以下几点进行SEO：

  1. 关键字优化：根据目标受众和搜索意图进行关键字研究，并将关键字合理地应用在网页的标题、元描述、正文内容以及其他标签中，一般包括核心关键词、常用关键词、长尾关键词。
  2. 高质量内容：流量。
  3. 内部链接：使用内部链接将网页与站点的其他相关内容相连接，这有助于搜索引擎理解网站的结构和关联性。
  4. 外部链接：争取其他高质量网站链接到你的网站，这有助于提高网站的权威性和排名。
  5. 提高网页加载速度：优化网页加载速度对于SEO也非常重要，因为搜索引擎通常会对加载速度较慢的网页进行降权处理。
  6. 用户体验优化：提供良好的用户体验，包括易于导航、清晰的页面结构、易于阅读的内容等，这有助于提高用户满意度和留存率。
  7. 使用CDN：主要分为地理上和内存上对SEO的影响，后文将进一步描述。

然而，内部链接和外部链接可能会影响页面加载速度变慢和页面逻辑混乱的问题。

怎么做？

CDN优化

CDN的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快的速度获取数据，即网络访问第一跳，其优化的本质主要通过以下几点实现：

  1. 边缘节点部署：主要考虑地理因素影响；CDN提供商在全球范围内建立了多个边缘节点，这些节点位于不同的地理位置，并与互联网主干网络相连。边缘节点通常位于距离用户较近的地方，可以覆盖更广泛的地理区域。
  2. 静态内容缓存：CDN会将网站的静态内容（如图片、样式表、脚本文件）缓存在边缘节点上。当用户请求访问网站时，CDN会根据用户的位置选择最近的边缘节点，并从该节点提供缓存的内容。这样，用户可以更快地获取内容，而无需等待从原始服务器获取。
  3. 动态内容加速：除了静态内容，CDN还可以加速动态内容。当用户请求动态内容时，CDN可以使用各种技术（如负载均衡、内容缓存和请求重定向）将请求转发到最适合处理的服务器。这可以减轻原始服务器的负载，提高动态内容的响应速度。
  4. 智能路由和负载均衡：CDN使用智能路由和负载均衡算法，根据用户的位置、网络状况和服务器负载等因素，选择最佳的边缘节点来提供内容。这确保用户能够从最近且性能良好的服务器获取内容，提高响应速度和用户体验。

CDN咋用啊

扯到这里不得不扯到代码的应用上，这里以vue为例子，在项目遇到大型的库，如elementui、bootstrap、axios、vuex等库时，我们可以通过vue.config.js中配置cdn，在打包时忽略这部分库，以减小打包体积，通过CDN缓存加速，提高响应时间和速度。下面是一个eg：

const cdn = {
    // 忽略打包的第三方库
    externals: {
      vue: 'Vue',
      "element-ui": "ELEMENT",
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      moment: "moment",
      echarts: "echarts"
    },
  
    // 通过cdn方式使用
    js: [
      'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
      'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
      'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
      'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
      'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
      'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js',
      "https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.2/index.js",
    ],
  
    css: ["https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css"],
  }

module.exports = {
    publicPath: '/CRM/dist/',
    // publicPath: './',
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            return args
          })
          config.plugins.delete('prefetch')
    },
    //打包忽略第三方库
    configureWebpack: { 
        externals: cdn.externals
    },
}

通过上述CDN配置，客户端在请求这些库时，会直接请求在CDN服务器上托管的这部分文件而不是直接请求服务器，既减轻了服务器负担也提高了速度

SEO与懒加载

懒加载（Lazy Loading）是一种优化技术，用于延迟加载网页或应用程序中的资源，直到它们真正需要使用时再进行加载。懒加载的使用可以带来一些利益，但也存在一些潜在的弊端。以下是懒加载的一些利与弊：

利：

  1. 加快初始加载速度：懒加载可以减少初始页面或应用程序加载所需的资源量。只有当用户滚动到需要显示的内容时，才会加载相应的资源。这可以减少初始加载时间并提高页面的响应速度。
  2. 减少带宽使用：通过懒加载，可以仅在需要时加载资源，而不是一次性加载整个页面的所有内容。这可以减少网络带宽的使用，特别是对于包含大量媒体元素（如图像或视频）的页面。
  3. 节省服务器资源：懒加载可以减轻服务器的负载，因为它只在用户需要时提供所需的资源。这可以降低服务器的资源消耗并提高整体性能。
  4. 改善用户体验：懒加载可以提供更好的用户体验，因为页面会更快地显示可见内容。用户不需要等待所有资源加载完成才能开始浏览页面，而是可以立即查看和与页面交互。

弊：

  1. 可能导致延迟加载：如果懒加载的实现不当，可能会导致延迟加载的问题。当用户滚动到需要加载的内容时，如果加载过程太慢，可能会出现闪烁或延迟的情况，影响用户体验。
  2. 不利于SEO：懒加载可能对搜索引擎优化（SEO）产生负面影响。搜索引擎爬虫可能无法获取懒加载的内容，从而影响页面的索引和排名。
  3. 对无障碍性的影响：懒加载可能对使用辅助技术的用户造成问题。屏幕阅读器可能无法正确识别和读取懒加载的内容，导致无法访问或使用。
avatar
文章
阅读
粉丝