网站速度优化:通过14个简单步骤使您的网站保持快速
以下是一些你不应该错过的网站加速技术。
如果你的网站在3秒内无法加载完成,你可能会失去潜在的收入,错失更多的点击率。同样,如果不够安全,你会给黑客提供机会,为你的网站带来声誉和业务的损失。
因此,为了更好和安全的用户体验,我们无法回避安全和性能调整。
所以,当我们谈论性能优化时,我们会听到一些方法,如启用压缩,缩小文件大小,缓存,使用轻量级主题,保持插件最少等。
这些方法很好,但在本文中我们列出了更多你可以应用在任何平台上的方法,如WordPress,Joomla,Magento,Drupal,Node.js等。
让我们看看你已经做了什么和没有做的。
良好的主机套餐
有时候你唯一的错误就是选择了一个糟糕的网络主机和一个共享主机计划。
但就我个人而言,我认为这不是坏主机的问题,而主要是因为超便宜的主机订阅。
当你每月的主机费用比一杯咖啡还便宜时,就有问题了。
把共享主机看作是一个没人想上车但最终还是上车了的拥挤巴士,因为“有吸引力”的票价。
共享主机最吸引人的事情是首次折扣和有多少网站共享一个服务器的不透明度。
让我告诉你,这些数字通常是成百上千的。
这导致频繁出现性能瓶颈,这样的网站在谷歌搜索的第一页都见不到。
总结一下,对于重要的项目,切换到VPS或专用服务器。
内容分发网络
内容分发网络(CDN)是在你选择一个良好的网络主机套餐后的第二步。
这对于拥有全球受众的任何人都是必需的。原因是你无法在任何地方都设置网站;它始终位于一个位置。因此,当你的网站位于美国纽约时,有一位日本用户试图访问你的网站,距离就会成为一个问题。
然而,订阅一个像Cloudflare这样的CDN可以解决这个本地化问题。CDN会在其服务器网络上托管你的网站的副本,并从最近的服务器提供请求。这减少了位于大洋彼岸的单个中央服务器的负载。
此外,根据CDN的不同,你可能会享受到比普通网络主机更高的安全性。
启用IPv6
IPv6比IPv4更快。在欧洲,IPv6的改进达到了40%,而通过IPv6访问的速度提高了10-15%。
请看全球IPv6采用率图,
大约42%的用户通过IPv6连接到Google,但只有21.2% of IPv6-enabled个网站。
有趣的是,Cloudflare发现启用IPv6的网页比其IPv4版本加载速度快27%。
所以,你的网站有IPv6吗?不确定!你可以参考链接了解。
如果没有,这是你可以做的。
大多数CDN提供商,如Cloudflare、Incapsula、CacheFly、AKAMAI都提供IPv6。你可以在控制面板中启用它们。
如果没有使用云flare之类的服务,而是在VPS上托管,例如Linode、DigitalOcean等,那么可以参考这里以启用网络服务器。
拥有IPv6不会有任何副作用,而且可以快速减少页面加载时间约10%左右。
选择HTTP/3或HTTP/2
HTTP是我们访问网页时用于加载网页的逐渐发展的技术。
它始于1991年的HTTP/0.9,随后更新为HTTP/2,最新的是HTTP/3。
HTTP/2相比于HTTP/1.1带来了许多好处,包括:
- 服务器推送
- 多路复用
- 资源优先级
- 头部压缩
- 低延迟
目前,它被39.3%的网站使用,并且比HTTP/1.1快七倍。通过切换到HTTP/2,您可以预期将页面加载时间减少30%至40%。
然而,HTTP/2也有它自己的问题。
例如,它会遇到排队阻塞问题。在这里,任何TCP连接问题都会导致所有流被阻塞。但是使用基于UDP的HTTP/3,单个数据包丢失不会影响其他流。
此外,HTTP/3通过避免重新连接时的TLS握手来实现更低的延迟。总体而言,HTTP/3带来了HTTP/2的所有优点,却没有相关的缺点。
您可以与您的网络主机检查HTTP/3或HTTP/2的支持。或者,您的CDN提供商可能有一个简单的切换来选择您所偏好的HTTP版本。
图像优化
没有人愿意浏览大量文字,这使得图片成为每个网页不可避免的一部分。另一方面,网页上有图片会使其变得沉重并增加页面加载时间。
因此,解决方案要求以比较轻的格式(如WebP或AVIF)呈现图像。它不仅大幅减小了文件大小(某些情况下可达80%以上),输出质量基本保持不变。
现在,您可以直接将图片转换并上传到这些新一代格式中。或者,订阅第三方转换服务(如Optimole)以实时进行转换。
减少超量的HTTP请求
一个网站永远不会作为一个整体加载。相反,每个元素,文本、图片、CSS、JavaScript等都作为HTTP请求。
而其他一切都相等的情况下,HTTP请求数较少的网页加载速度比HTTP请求数较多的网页加载速度更快。
总之,让HTTP请求的数量尽可能地低是符合我们的最佳利益的。
根据我个人使用WordPress的经验,我可以说选择一个轻量级的主题(如Generate Press)有帮助。此外,减少插件数量也有助于拥有快速和安全的网站。
然而,这是一个需要特别注意的主题。
特别是,如果您拥有WordPress网站,请检查此链接:make fewer HTTP requests。
切换到Web安全字体
我们都希望我们的网站看起来独特且用户友好。而许多人采取的第一步就是切换到不同的字体。
幸运的是,有几个免费选项,包括Google字体。然而,这会增加多个HTTP请求。更糟糕的是,如果第三方字体服务器宕机,您的网站将回退到系统字体。
为了解决这个问题,一些网站管理员会在他们的网站上自主托管字体,这是朝着自给自足的方向迈出的一步。然而,这仍然会添加一个需要从您的服务器加载到用户设备的文件。这意味着额外的HTTP请求,无论多小,都会导致性能下降。
因此,有一些Web安全字体可以用于实现最快的体验,而不会在服务器故障期间发生字体切换。这些字体称为系统字体,它们在Windows PC、Mac、Linux系统、iOS、Android等系统中很常见。
以下是一些Web安全字体:
- Arial
- Verdana
- Trebuchet-MS
- Tahoma
- Times New Roman
- Georgia
- Impact,等等。
利用缓存
缓存意味着在本地存储数据。这可以确保在再次访问时实现最快的网站加载速度。专家通常建议部署缓存以减少加载时间。
例如,WordPress有许多缓存插件,如WP Fastest Cache。或者,可以通过编辑.htaccess文件来部署浏览器缓存。
然而,它基于平台,实现这个功能可能有不同的方法。
异步加载
这是另一个我个人WordPress经验中的页面。事实上,Google搜索控制台发出了一个警告,称我的40多篇博客文章未通过核心网络关键指标测试。
Core web vitals是谷歌的页面评估,对于每个试图在其搜索引擎上排名靠前的人来说都很重要。
要进一步了解,请查看Geekflare的文章之一的Pagespeed分析:
多亏了我们的WordPress开发人员,这些测试都通过了。
但是在我的个人项目中,我特别在最大内容绘制(LCP)和首次内容绘制(FCP)方面失败。具体而言,LCP为3.3秒,FCP约为2.4秒。
作为一个非IT背景的博主,我无法在一定程度上对其进行优化。在我的规模上,我正在勾选所有正确的选项:付费主题,没有额外的插件,系统字体,WebP图像,云托管等等。
有助于这一点的是Jetpack boost WordPress插件中的一个单一切换:
简而言之,它通过在标签上附加
async
或defer
属性,异步加载第三方JavaScript。这样,脚本在后台单独加载,而不会阻塞页面构建。
对我来说,这一措施将LCP和FCP分别降低到1.7秒和1.2秒。
请注意,除了这个延迟非必要的JavaScript切换之外,我还从单独的帖子布局中移除了特色图片,然后得到了这些LCP和FCP值。
减少重定向
理想情况下,对于最佳网站性能,不应有重定向。然而,我们在某些时候都会使用链接重定向。
不过,规则很简单:每个重定向都会增加页面加载时间。添加太多重定向,用户将转到其他更快的地方,除非你的业务是互联网的苹果商店,每次都有人排队等待新发布的产品😀。
小心使用视频
视频提高页面停留时间,帮助避免文本的单调性。它们与图像相比是一种很好的升级,有时也是无法避免的。
最明显的方法是嵌入YouTube视频。然而,您可以使用Google PageSpeed比较带有和不带有YouTube视频的两个网页,以评估这些嵌入对网页性能的影响。
为了说明,我在我们的测试网站上发布了两篇文章。其中一篇只有一个YouTube视频(没有文本、图片等),另一篇没有任何东西。接下来,我用Google Pagespeed比较了这两篇文章。
你能看到总阻塞时间、速度指数、FCP和LCP的影响吗?特别是,它增加了整整一秒的总阻塞时间,足以鼓励用户转向竞争对手。
为了确认这些结果并获得更多信息,我在Pingdom Website Speed Test tool中运行了这两个URL。
你可以看到单个YouTube视频添加了额外的23个HTTP请求,增加了页面大小和加载时间,并降低了整体性能等级。
然而,有一些性能技巧可以弥补这个下降。首先,可以选择对视频进行异步加载,这有助于减少总阻塞时间。
此外,还可以进行延迟加载。尤其是当你有许多YouTube embed WordPress plugins来为你做这项艰巨的工作。
最后,最好的方法是嵌入视频缩略图,只有在点击时才加载视频。
压缩HTML、JavaScript和CSS
这可能感觉像沧海一粟,但压缩确实可以使事情变得更流畅。
简化可以从源代码中删除不必要的元素,包括额外的空格、分号、注释、换行等,使所有内容都更加紧凑。
根据使用的平台,您可能需要自己执行此操作,或者有一个工具可以为您进行简化。然而,最好始终保留标准版本的备份,因为修改简化代码几乎是一场噩梦。
不过,机器可以很好地读取所有这些紧凑的代码,并且您将会注意到性能上的轻微提升。
使用Web压缩
Web压缩类似于zip,但它适用于Web文件,可以减少页面加载时间,并且受现代浏览器支持。
简单来说,启用压缩的网站将比没有启用压缩的网站更快地提供组件,前提是其他方面都相同。这种基于Web的压缩可以应用于HTML、JavaScript、CSS、图像等,并且在某些情况下可以将页面大小减小70%以上。
有两个选择:Gzip and Brotli。很可能,您的Web主机将应用其中之一。
然而,您仍然可以 test the compression 来验证您的网站上启用了哪一个。如果没有启用压缩,请联系Web主机或咨询Web开发人员进行部署。
外部元素
您可以将其称为HTTP请求部分的扩展,但这需要单独提及。
网站上的外部元素包括一切非本地的内容,包括但不限于广告、分析、插件、论坛等。
这些元素会向您的网站添加额外的代码,增加HTTP请求等,使您的网站变得臃肿且不够用户友好。
是的,有一些元素几乎在每个网站上都存在,您无法避免它们。不过,在这方面保持极简主义,并尝试使用不同的服务来选择对性能影响最小的服务。
更快的网站!
网站性能永远不是一劳永逸的事情。互联网每一分钟都在发展,最好及时了解并快速适应以获得一流的速度和安全性。
然而,安全性与速度同样重要。
作为WordPress专家,我们不能不告诉您一些 best WordPress security practices 的内容。