如何网站加载速度提高以获得更多转化-qaq卟言的个人博客

页面加载所需的每一秒钟，网站的跳出率就会上升
网页加载缓慢通常是导致跳出率高的最大原因，跳出率会导致付费广告和其他营销活动的损失，下面说一下几个方法
图像优化
图片占网页总重量的一半到四分之三
1.png
这与您使用的图片质量有关。但是，这并不意味着您必须牺牲图像的质量，因为这对于访问者的用户体验极为重要
使用base64编码代替图片
将图片转换为base64编码字符串inline到页面或css中
这样子减少http的请求次数，并可以放到数据库中，只传输字符串
但是这种方法仅限于图片总数较少，而且图片大小要非常小
也就是各大站点用来做图标的方法之一。如果图片太大字符串会变得很长很长
合并图片sprite(雪碧图)
将多个页面上用到的背景图片合并成一个大的图片在页面中引用
可以有效的较少请求个数，并且适用于相同图片使用的页面
如果过多过大会使生成的图片体积较大，减少请求个数同时也增加了图片大小
不合理拆分将不利于并行加载，所以过大可以结合图片压缩
更多的介绍请移步至我写的这一篇文章CSS切图的实现以及对齐
css、svg、canvas或iconfont代替图片
这里就主要说一下web字体来代替图片的方法就行了，其他的就不过多介绍了
iconfont兼容性好，应用广，目前使用也很广泛
但是由于字体的颜色设置单一，只能用于代替颜色单一的图片，对于色彩复杂的图片，iconfont处理起来比较困难
压缩图像
要实现无损压缩，您可以使用TinyPNG之类的工具来处理新图像
而Crush.pics或Image Optimizer来处理现有图像。通常，您应该确保仅在必要时使用图像，尤其是GIF
延迟加载
为网站速度优化图像时要记住的另一个关键提示是延迟加载
由于网站高度可视性，网站通常具有大量图像资源
如果所有这些资源都一次加载，则自然会降低网站的加载速度
看一下谷歌开发工具的解释
2.png
延迟加载通过仅在用户向下滚动页面时加载必要的图像
3.png
使用CDN（内容交付网络）
CDN通过在世界各地的多个位置缓存内容来提高网站速度
CDN缓存服务器通常比主机或源站更靠近最终用户。请求内容时
请求将发送到CDN服务器，而不是一直发送到托管服务器
后者可能距离用户数千英里并跨越多个自治网络。使用CDN可以大大缩短页面加载时间
极简化CSS和JavaScript文件
极简化代码意味着删除计算机解析和执行代码时不需要的内容，包括代码注释、空格和不必要的分号
这样可以使CSS和JavaScript 文件略小，从而使它们在浏览器中的加载速度更快，占用的带宽更少
极简化本身对于改善速度的作用非常小。但是，将其与其他技巧一起使用会带来更好的网站性能
比如本人写了一个极简化调用CSS和JavaScript 文件的接口
4.png
调用的时候读取文件，然后清除里面的注释跟空格，再把它合并成为一行
5.png
尽可能减少HTTP请求的数量（指的是HTTP2之前的版本）
大多数网页需要浏览器针对页面上的各种文件（包括图像、JavaScript和CSS文件）发出多个HTTP请求
实际上，许多网页需要发送很多这样的请求。针对每个请求，都需要向托管相应资源的服务器来回传输信息
这可能会增加网页的总加载时间。此外，在需要从多处加载资源的情况下
如果其中一个主机出问题，就可能影响网页的加载速度，甚至导致根本无法加载
由于存在这些潜在问题，因此应尽量减少每个页面需要加载的文件总数
此外，速度测试有助于确定哪些HTTP请求花费的时间最多
例如，如果图像导致页面加载缓慢，开发人员可以寻找更快的图像托管解决方案（例如CDN）
使用浏览器HTTP缓存
浏览器缓存是一个临时存储位置，浏览器将静态文件的副本保存在其中
以便能更快加载最近访问的网页，而无需反复请求相同的内容
开发人员可以指示浏览器缓存不会经常更改的网页元素。浏览器缓存的说明位于托管服务器的HTTP响应的标头中
这大大减少了服务器需要传输到浏览器的数据量，从而缩短了经常访问某些页面的用户所需的加载时间
尽量少包含外部脚本
对于需要从其他位置加载的任何脚本化网页元素，例如外部评论系统、CTA按钮或潜在客户生成弹出窗口
每次加载页面时都需要重新加载这些元素。根据脚本大小不同，它们可能会使网页变慢
或者导致网页无法一次全部加载（这称为“内容跳跃”或“布局转换”，对于移动用户而言尤其令人沮丧）
尽量不要使用重定向
重定向是指访问一个网页的访问者被转到另一个页面。重定向会使页面加载时间增加几分之一秒，有时甚至是整秒或数秒
建立性能优化的网站时，每一秒都很重要。重定向有时不可避免，但是若非必要，不要使用它们
6.png

【如何网站加载速度提高以获得更多转化】

随机文章