速度优化

我们一直在讨论市场调研的重要性,希望将新产品推广给合适的目标受众,希望精准定位目标受众在搜索时真正使用的关键词。 一旦这些目标受众访问了我们的网站,我们还会优化文案、调整网站设计,甚至调整整个销售漏斗

我们一直在讨论市场调研的重要性,希望将新产品推广给合适的目标受众,希望精准定位目标受众在搜索时真正使用的关键词。

一旦这些目标受众访问了我们的网站,我们还会优化文案、调整网站设计,甚至调整整个销售漏斗的各个环节。但如果因为你的页面加载时间太长,导致流量流失与交易根本无法到账怎么办?页面速度优化在现在慢慢变得十分重要。它关乎每一位访问你网站的用户和搜索引擎爬虫的满意度,因此你无法回避它。无论你的托管服务器或VPS多么出色,无论你投入多少资金进行升级,都无法解决网站臃肿的问题。

什么是页面速度?

页面速度指的是浏览器从服务器请求页面加载到页面完全加载完成所需的时间。 

你可能会听到这样的说法:即使页面其他部分尚未加载,也要确保屏幕快速渲染,这样才能让用户满意。你还会听到这样的说法:只要首屏内容加载完毕,页面不会在加载其他部分时跳动,异步加载速度慢一些也没关系。我觉得这是误导。

没错,让用户满意是首要目标,但做好页面加载还能带来长远而深远的益处,帮你省钱甚至赚钱。花招并不能减轻服务器的负载和压力。作弊也无法欺骗搜索引擎爬虫(因为它还没有……)。它也不会减少你的带宽,更不会延长你的 CDN 配额的使用时间。

优化页面加载时间的总体概念非常简单,基本上可以归结为以下几个因素:

  • 向服务器请求最少数量的物品;
  • 尽可能缩小这些物品的尺寸;
  • 告诉浏览器记住它们加载的内容;
  • 充分利用服务器资源。

这是该概念和目标的最基本版本。我们还会讨论一些新的技巧,但如果你掌握了这个概念,你的优化就能毫无疑问地跻身互联网前 10%。

为什么要优化页面速度?

搜索引擎会衡量你网站的每一项指标。它们利用这些指标来判断哪个网站质量最高,哪个网站最不可能是伪装成正规网站的垃圾链接发送者或SEO网站。猜猜那些不关心用户体验的劣质网站有什么特点?页面加载速度极慢,非常糟糕。

对于高流量、高竞争的关键词排名来说,页面加载速度并不是决定你在搜索引擎结果页面(SERP)中排名的关键因素。但是,猜猜那些规模庞大、根基稳固的网站,如果能将全站页面加载时间缩短500毫秒会发生什么?他们会立即发现,那些他们自己没有优化过的长尾关键词的流量会大幅提升。

由于绝大多数搜索都是100%独一无二的,以前从未有人输入过,以后可能也不会再有人输入,因此根本无法对这些搜索进行关键词研究。然而,这却是流量蛋糕中最大的一块。它是扣除你那点可怜的、经过关键词研究的部分之后剩下的部分。要想赢得流量,就要在各个方面都比其他人做得更好;而对于长尾关键词来说,很多时候都取决于页面加载速度。

优化页面速度前的测试

如果您在开始之前不测试页面加载速度,您将无法了解自己取得了怎样的进展。

测试服务器区域访问速度

ping.pe

测试网站访问速度

google page speed test

有一些方法可以提高网站的页面加载速度,而且不需要你懂任何 HTML、CSS、PHP 或 JS 的知识。我们先来谈谈这些方法。我们需要假设你知道如何使用 FTP 客户端,或者至少可以通过浏览器登录服务器并上传一些文件。

减少 HTTP 请求

HTTP 请求一次只能执行一个。浏览器每次请求都需要打开和关闭连接,因此尽可能减少请求数量是明智之举。以下是如何减少请求数量的方法。

凡是能用 CSS 实现的图片效果,都用 CSS 实现。

有些设计师会从 Photoshop 里抠出一张渐变图,然后应用 `repeat-x` 属性。这当然很酷,但他们对很多不同的元素都这么做。既然可以直接用 CSS 创建渐变或按钮,何必呢?如果能把图片阴影转换成 CSS 阴影,那就去做。

