如何将网站的加载时间减少67%?

云栖息地编号信息:[点击查看更多行业信息]

在这里,您可以找到来自不同行业的第一手云信息。你还在等什么?来吧。

在大多数情况下,JeremyMorgan.com网站的主页不到一秒钟就可以在世界各地加载。

如何将网站的加载时间减少67%?

这个网站的速度以前很快,可以在3秒内加载,但现在更快了。我将在本文中披露我是如何设置它的。

如何将网站的加载时间减少67%?

我选择用雨果来建立这个网站,并在奈特里夫上主持它。

之前的网站设置

如何将网站的加载时间减少67%?

大约在2011年的某个时候,我决定从WordPress迁移到静态网站生成器。原因很简单:我写一篇好文章,发表它,然后我不会修改太多。当然,这不足以证明从数据库提供服务是合理的。因此,拥有一个可以为每篇文章生成一个HTML页面并静态提供的系统就足够了。

我决定选择Octopress,这是当时非常流行的一种包装材料,也很好地满足了我的需求。

仅这一步就大大减少了装载时间。然后,我变得有点沉迷于页面加载速度,并做了许多事情使它加载更快,包括:

图像优化(我使用的一些工具)

简化CSS和JavaScript

对某些资产使用CDN

我当然对这一安排感到满意。多年来,我的工作流程一直是创建一篇新文章,在笔记本电脑或台式机上生成它,然后将文件SCP发送到运行Nginx的FreeBSD服务器。这种方法持续了很长时间。回顾过去,这是一个糟糕的工作流程,但我两个月前才写了一篇文章,所以没问题。

我花了很多年定制我的Octopress安装,并为项目贡献代码和补丁。

问题成堆

虽然一开始我非常喜欢奥克托伯斯,并且欣赏布兰登马蒂斯和其他人的作品,但奥克托伯斯开始变得非常痛苦。

对我来说,最大的问题不是章鱼本身,而是对红宝石的依赖。这里不会介绍太多的细节,但它已经变得非常难以管理。章鱼需要更老的宝石来完成手术。因此,随着Ruby和一些宝石的发展,维护Octopresss的可构建安装变得非常具有挑战性。

我再也不能用我的笔记本电脑构建了,因为我需要维护所有的旧软件。我用旧软件构建了一个Linux服务器,并用它来完成构建。然后,将这些东西转移到一个容器中,这样Ruby和gems的旧版本就可以在输出生成时得到维护。例如,运行Ruby版本不能高于1.9.3。

因此,几年前我就开始研究这个解决方案,但是我从来没有时间去转换。过去几年,我的工作流程是这样的:

如何将网站的加载时间减少67%?

还不错,但是这个过程有一个致命的缺陷,那就是八面体结构,我知道。为一个简单的构建步骤维护所有这些旧软件很容易,但前提是我什么都不碰。

上个月,我用来构建Octopress图像的服务器崩溃了。所以我启动了另一个服务器,安装了码头工人和集装箱,但是没有成功。我尝试了我能想到的所有方法,事实很清楚:

我可以花几个小时用这些古老的软件构建另一个容器来运行Octopress,或者我可以花时间用另一个CMS替换它。

因此,我开始认真评估另一个静态站点生成器的选项。

为什么选择 Hugo

如何将网站的加载时间减少67%?

我花了很多时间评估不同的选项,归结起来就是:

雨果(去)

盖茨比(JavaScript)

鹈鹕

这些是静态站点生成器,可以很好地解决我的问题。我知道围棋、JavaScript和Python,所以我可以修改一些东西。这只是一个普通的博客,它只是一个目录结构下的一组文件。所有这些方法都是可行的。但是,我的要求是什么?

静态文件生成器

必须能够快速构建

必须易于定制

必须是可移植的(苹果、OSX、Linux)

最后一点可能看起来很傻,但我从来不知道我将在什么平台上写作。根据我写的内容,我可能会使用苹果、视窗或Linux。我想在本地构建和查看页面,然后将其推送到开发环境,最后推送到生产环境。这对我很重要。然而,经过大量的评估,我发现:

所有这些静态文件生成器都满足这些要求。

