如何实现我的网站在1.29秒内加载完成
我们最近一直在听说页面加载时间对于SEO评分越来越重要——所以我们在最近的一项深入研究探讨了如何将我们自己的页面加载时间降至绝对最低。我们相信,我们的结果在GTMetrix上看起来相当不错:85%的PageSpeed,95%的YSlow以及1.29秒的加载时间。我们很乐意在这里分享我们的经验和做法。一些使用的机制是针对Joomla!的特定机制,但一般的理念对每个CMS和每个网站都是有效的。
在开始以下步骤之前,应该使用GTMetrix来评估您的页面。记下结果,并在以后逐步跟踪改进情况。它的好处是GTMetrix会记录页面的历史,成功可以图形化跟踪!
步骤0:创建备份 - 下面的某些步骤可能会损坏页面!在执行以下每个步骤之前,进行完整的备份非常重要。
步骤1:设定一个尽可能宏伟的目标,并努力实现它
这是绝对必须的。没有目标,人们最终会放弃并失去尝试进一步改进的欲望。在开始工作之前,需要一个宏伟的目标值,然后必须全力以赴努力实现它。在我们的例子中,我们希望将首页的加载时间压缩到1.5秒以下,并且实现85%的Pagespeed和YSlow。
最终结果是,一个只有149KB并且28个请求的页面的加载时间为1.29秒——这并不糟糕:)
但现在我们进入正题...
步骤 2:启用 Joomla 缓存
这是一件本质上很简单的事情,但非常有效。而不是每次都要扫描数据库来提供一页内容,缓存会保存页面的副本,并在有请求时从其临时目录中提供副本。这不仅减轻了服务器负担,还提高了加载时间。缓存启用方法如下
系统 > 配置 > 系统:开启 - 扩展缓存
缓存持续时间设置为约 60 分钟(如果页面内容不经常更改)。
步骤 3:启用系统缓存插件
此插件可以保存整个页面,并且可以额外指示浏览器保存页面一段时间。浏览器缓存非常有意义,因为不必总是重新下载图片和其他元素。浏览器可以提供本地副本,从而减少需要重新加载的数据量,这又有利于提高加载时间。这对于 CSS 文件和图片尤其有意义。插件启用方法如下
扩展 > 插件(搜索缓存)并启用名为“系统缓存”的插件。在基本选项中,也应启用“使用浏览器缓存”。
步骤 4:调整服务器端浏览器缓存
此步骤与步骤 3 类似,但仅涉及浏览器缓存的服务器端。原则上,这是告诉浏览器它应该为一定时间缓存某些文件。Google PageSpeed 建议至少一个月的时间。为了实现这一点,必须相应调整 .htaccess 文件(时间以秒为单位,2,592,000 秒等于一个月)。
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
可能的其他值包括
1 年
Header set Cache-Control "max-age=29030400, public"
1 周
Header set Cache-Control "max-age=604800, public"
还可以添加(或删除)其他文件类型,但所提到的通常是静态文件,因此这样做是有意义的。
步骤 5:启用 GZIP 压缩
此步骤确保所有内容在发送前都被压缩。背后的逻辑很简单:压缩内容然后解压缩需要的时间比发送未压缩内容的时间少。在 Joomla 3.x 中,可以非常容易地启用此功能
系统 > 配置 > 服务器
将 GZIP 压缩设置为是。
步骤 6:安装 JCH_Optimizer
JCH_Optimizer 包含了 PageSpeed 推荐的大量功能,这些功能都可以对 PageSpeed 评分产生积极影响。问题是,其中一些功能可能会严重影响网站。因此,必须谨慎行事。在我们的网站上,我们几乎可以启用所有功能——除了少数例外——但这可能对其他网站完全不同,必须进行一些尝试,才能找到最佳设置。JCH_Optimizer 的详细描述超出了本文的范围,但我只能说:安装并启用它——您不会后悔的。
以下是从插件众多功能中摘录的一小部分
"插件将所有外部 JavaScript 和 CSS 文件合并为一个,以最小化宝贵的 HTTP 请求。文件可以最小化和压缩,从而节省带宽并进一步缩短加载时间。"
步骤 7:最小化内容 -给你的页面一个减肥大餐
这真的很重要。页面应该是简洁的——并且保持简洁。为了实现这一点,人们应该花大部分时间在这上面。在我们这里,这个步骤单独就花了几周的时间。
在此提醒一点:小心!再次提醒备份,备份——尤其是当你开始(看似)删除不需要的核心组件、模块、Joomla插件时。
这个步骤应该一直做到筋疲力尽。所有不需要的东西都应该去掉。包括默认提供的、不一定需要的东西,比如模板、新闻组件、链接组件以及所有不必要的插件。所有东西都会被卸载——不仅仅是禁用。要极度关注所有不必要的部分;如果需要,将模块和插件组合在一起。例如,可以用一个插件来处理社交按钮。
如果使用自己的HTML,最好将其尽可能多地放入一个模块中。对于论坛,应删除不必要的分类,在菜单中减少条目数量到绝对必要的最小值。删除旧的用户账户遗留物,尽可能地将分类合并。将旧帖子移至回收站,清空所有回收站。迭代重复这些步骤,直到页面变得简洁、流畅,并且刚好能运行。人们应该为这个步骤留出时间,并不断尝试去除一些东西,但不要破坏任何功能。
遗憾的是,我们没有记录下我们删除了所有哪些内容。
步骤8:最小化请求的数量和大小
删除所有不必要的图片。将外部图片替换为本地副本(这减少了浏览器必须进行的DNS查找次数——从而延长加载时间)。在GTMetrix或Pingdom中对请求进行详细分析可能会有所帮助。
此外,GTMetrix还有一个很酷的功能:可以缩放和优化图片。可以下载优化后的图片版本并在网页上使用。
步骤9:使用内容分发网络
CDN(内容分发网络)是指存储页面静态元素副本的服务器,并且可以优化和快速提供这些元素——比自己的Web服务器快得多。这些服务器通常遍布全球,因此很可能内容是从附近的服务器提供的。这意味着巨大的速度提升。如果由于财务原因不能使用CDN,例如,CloudFlare提供了一个免费服务,非常适合小型网站。
步骤10:遵循PageSpeed和YSlow的所有建议
PageSpeed和YSlow都会提供详细的改进建议,例如,应指定使用的字符集,或者应指定图片大小(width = / height = 对所有图片)。应严格遵循所有这些建议。如果遇到无法理解的建议:谷歌是你的朋友,在这里可以查看建议的具体内容以及如何解决问题。应避免“错误的请求”,注意例如,没有错误链接的图片或文件。但是,如果不知道自己在做什么,这可能有些困难(例如,我们没有解决CSS精灵的问题)。最好异步加载第三方脚本,如Facebook、Twitter、AdSense和Google,有大量方法可以实现这一点。
PS:这里可能有一些你无法遵循的建议,因为它们超出了你的责任范围或你的网站范围(例如,AdSense、Facebook等脚本拥有一些自己的优化)。当然,你无法控制这些。积极的一面是,你的CDN可能也能优化这些脚本。如果不行,也不要过于担心。
现在,如果我们尝试通过迭代过程来完成这一切,最终我们实际上应该达到一个点,在那里我们可以确定自己的网站已经变得非常快。
你们是否已经取得了好的成果?请在评论中分享你们的经验!
本文由David Attard撰写,并发表在Joomla!社区杂志2013年7月
发表在Joomla!社区杂志上的某些文章代表了作者对特定主题的个人观点或经验,可能并不符合Joomla!项目的官方立场。
通过接受,您将访问https://magazine.joomla.net.cn/外部第三方提供的服务
评论