合并 CSS 文件和 JS 文件。

组织结构固然重要,但你不需要创建 header.css、footer.css、buttons.css、forms.css 等等这些文件。也不要创建一个 style.css 文件然后使用 import 导入所有样式。将所有样式复制粘贴到同一个 style.css 文件中,并在文件顶部创建一个目录。JavaScript 和 jQuery 也一样。

检查一下你的字体使用情况

Google Fonts 太棒了,以至于主题设计师们恨不得每个主题都用上五六种字体。如果你非要用,那就减少到两种,最好只用一种。更好的办法是,如果可以的话,把它们托管在自己的服务器上。更理想的做法是,直接使用系统字体,这样就完全不用加载任何东西了。只要确保你的主题支持 Windows、macOS、Linux 以及其他所有系统,用户的电脑就会帮你完成所有工作。

使用 Perfmatters 插件

…P简单使用指南..

缩小页面大小

这样一来,你现在只需要加载 30 个 HTTP 请求,而不是之前的 100 个!速度确实快了,但仍然很慢,因为你要求访客每次页面加载 5 MB 的数据。这太荒谬了!让我们大幅减少页面大小。

将所有非关键图像保存并压缩为 JPG 格式。

JPG 文件格式包含的信息量恰到好处,既能保证图像在网页上清晰显示,又不会占用过多空间。如果您尝试将 JPG 文件分发给他人打印并离线保存,打印出来的图像会很模糊。很多时候,文本的渲染效果也会很糟糕。如果您需要图像质量但不需要完美无瑕,请使用 JPG 格式。如果图像仅用于展示,且不需要清晰的元素,则可以使用 JPG 格式,然后使用TinyJPG 等工具进一步压缩图像,同时保持图像质量。

将小图片保存为 GIF 格式。

GIF 格式本身就是一种最大程度压缩的破坏性压缩。大型 GIF 图片或小型但复杂的图片在这种格式下会显得模糊。请将小型且简单的图片保存为 GIF 格式。尽可能使用 GIF,但如果视觉效果很重要,就不要过度使用。如果您有很多 GIF 图片,建议您制作 CSS 精灵图!

保存并压缩关键图像为PNG格式

对于需要清晰呈现的logo、带有文字的图片以及任何需要锐利度的图像,请使用PNG格式。然后前往TinyPNG进行压缩。使用PNG格式展示您品牌的重要图像。

使用正确的分辨率

不要强迫用户加载 800×600 分辨率的图片,而你实际显示的却是 200×150 的尺寸。调整图片大小并压缩,可以大幅节省资源。在响应式网站上显示图片时,最佳且最简单的方法是找到一个介于桌面端和移动端之间的合适尺寸。目前移动端的加载速度较慢,根据视口大小提供不同尺寸的图片过于复杂,因此不建议轻易尝试。

压缩你的文本文件

通过降低 CSS 的优先级、尽可能重用元素、使用简写代码来优化 CSS 文件,然后压缩 CSS 文件和 JS 文件。从 CSS、JS 和 HTML 文件中移除所有未使用的代码。

优化数据库性能

如果您设计的是一个只有 5 页的企业落地页,则不需要数据库。但如果您的网站是一个内容杂志或拥有 10,000 件商品的电商网站,则数据库必不可少。我们该怎么办?注意: 在运行任何查询之前,务必备份您的数据库!

看看你的WordPress后台。看到那20万条垃圾评论和未通过审核的评论了吗?看到每篇文章都有20个修改版本和草稿了吗?你原本计划使用50个分类,结果只用了10个?你甚至都没用标签,却设置了100个?你是不是还有一些闲置的用户账号?把这些都清理掉。从多余的账号,到分类法,再到装满垃圾的回收站,统统删掉。

使用 WP-Optimize

…清理数据库文件…

优先渲染首屏内容

用户感知到的页面加载速度与搜索引擎的衡量指标同样重要。确保访客在访问网站后能尽快获得完整的体验。通过优先显示首屏内容,用户可以在后台加载其他内容的同时开始浏览网站。