因此,这使得选择变得困难。我有一个版本的JeremyMorgan.com,在所有平台上使用这三个发电机没有问题。我可以定制一些东西,他们可以很快建立一个好的页面。但是我必须选择一个。

我最终选择了雨果,因为我害怕陷入另一个依赖的地狱。盖茨比既酷又强大,但对我来说,这似乎太复杂了。它还严重依赖于JavaScript生态系统。众所周知,JavaScript生态系统有时会做出突然而出乎意料的破坏性变化。

鹈鹕依赖于蟒蛇生态系统,这并不奇怪,所以鹈鹕排在第二位。雨果是从一个可执行文件构建的。因此,即使它被放弃或者依赖关系被破坏,我也可以一直使用可执行文件来生成网站,直到我找到一个替代方案。

这就是我选择雨果的原因。它有一个简单的保护层,可以保护你免受依赖关系的损害。不是每个人都关心破坏性的变化和向后兼容性。作为使用开源软件成本的一部分,这个项目被放弃了。雨果是简单的,可移植的,用戈兰语言写的,所以如果它被丢弃了,我可以叉开它或者修改它。

为什么选择 Netlify

如何将网站的加载时间减少67%?

下一个问题是在哪里举办。当服务器崩溃时,我决定将静态文件转移到亚马逊的Lightsail设置。这个过程非常简单而且非常快。我知道找另一个主机服务器并不好。

没有理由在2020年建造一个完整的Linux服务器来托管一个静态网站。

我对主机设置的要求如下:

一定很快

一定要安全

必须易于部署

因此,我考虑了以下选项:

另一个安装了Nginx的Linux/FreeBSD服务器

蓝色视窗虚拟机

AWS放大器设置

Netlify

我开始准备服务器并测试它。我发现无论如何优化,托管的网络服务器都无法与AWS或Netlify的速度相比。这部分是由于边缘服务器。我在以下位置测试了速度:

波特兰,俄勒冈

弗吉尼亚州杜勒斯

佛罗里达州奥兰多

德克萨斯州达拉斯

加利福尼亚旧金山

巴西圣保罗

英国伦敦

毛里求斯玫瑰山

我在世界各地做过抽样测试,但这些是我最关注的城市。我想看看这些地方中哪一个最快。我选择了一个有很多单词和图片的页面。这个结果让我吃惊。

托管FreeBSD和IIS服务器速度非常快,但在我离开美国,后,它们不再与Netlify和AWS处于同一水平。我希望所有的网站访问者都能快速浏览,而不仅仅是我周围的人。这是我的主要考虑之一。

与速度相比,奈特利几乎在每个地区都是赢家。

在一天的不同时间进行了长时间的测试后,奈特里菲赢了,而AWS放大器也接近了。如果我在AWS质量资产上花了一大笔钱,我相信我能取得好的结果,但是我的网站不赚钱,所以这不是我的选择。

看我的要求,奈特利满足了他们所有人:

速度快(这是最快的);

安全(据我所知是安全的);

工作流程非常简单。

我把我的Github库连接到了Netlify。我可以提交到任何分支来存储更改。我可以把它提交给一个开发分支,我可以把它推到预览版。当我把它推到后备箱,它会自动释放到JeremyMorgan.com。

为什么加载速度如此之快?

以下是我的网站加载速度如此之快的原因:

这是一个静态网站;

只有HTML、JavaScript和CSS;

它比以前轻了。

使用最少的CSS和元素;

优化的JPEG图像;

它将在发布前被压缩。

奈特利真的很快,到处都很快。

综合以上因素,我的网站主页的加载时间不到一秒钟,而包含大量图片和文本的页面在大约三秒钟内完成加载。超快的。

就使用而言,网站快速加速非常重要。因为这个网站将提供开发指南和信息,我不希望人们等半天才看到它。我希望这个网站可以正常使用,即使是在互联网接入很差的国家。毫无疑问,雨果和内特利帮助我实现了这个目标。

[云起在线教室]产品和技术专家每天分享!

课程地址:https://yqh.aliyun.com/live

立即加入社区,与专家面对面,并了解课程的最新进展!

[云栖在线课堂社区]https://c.tb.cn/F3.Z8gvnK

发布者:2020-04-15

作者:jeremymorgan

这篇文章来自“InfoQ”。如果你知道相关信息,你可以关注“信息问”。