9q13nh 发表于 2024-7-27 08:32:28

九大网站速度优化的最佳意见


    <div style="color: black; text-align: left; margin-bottom: 10px;">
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/6f2259886767483ea33a552704b11ce2~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722603231&amp;x-signature=yHLVhibQsw8Z9lwNAAKMGo3ccSw%3D" style="width: 50%; margin-bottom: 20px;"></div>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">今天<span style="color: black;">咱们</span>就<span style="color: black;">来讲</span>说网站速度优化的最佳<span style="color: black;">意见</span>,以<span style="color: black;">加强</span>速度性能。<span style="color: black;">由于</span>搜索引擎对速度的<span style="color: black;">需要</span>永远不会停止。<span style="color: black;">此刻</span>,百度不是依靠模拟数据,而是<span style="color: black;">运用</span>现场数据来衡量网站速度。<span style="color: black;">经过</span>从用户体验报告数据库中提取信息,百度<span style="color: black;">能够</span>识别普通用户找到您网站的速度。这<span style="color: black;">寓意</span>着,即使您的网站在您的终端闪电般快,<span style="color: black;">运用</span>旧智能手机的<span style="color: black;">拜访</span>者可能会遇到延迟 - 这可能会影响您的速度分数,<span style="color: black;">亦</span>可能影响您的网站排名。<span style="color: black;">倘若</span>你还<span style="color: black;">无</span>,<span style="color: black;">那样</span>是时候加快速度优化了。<span style="color: black;">咱们</span>是<span style="color: black;">按照</span>9大速度优化原则列出最佳<span style="color: black;">意见</span>,<span style="color: black;">而后</span>深入探讨<span style="color: black;">有些</span><span style="color: black;">能够</span>采取的<span style="color: black;">处理</span><span style="color: black;">办法</span>,以进一步优化您的网站速度。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">1、</span>避免登陆页面重定向</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">重定向延迟页面呈现并降低移动站点体验的速度。<span style="color: black;">每一个</span>重定向都会添加额外的超文本传输​​协议(HTTP)请求 - 响应往返,有时还会添加许多额外的往返,以执行域名系统(DNS)<span style="color: black;">查询</span>,传输<span style="color: black;">掌控</span>协议(TCP)握手和传输层安全性(TLS)协商。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">咱们</span>的<span style="color: black;">意见</span>:</strong>一个网站从指定网址到<span style="color: black;">最后</span><span style="color: black;">目的</span>网页的重定向不超过一个。<span style="color: black;">尽可能</span>避免重定向。<span style="color: black;">然则</span>,<span style="color: black;">倘若</span>您需要<span style="color: black;">运用</span>重定向,请<span style="color: black;">按照</span>您的需要<span style="color: black;">选取</span>重定向类型:</p><strong style="color: blue;">301对302重定向</strong>。删除旧内容并重定向到新内容时,<span style="color: black;">或</span>当您<span style="color: black;">无</span>将用户重定向到的备用页面时,请<span style="color: black;">运用</span>永久重定向(301)。在进行短期更改(例如限时优惠)或将用户重定向到特定于设备的URL时,请<span style="color: black;">运用</span>临时重定向(302)。别担心,你不会失去链接权重!<strong style="color: blue;">JavaScript与HTTP重定向。</strong>JavaScript和HTTP重定向之间的<span style="color: black;">重点</span>区别在于HTTP重定向会<span style="color: black;">引起</span>服务器端的延迟,而基于JavaScript的重定向会降低客户端的速度(<span style="color: black;">她们</span>需要下载页面,<span style="color: black;">而后</span>在触发重定向之前解析并执行JavaScript )。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">2、</span>启用压缩</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缩小内容的<span style="color: black;">体积</span>可缩短下载资源所需的时间,减少客户端的数据<span style="color: black;">运用</span>量并缩短页面的呈现时间。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">咱们</span>的建议:</strong>Gzip所有可压缩内容。您<span style="color: black;">能够</span><span style="color: black;">经过</span>HTML5 Boilerplate项目找到大<span style="color: black;">都数</span>服务器的示例配置文件。</p><strong style="color: blue;">优先删除不必要的数据。</strong>压缩很棒,但最佳优化的资源是未发送的资源。<span style="color: black;">定时</span><span style="color: black;">检测</span>您的站点资源并在压缩之前消除不必要的数据以<span style="color: black;">保证</span><span style="color: black;">得到</span>最佳结果。<strong style="color: blue;"><span style="color: black;">思虑</span>Gz​​ip编码的替代<span style="color: black;">方法</span>。</strong><span style="color: black;">倘若</span>你想<span style="color: black;">运用</span>Gzip以外的工具,Brotli是一种无损压缩算法,它结合了LZ77算法的现代变体,霍夫曼编码和二阶上下文建模。它受到所有现代浏览器的支持,并且<span style="color: black;">拥有</span>与当前可用的最佳通用压缩<span style="color: black;">办法</span>相当的压缩比。Brotli压缩速度非常慢并且快速解压缩,<span style="color: black;">因此呢</span>您应该<span style="color: black;">运用</span>最高级别的Brotli + Gzip预压缩静态资源,并<span style="color: black;">运用</span>Brotli在1-4级压缩动态HTML。<strong style="color: blue;">对<span style="color: black;">区别</span>的资源<span style="color: black;">运用</span><span style="color: black;">区别</span>的压缩技术。</strong>压缩<span style="color: black;">能够</span>应用于HTML代码,以及页面所需的<span style="color: black;">各样</span>数字资产,<span style="color: black;">然则</span>您需要将<span style="color: black;">区别</span>的技术和算法应用于Web字体,图像,CSS等,以<span style="color: black;">得到</span>最佳结果。例如,<span style="color: black;">倘若</span>您<span style="color: black;">运用</span>HTTP / 2,<span style="color: black;">那样</span>对HTTP响应头<span style="color: black;">运用</span>HPACK压缩将减少不必要的开销。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">3、</span>改善服务器响应时间</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">快速的服务器响应时间是必要的,53%的移动<span style="color: black;">拜访</span>者将放弃在三秒钟内未加载的页面。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>您想避免中央处理单元(CPU)处理速度慢,缓慢的应用程序<span style="color: black;">规律</span>,慢速数据库<span style="color: black;">查找</span>,慢速路由,慢速框架和慢速库,<span style="color: black;">那样</span>高质量的网站<span style="color: black;">研发</span>是必不可少的。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">咱们</span>的<span style="color: black;">意见</span>:</strong>服务器响应时间应始终<span style="color: black;">小于</span>200毫秒。</p><strong style="color: blue;"><span style="color: black;">测绘</span>服务器响应时间和实际用户<span style="color: black;">测绘</span>(RUM)。</strong><span style="color: black;">运用</span>WebPageTest.org,Pingdom,GTmetrix或Chrome Dev Tools等工具来查明现有的性能问题,并找出<span style="color: black;">引起</span>内容交付流程变慢的<span style="color: black;">原因</span>。请记住,即使您的测试<span style="color: black;">表示</span>网站速度&lt;200毫秒,<span style="color: black;">运用</span>慢速3G的老一代Android用户<span style="color: black;">亦</span>可能会遇到400毫秒RTT和400kbps传输速度。这将对您的网站速度得分产生<span style="color: black;">消极</span>影响。为了改善用户的体验,您必须瞄准:<span style="color: black;">第1</span>个有<span style="color: black;">道理</span>的内容&lt;1s。SpeedIndex值&lt;1250。重复<span style="color: black;">拜访</span>的传输时间间隔(TTI)&lt;5s和&lt;2s。<strong style="color: blue;">优化用户体验。 </strong>配置服务器时:<span style="color: black;">运用</span>HTTP / 2(并记住您的CDN<span style="color: black;">亦</span>支持HTTP / 2)以<span style="color: black;">加强</span>性能。在服务器上启用在线证书状态协议(OCSP)装订,以加速TLS握手。支持IPv6和IPv4。IPv6的邻居<span style="color: black;">发掘</span>(NDP)和路由优化<span style="color: black;">能够</span>使网站速度<span style="color: black;">加强</span>10-15%。添加资源提示以预热连接并<span style="color: black;">经过</span>更快的DNS<span style="color: black;">查询</span>,预连接,预取和预加载来加速交付。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">4、</span>利用浏览器缓存</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>网络获取资源时,客户端和服务器之间需要进行<span style="color: black;">更加多</span>的往返,这<span style="color: black;">寓意</span>着<span style="color: black;">拜访</span>者会有<span style="color: black;">更加多</span>延迟和更高的数据成本。您<span style="color: black;">能够</span><span style="color: black;">经过</span>实施缓存策略来缓解这个缓慢而昂贵的过程,该策略可<span style="color: black;">帮忙</span>客户确定<span style="color: black;">是不是</span>以及何时<span style="color: black;">能够</span>重用过去返回的响应。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最佳缓存策略:</p><span style="color: black;">是不是</span><span style="color: black;">能够</span>缓存资源。谁<span style="color: black;">能够</span>缓存它。缓存多<span style="color: black;">长期</span>。缓存策略到期时<span style="color: black;">怎样</span>有效地重新验证(<span style="color: black;">倘若</span>适用)。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">咱们</span>的<span style="color: black;">意见</span>:</strong>静态资产的最短缓存时间为<span style="color: black;">1星期</span>,最长为一年。</p><strong style="color: blue;"><span style="color: black;">运用</span>Cache-Control消除网络延迟并避免数据<span style="color: black;">花费</span>。 </strong> 缓存<span style="color: black;">掌控</span>指令<span style="color: black;">准许</span>您自动<span style="color: black;">掌控</span>(例如,“无缓存”和“无存储”)以及<span style="color: black;">连续</span>时间(例如,“max-age”,“max-stale”和“mini-fresh”)浏览器<span style="color: black;">能够</span>缓存响应,而无需与服务器通信。<strong style="color: blue;"><span style="color: black;">运用</span>ETag来实现有效的重新验证。</strong> 实体标记(ETag)HTTP标头传递验证令牌,<span style="color: black;">倘若</span>资源自上次请求后未<span style="color: black;">出现</span>更改,则会阻止数据传输。这<span style="color: black;">加强</span>了资源更新<span style="color: black;">检测</span>的效率。<strong style="color: blue;">最佳缓存<span style="color: black;">掌控</span>策略的<span style="color: black;">意见</span>。</strong>创建了一个<span style="color: black;">名单</span>和流程图,可<span style="color: black;">帮忙</span>您在尽可能长的时间内缓存尽可能多的响应,并为<span style="color: black;">每一个</span>响应<span style="color: black;">供给</span>验证令牌。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">经验法则是应该在很短的时间内缓存可变(<span style="color: black;">就可</span>能更改)的资源,而应该无限期地缓存不可变(即静态)资源以避免重新验证。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">5、</span>缩小HTML,CSS和JavaScript</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缩小<span style="color: black;">能够</span>消除<span style="color: black;">供给</span>给<span style="color: black;">拜访</span>者的资源中的冗余数据,并且<span style="color: black;">能够</span>对整体网站速度和性能产生巨大影响。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">咱们</span>的<span style="color: black;">意见</span>:</strong>您的网络资源中<span style="color: black;">无</span>冗余数据(例如,HTML代码中的注释或空格符号,CSS中的重复样式或不必要的图像元数据)。</p><strong style="color: blue;">与压缩<span style="color: black;">一块</span><span style="color: black;">运用</span>缩小。</strong>乍一看,缩小听起来像压缩,但它更精细。压缩算法非常适合缩小页面<span style="color: black;">体积</span>,但大<span style="color: black;">都数</span>人不<span style="color: black;">晓得</span>从CSS(/ * ... * /),HTML()和JavaScript(// ...)注释中删除不必要的代码,折叠级联样式表(CSS)规则或执行许多其他特定于内容的优化。<strong style="color: blue;">将缩小应用于其他资源类型。</strong>您<span style="color: black;">能够</span>缩小<span style="color: black;">不仅</span>是基于文本的资源,如超文本标记语言(HTML),CSS和JavaScript。图像,视频和其他类型的内容<span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">按照</span>您的需要缩小。例如,图像<span style="color: black;">包括</span>自己的元数据形式和<span style="color: black;">各样</span>有效负载,<span style="color: black;">倘若</span>您要在照片共享网站上发布它们,可能需要<span style="color: black;">保存</span>这些形式。<strong style="color: blue;">自动化缩小。</strong><span style="color: black;">运用</span>工具<span style="color: black;">能够</span>减轻网站上数千个(<span style="color: black;">倘若</span>不是数百万个)<span style="color: black;">区别</span>资源的<span style="color: black;">包袱</span>。Google的PageSpeed模块自动执行此操作,并且<span style="color: black;">能够</span>与Apache或Nginx Web服务器集成。<span style="color: black;">或</span>,您<span style="color: black;">能够</span><span style="color: black;">运用</span>第三方工具,如HTMLMinifier(用于HTML),CSSNano或CSSO(用于CSS)和UglifyJS(用于JavaScript)。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">6、</span>优化图像</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">照片</span>平均占网页<span style="color: black;">体积</span>的60%,而大<span style="color: black;">照片</span>可能会使您的网站速度变慢。优化图像有助于减小文件<span style="color: black;">体积</span>而不会显着影响视觉质量。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">咱们</span>的<span style="color: black;">意见</span>: </strong><span style="color: black;">保证</span>您的网站和<span style="color: black;">照片</span><span style="color: black;">拥有</span>响应性。<span style="color: black;">运用</span>图像的相对<span style="color: black;">体积</span>,<span style="color: black;">按照</span>设备特征指定<span style="color: black;">区别</span>的图像时<span style="color: black;">运用</span><span style="color: black;">照片</span>元素,并<span style="color: black;">运用</span>img元素中的srcset 属性和x描述符<span style="color: black;">通告</span>浏览器何时<span style="color: black;">运用</span>特定图像。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">请遵循此常用优化技术的<span style="color: black;">名单</span>:</p>消除不必要的图像资源。利用CSS3替换图像。<span style="color: black;">运用</span>Web字体而不是编码图像中的文本。尽可能<span style="color: black;">运用</span>矢量格式。缩小和压缩可缩放矢量图形(SVG)资产以减小其<span style="color: black;">体积</span>。<span style="color: black;">选取</span>最佳光栅格式(<span style="color: black;">首要</span><span style="color: black;">选取</span>正确的通用格式:GIF,PNG或JPEG,但<span style="color: black;">亦</span><span style="color: black;">思虑</span>为现代客户添加图像格式WebP和JPEG扩展范围(XR)资源。尝试最佳质量设置。请记住,所有图像都<span style="color: black;">无</span>单一的最佳格式或“质量设置”:特定压缩器和图像内容的每种组合都会产生独特的输出。在服务器上<span style="color: black;">调节</span><span style="color: black;">体积</span>并<span style="color: black;">供给</span>缩放到其<span style="color: black;">表示</span><span style="color: black;">体积</span>的图像。删除元数据。<span style="color: black;">运用</span>srcset参数<span style="color: black;">加强</span>img标签,以<span style="color: black;">得到</span>高每英寸点数(DPI)设备。<span style="color: black;">按照</span>设备特性(如设备<span style="color: black;">体积</span>,设备分辨率,方向等),<span style="color: black;">运用</span>picture元素指定<span style="color: black;">区别</span>的图像。仔细<span style="color: black;">运用</span>图像喷精技术。<span style="color: black;">运用</span>HTTP / 2,最好加载单个图像。<span style="color: black;">思虑</span>延迟加载非关键图像。缓存图像资源。自动化您的图像优化过程。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在图像优化方面,<span style="color: black;">无</span>一种“最佳”的<span style="color: black;">办法</span><span style="color: black;">能够</span>做到这一点。许多技术<span style="color: black;">能够</span>减小图像的<span style="color: black;">体积</span>,但找到图像的最佳设置需要仔细<span style="color: black;">思虑</span>格式功能,编码数据的内容,质量,像素尺寸等。<span style="color: black;">相关</span><span style="color: black;">更加多</span>提示,请咨询在线客服。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">7、</span>优化CSS</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">浏览器在呈现页面时<span style="color: black;">一般</span>遵循以下五个<span style="color: black;">过程</span>:</p>处理HTML标记并构建文档对象模型(DOM)树。处理CSS标记并构建CSS对象模型(CSSOM)树。将DOM和CSSOM组合到渲染树中。在渲染树上运行布局以计算<span style="color: black;">每一个</span>节点的几何。将各个节点绘制到屏幕上。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">换句话说,页面需要先处理CSS<span style="color: black;">才可</span>呈现。当您的CSS<span style="color: black;">运用</span>渲染阻止<span style="color: black;">外边</span>样式表膨胀时,此过程<span style="color: black;">一般</span>需要多次往返,这将延迟首次渲染的时间。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">咱们</span>的<span style="color: black;">意见</span>:</strong>将小CSS直接内联到HTML文档中以消除小的<span style="color: black;">外边</span>CSS资源。</p><strong style="color: blue;">避免内联大型CSS文件。</strong>虽然内联小型CSS<span style="color: black;">能够</span>加快浏览器呈现页面所需的时间,但内联大型CSS文件会<span style="color: black;">增多</span>首屏CSS的<span style="color: black;">体积</span>,<span style="color: black;">实质</span>上会缩短渲染时间。<strong style="color: blue;">避免内联CSS属性</strong>。<span style="color: black;">一样</span>,在HTML元素上内联CSS属性<span style="color: black;">一般</span>会<span style="color: black;">引起</span>不必要的代码重复,并且默认<span style="color: black;">状况</span>下会<span style="color: black;">运用</span>内容安全策略阻止它。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">8、</span>优先<span style="color: black;">思虑</span>可见内容</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>您的首屏内容超过了初始拥塞窗口(<span style="color: black;">一般</span>压缩为14.6kB),<span style="color: black;">那样</span>加载您的内容将需要多次往返<span style="color: black;">才可</span>加载和呈现您的内容。这可能<span style="color: black;">引起</span>高延迟和页面加载的显着延迟,尤其是<span style="color: black;">针对</span>移动用户。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">咱们</span>的<span style="color: black;">意见</span>:</strong>将重叠内容的<span style="color: black;">体积</span>减少到不超过14kB(压缩)。</p>限制渲染首屏内容所需的数据<span style="color: black;">体积</span>。<span style="color: black;">倘若</span>你<span style="color: black;">始终</span>在跟进,你应该<span style="color: black;">已然</span><span style="color: black;">运用</span>资源缩小,图像优化,压缩和所有其他提示和技巧来减少你的首要内容的<span style="color: black;">体积</span>。组织HTML标记以立即呈现首屏内容。更改HTML标记结构<span style="color: black;">能够</span>大大加快您的首屏内容加载和呈现的速度 - 但您更改的内容会因页面而异。例如,可能需要将CSS拆分为<span style="color: black;">区别</span>的部分:内联部分负责样式化内容的上部部分,样式表推迟剩余部分。<span style="color: black;">或</span>您可能需要<span style="color: black;">首要</span>更改页面上加载的<span style="color: black;">次序</span>(例如,小部件之前的<span style="color: black;">重点</span>内容)。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">9、</span>删除阻止渲染的JavaScript</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">您<span style="color: black;">能够</span>从第七点回忆一下,在浏览器能够呈现页面之前,页面需要<span style="color: black;">经过</span>解析HTML来构建其DOM。好吧,每次解析器遇到JavaScript时,它必须先停止并执行这个新脚本,<span style="color: black;">而后</span><span style="color: black;">才可</span>继续构建DOM树。在<span style="color: black;">外边</span>脚本的<span style="color: black;">状况</span>下,这种延迟更加<span style="color: black;">显著</span> - 它<span style="color: black;">能够</span>为渲染过程<span style="color: black;">增多</span>数万毫秒。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">咱们</span>的<span style="color: black;">意见</span>:</strong>在首屏内容中删除所有阻止JavaScript,尤其是<span style="color: black;">外边</span>脚本。</p><strong style="color: blue;">使JavaScript非呈现阻止。</strong>将脚本标记标记为异步将告诉浏览器在等待加载和执行脚本时不阻止DOM构造。<span style="color: black;">然则</span>,<span style="color: black;">倘若</span>您<span style="color: black;">晓得</span>在解析/构造DOM树时不需要更改DOM树中的任何内容,则应该只执行此操作。<strong style="color: blue;">内联关键脚本并推迟非关键脚本。</strong>应该内联呈现页面内容所必需的脚本以避免额外的网络请求。这些应该尽可能小,以便快速执行并<span style="color: black;">供给</span>良好的性能。非关键脚本应该异步并延迟到<span style="color: black;">第1</span>次渲染之后。请记住,不<span style="color: black;">保准</span>异步脚本按指定<span style="color: black;">次序</span>执行。<strong style="color: blue;">将第三方JavaScript库推迟到折叠之后。</strong><span style="color: black;">加强</span>交互性或添加动画或其他效果(例如,JQuery)的JavaScript库<span style="color: black;">一般</span>不需要在首屏上呈现。只要有可能,请使这些JavaScript元素异步并将它们推迟到页面中。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">南京SEO结论:测试速度更新的结果</strong></p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">移动网站在SERP中的位置与其平均优化分数之间的<span style="color: black;">关联</span>性<span style="color: black;">已然</span>非常高,但网站的<span style="color: black;">第1</span>个内容绘制(FCP)和DOM内容加载(DCL)指标对你的网站位置几乎<span style="color: black;">无</span>影响。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">移动搜索引擎结果页面(SERP)中优化得分与位置之间的<span style="color: black;">关联</span>性较高,而FCP / DCL与位置之间的<span style="color: black;">关联</span>性较低。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这告诉<span style="color: black;">咱们</span>的是,对网站的速度优化<span style="color: black;">需求</span>越来越高,<span style="color: black;">做为</span>SEO优化人员<span style="color: black;">不可</span>自满,<span style="color: black;">倘若</span>你不进行<span style="color: black;">调节</span>和改进,你就有可能被竞争对手抛在脑后。</p>
    </div>




5ep9lzv 发表于 2024-8-22 15:16:19

外贸B2B平台有哪些?

lq1614 发表于 2024-8-24 08:15:52

同意、说得对、没错、我也是这么想的等。

流星的美 发表于 2024-8-25 03:37:52

你的留言真是温暖如春,让我感受到了无尽的支持与鼓励。

nykek5i 发表于 2024-10-28 14:29:40

网站建设seio论坛http://www.fok120.com/

nqkk58 发表于 2024-11-13 17:42:14

你的见解真是独到,让我受益匪浅。
页: [1]
查看完整版本: 九大网站速度优化的最佳意见