准备一个备用系统字体,可以在网页字体加载之前预加载。

最令人恼火的是网站加载完毕后文字却还没显示出来,因为字体是最后加载的元素之一。通过在 CSS 文件中定义系统字体,你可以让用户的计算机在你的字体加载完成之前,使用 Helvetica 或 Arial 之类的字体来显示文本,从而立即让文字显示在屏幕上。

内联正确的 CSS 元素

通常情况下,你不应该将 CSS 直接内联到 HTML 文档中。然而,对于首屏元素来说,这样做是值得的。通过将 CSS 内联到 HTML 的 `<head>` 标签内,你可以确保它与 HTML 文档一起加载,而无需等待 CSS 文件下载和读取。

将阻塞渲染的 JavaScript 代码移至页脚

如果你的网页设计中存在关键的 JavaScript 或 jQuery 代码,将其放在 HTML 的 `<head>` 标签内可能会阻塞首屏区域的渲染。建议将其移至 `<footer>` 标签内,以便页面顶部内容能够正常加载。用户不太可能在 JavaScript 代码加载完成之前进行任何交互,但他们可以更快地看到想要交互的内容。

使用缓存插件

首先要说明的是,您应该始终比较缓存前后的效果。根据您的服务器、地理位置、网站规模和其他因素,缓存实际上可能会减慢加载速度。这种情况虽然罕见,但还是需要注意!否则,请做好使用缓存的准备……

启用浏览器缓存

如果访客的浏览器缓存了内容,那么在刷新页面或再次浏览时,这些内容会立即加载。这当然是你想要的效果,但也要注意。不要将缓存过期时间设置得太长,否则用户之后将看不到文件的更新。以下是一个不错的参考示例……

启用服务器端缓存

您的服务器可以预处理您的网站,并将页面的静态版本缓存起来以供访问。这包括日期、评论、文章等动态对象。您可以想象这能节省多少加载时间。大多数内容管理系统 (CMS) 都自带优秀的缓存插件。如果您使用缓存插件,请确保它有持续的维护和更新。

使用 WP Rocket 插件

…wpr介绍…

使用 Litespeed Cache 缓存插件

…lsc介绍…

使用CDN内容分发网络

CDN 本质上就是一组分布在全球各地的高性能服务器。并非所有访客都位于主服务器附近,CDN 可以选择最佳服务器位置来提供文件,从而缩短用户浏览器接收文件的时间。节点、数据中心越多、距离越远,网站速度就越快。我用过的众多 CDN 中,Cloudflare是最方便与实惠的。

Cloudflare

…CF介绍…

升级服务器

升级共享服务器使用资源

向你的托管服务器商家了解当前套餐的具体LVE(使用限制)。

使用Redis缓存

升级到更高等级套餐

迁移到VPS

之所以需要VPS或独立服务器,是因为你需要拥有自己的资源。就像你不会想把实体店面与他人共享一样,拥有专属的资源意味着你的网站性能将保持稳定,并能应对任何流量高峰。

自己做网络环境,运维,检测

使用高效代码

并非人人都会编程,也不应该强迫每个人都去编程。但有些网页设计师为了炫耀自己精美的前端设计,会草率地搭建后端。这类主题你应该尽量避免,不要被视觉效果所迷惑。首先选择一个针对快速加载进行优化的主题GeneratePress,然后根据自己的喜好进行视觉上的增强。

减少插件依赖。它们会引入大量额外的 CSS 和 JS 文件,如果不费力地将它们整合起来,会造成很大的麻烦。有些插件可能只在一个页面上使用,比如联系表单插件,却强制每个页面都加载它们的文件。赶紧卸载它们!你知道那些大家都喜欢的社交插件吗?看看你的分析数据,它们真的能带来用户互动吗?如果不能,那就精简它们。例如,Facebook 小部件就需要大约 20 个额外的 HTTP 请求。我个人推荐是直接编程,并将所有代码放在 Code Snippet 管理。

Join Our Email List

Sign up to receive the latest articles right in your inbox.

email address

*Replace this mock form with your preferred form plugin

Don't miss out on our latest articles

Sign up to receive the latest articles right in your inbox.