优化网页加载速度的几个方法

八秒定律是在互联网领域存在的一个定律，即指用户访问一个网站时，如果等待网页打开的时间超过8秒，会有超过70%的用户放弃等待。如果网页加载时间超过4秒，约有四分之一的人会放弃打开该网页。如果网页加载时间超过10秒，50%的移动用户会放弃该网页，约五分之三的人不会再返回该网站。所以说网页加载速度是非常值得重视的！！

GTmetrix

简介

今天就给大家分享下本博使用的网页优化方案，做完这些后对页面加载速度的提升是会有一些效果，但是不会太明显，最主要的其实还是要看服务器！！

Waterfall

从上图可以看到本博客首页加载的全部资源不多(网页、一个JS、一个CSS、一言数据、两个网站字体、百度统计与百度推送、网站图标)。圈圈里面几个其实是可以去掉的，去掉后，整个页面大小应该不会超过100KB！！可这些都是美化博客的资源，外观也是很重要的一部分，所以说也不能只为了速度就舍弃其他全部东西！

方案

其实方法是有很多的，这里只分享下本博客用过的方法！！

instant.page

用户在点击链接前将鼠标悬停在该链接上到点击链接这个时间其实是有延迟的，instant.page会在用户点击链接之前就预加载页面，使页面加载速度变得更快！看到要鼠标悬停才预加载，那移动端是否就会没效果了呢？？当然不，移动端也是有效果的，从你触摸屏幕到松手时也是有一定的延迟的，instant.page将会在你手指触摸到链接的时候就预加载页面！！

使用方法

  • 将此HTML代码段放在</body>之前：
<script src="//instant.page/2.0.1" type="module" defer integrity="sha384-4Duao6N1ACKAViTLji8I/8e8H5Po/i/04h4rS5f9fQD6bXBBZhqv5am3/Bf/xalr"></script>

或把该JS下载并存放在你的服务器

<script src="存放路径/名称.js" type="module"></script>
  • 效果

instant.page

压缩HTML/CSS/JS

压缩HTML/CSS/JS

  • 这个很简单就不在这里详细说了，GTmetrix这个网站检测完网站性能后如果有优化项会给出优化版本的文件供你下载，当然你也可以到各大搜索引擎找找相关的方法

  • 相关的可以搜索下HTML可选开始标签与可选结束标签，HTML可选标签都是可以删掉的

  • 尽量把CSS、通用的JS分别合并成一个文件，可以看见本博客就是只有一个JS与一个CSS的

图片懒加载

由于本博客已使用图片懒加载，这里演示的是本人一个测试站未使用懒加载，服务器是一样的

  • 使用前

lazyloadno

  • 使用后

lazyloaded

前些天发布了一篇长图文，载入速度极慢！所以给博客加了图片懒加载，可以看到前后对比效果相当明显！！

使用方法

  • 直接引用该JS
<script src="存放路径/lazysizes.min.js" async=""></script>

最简单的只需要你在img标签中把src变更为data-src，添加class="lazyload"就可以了，目前lazysizes支持的几种懒加载方式：

  • 默认
<!-- non-responsive: -->
<img data-src="image.jpg" class="lazyload" />
  • 响应式
<!-- responsive example with automatic sizes calculation: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />
  • iframe
<!-- iframe example -->
<iframe frameborder="0"
	class="lazyload"
    allowfullscreen=""
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>