写文章
颜sir
2020-03-07 23:43

我是怎么把网站优化到3秒打开的

本篇优秀文章被收录在“提高你的工作效率”专题

为什么要加快你公司的网站速度?

  1. 打开慢的网站,会丢询盘;

  2. 打开慢的网站,SEO做不上去。

理由非常充分。

所以这篇文章,就介绍下怎么把一个正常大小的网站,压到3秒左右打开。

如果你自己有网站,或者你公司有网站,那不妨一看。

首先看下效果。

优化之前是这样的,用的测评网站是GTmetrix.com:

a43d66d37353ac8cef26202414e6bc19.png

优化之后是这样的:

cb7a88e724101561b8279b02d07cad23.png

从7.5秒到2.9秒,我的优化方法就是这么神奇。

实现的方法很简单。

关键的关键,我用了亚马逊的CDN。

只要你和我一样,看完文章后,把你整个网站缓存到亚马逊的CDN,你网站的打开速度同样会飙升。

开始具体步骤前,先用几十个字说下为什么要用亚马逊CDN:

  1. 费用低,每个月只花一杯咖啡钱;

  2. 速度飞快,我的案例就是证明;

  3. 全球有节点,你客户在非洲的犄角旮旯都没问题;

再用几十个字说下什么是亚马逊CDN:

CDN就好比京东的快递仓库。

打个比方,你人在深圳,在京东买了本书。

京东并不会从北京的总仓库给你发货,而是就近从广东的分仓库给你发货。

从广东发货,快递到你手里的速度就快多了。

可能上午买,下午就送到。

CDN也是这个道理,比如你的网站放在了美国空间,现在有个客户,人在澳大利亚,他打开了你的网站。

用了CDN后,你网站会就近从澳大利亚打开,而不会从美国打开。

原理就是这么简单。

了解了CDN,再来说下我的优化方法不适合哪些人,免得浪费你宝贵时间:

  1. 建站公司帮你做的模板网站,大概率没法用我方法;
  2. 非WordPress平台,大概率没法用我方法;

所以,只要你的网站或你公司网站是用WordPress做的,不管用的服务器是bluehost还是siteground,都可以全程follow。

自己建网站就是这么舒服。

下面开始说具体方法(如果现在不打算细看,可以直接拉到最底下看结果)


----------


首先,注册亚马逊网络服务(AWS)平台的账户,https://aws.amazon.com。

同时在平台绑定信用卡,并把后台语言设置成中文。

这一步是基操,我就不展开写了。

然后,点开右上角用户名,点击“我的安全凭证”;

01d33b7a94b322231f3a6bfc26425b8c.png

点击用户;

da20ece2297d6b7eefd5fd3137ea8afd.png

点击“添加用户”;

21e864b9401bd3cb7c7b623d966fcbea.png

填写用户名,为方便识别,我们可以把域名填进去,同时把访问类型勾选为“编程访问”,而后点击下一步;

9311e8c79501cac82c9d7b5666995fd9.png

选“直接附加现有策略”,在筛选框中搜索:

  • CloudFrontFullAccess

  • AWSCertificateManagerFullAccess

分别勾选上,然后不断点击下一步。

b362fa71f821da44a9ef291ea1251976.png

点三次下一步,就可以成功添加用户,看到下面这个界面,就说明成功了,把里面的访问秘钥ID,和私有访问秘钥复制到记事本,就可以点右下角的关闭了:

3626ab38f48dca18206149a7702b0e6a.png

登录你的WordPress后台,搜索并安装一个叫“Amazon AWS CDN”的插件;

2f258471e158c698d374b7dc2ea99cc7.png

打开插件设置页,将刚刚的ID,和秘钥分别填入对应的地方,其中Price Class选有三个选项:

  1. US, Canada and Europe

  2. US, Canada and Europe & Asia

  3. All locations

根据你客户所在地勾选下,其他保持不变就好,然后点击“Create Distribution”;

5cf422a7afa4bc785dffa4119c353899.png

再然后,回到亚马逊后台,在左上角点击“服务”,搜索Cloudfront并点击进入;

1315e5df396833fe8ef8692005ddbfa1.png

在这个界面可以看到“正在进行”的字样,等待10分钟,等它变成“已部署”,同时复制分配给我们的域名到记事本;

1c11c94ff522df8f6a30deee674ae37b.png

回到网站后台并刷新;

4c6e6ab68457ec6f9dcc0765b3a8ba94.png

下载个叫“LiteSpeed Cache”(以下简称“LS”)的插件,BTW,之前安装的Amazon AWS CDN插件已经用不到了,可以删掉;

8c227fb4c4e5549a10b31e636cd90efb.png

进入LS的设置页;

614d9f91d91029bcc97a6d00a6a5d7d1.png

点击“Show Advancecd Options”;

e824a77d7adf4068b87efcd6ec216a3f.png

在CDN选项卡中填入如下设置,然后点右上角的保存;

760b6f89ffd707ad45de94abb3f4ca89.png

到此为止,CloudFront的基本配置就大功告成了。

在网页前台查看源代码,我们就会发现,几乎所有静态文件都被缓存到了亚马逊的云端;

5b65811982881bd5c25db6014be7c1e7.png

简单启用LS的各项功能(插件有中文翻译,就不展开讲了),再到GTmetrix.com测速;

b7202c456af0611825d4a392e136344b.png

分数不好看,但是打开速度从最开始的7.5s变成了现在的3.6s。

有一说一……分数这个东西中看不中用,比如同样的内容,我拿到pingdom上测试,测试出来的分数如下:

f5084c28dcbec6eda3ba78861fe4065d.png

所以讲,GT的分数和Pingdom的分数做不得真,很多人都是GT的“分奴”,不做到双90分,就会很不爽。

那行。

以下是我用代码 优化插件的方式优化出来的页面,两项总分超过195,但是你观察下打开速度:

9529ee75f054ac5d2ddb49e46bc8e1fb.png

分数提高了,打开速度降低了,得不偿失。

所以很多人老是拿GT的分数或者Pingdom的分数说事,我心里是不以为然的,打开速度快才是王道。

可能有朋友就会鄙视了:颜sir,你是不是做不到分数和速度兼得,所以才鄙视分奴的?

那倒也不是,稍微努努力,分数和速度的确能兼得:

cb7a88e724101561b8279b02d07cad23.png

但细节很多,花的时间精力值不回票价,所以我从不提倡把精力放在分数上。

好,整个教程就到此结束。


----------


PS:为照顾小白,本文有大量删减,和完整版比起来,这篇精简版少了三分之一,更容易follow。

如果你是我学员,完整版的优化过程我所有细节,我会录到付费的询盘课里。

如果你想提前免费获得的完整版图文,请在下方留下走心评论。

过几天我会按评论区ID顺序,逐个发你PDF。


关注作者,看更多TA的好文章 个人展示
颜sir 谁在评论里提醒下这位作者,懒得连名片都没填写。
举报
收藏
转发
0/500
添加表情
评论
评论 (107)
最近
最早

颜sir

一个教人搞询盘的米课老师,询盘自由网站长「xunpanziyou.com」

向TA提问

举报

举报原因:

垃圾广告
人身攻击
抄袭侵权
违法信息
取消 确定

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示