[译] 网站优化初学者指南

时间 2019-11-16

原文原文链接

原文地址：A beginner’s guide to website optimization

原文做者：Mario Hoyos

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：Starrier

校对者：Clarence、dazhi1011

网站优化初学者指南

图片由 Pexels 提供。css

我是一名初学者，在 Google 优化排名中，我能够达到 99/100。若是我能够作到，那么您也能够。html

若是您和我同样，喜欢证据。下面是 Google 的 PageSpeed Insights 结果。hasslefreebeats 是我维护的网站，我最近花了一些时间进行优化。前端

个人 PageSpeed Insights 分数截图。android

我对这些结果感到很是自豪，可是我想强调的是，几周前我还不知道如何去优化一个网站。今天我要和你们分享的只是一大堆 Google 搜素和故障排除所得出的结果，我但愿能够为您省去麻烦。webpack

为了防止您想跳过，这篇文章被分红了几个小节。ios

我毫不是专家，但我相信若是您实施如下技术，你会看到效果！git

图片

图片由 Pexels 提供 (Medium 已作优化).github

做为一个网站开发初学者，我并无想过图片的事情。我知道向个人网站添加高质量图片会使它看上去更专业，可是我从没有停下来考虑它们对个人网页加载时间的影响。web

我为优化图像所作的事情主要是压缩它们。express

回想起来，这从一开始就很是直观，只是我没有在乎，可能您也同样。

我用来压缩图片的服务是 Optimizilla, 一个易于使用的网站，那您只需上传图片，选择你要压缩的级别，而后下载压缩图片。我看到一些资源的大小减小了 70% 以上，这对于更快的加载时间有很大的帮助。

Optimizilla 并非您图片压缩需求的惟一选择。您可使用一些独立的开源软件，Mac 环境下的 ImageOptim 或者 Windows 环境下的 FileOptimizer。若是您更喜欢用构建工具进行压缩，那么可使用 Gulp 和 WebPack 插件。不管您怎么作，只要作了，那么即便是最小的努力，也会在性能上获取提高。

根据您的状况，可能还须要查看文件格式。通常来讲，jpg 会比 png更小。我是否使用其中一个的主要区别是我是否须要图片背后的透明度：若是我须要透明度就使用 png，不然使用 jpg。您能够在这里更深刻地了解这二者的利弊。

此外，Google 已经推出了一种很是贴心的 webp 格式，但因为目前没有在全部浏览器被支持，因此我还在犹豫是否使用它。会留意将来是否有进一步地更新支持！

我没有在个人图片上作更多的压缩来得到以上展现的结果，可是若是您想进一步优化这里有一篇很棒的文章。

视频

照片来自 Pexels 的 Terje Sollie。

尤为是我没有在我目前的任何项目中使用视频，因此我只会简单地涉及到这一点，由于我不以为在这方面我这是最佳的解决方案。

在这种状况下我可能会让专业人士来作繁重的工做。Vimeo 为托管视频提供了一个很好的平台，在那里它们会下降视频质量，从而下降连接速度，并压缩您的视频以优化性能。

您也能够在 YouTube 上托管视频，而后使用 youtube-dl 工具从 You Tube 下载视频，同时根据您网站的须要配置视频。

至于其余可能的解决方案，请查看 Brightcove, Sprout 或者 Wistia.

Gzip 压缩

了解了么? Zip 压缩? Pexels 提供的图片。

最初部署个人网站时，我不知道 gzip 是什么。

长话短说，gzip 是一种大多数浏览器都能理解的文件压缩格式。它能够在幕后运行而不须要用户知道它正在发生。

根据您应用程序所在的位置，gzip 可能很是简单，只需打开配置开关，以指定您但愿服务器在发送文件时对其进行 gzip 压缩。就我而言，托管我网站的 Heroku 不提供这个选项。

事实证实，在服务器代码中有些包能够进行显式压缩。这使得您只需几行代码便可获取 gzip 的好处。使用这个压缩中间件，我可以将 JavaScript 和 CSS 捆绑包大小减小 75%。

检查一下您的托管服务是否提供 gzip 选项是值得的。若是没有，请查看如何将 gzip 添加到服务器代码中。

最小化

最小化的菠萝 Pexels 提供。

最小化是在不影响代码功能（空格、换行符等）的状况下从代码中删除没必要要字符的过程。这使您能够减小您正在经过互联网传输文件的大小。它也有助于混淆您的代码，这使得狡猾的黑客更难检测到安全弱点。

现在，最小化功能一般是 Webpack 或 Gulp 或者其余方法做为构建过程的一部分。可是这些构建工具备一些学习曲线，所以若是您正在寻找更简单的替代方法，Google 推荐 HTML-Minifier for HTML、 CSSNano for CSS 和 UglifyJS for Javascript。

浏览器缓存

不太清楚浏览器具体如何存储数据，但它是我所能获得的最接近的。Pexels 赞助。

将静态文件存储在浏览器的缓存中是提升网站速度的一种很是有效的方法，特别是在来自同一浏览器的回访时。直到 Google 告诉我，个人一些资源没有被适当地缓存，由于我从服务器发送的 HTTP 响应头中缺乏标题，我才意识到这一点。

一旦加载了个人主页，就会向个人服务器发送一个请求，以获取一堆歌曲的数据，而后在音乐播放器中解析这些歌曲。我不常常更新这个网站上的歌曲，因此若是这会是个人页面加载速度更快一些的话，我不介意用户在个人网站上看到他们上次访问的相同歌曲。

为了提升性能，我在服务器的响应对象 (Express/Node server) 中添加了如下代码：

res.append("Cache-Control", "max-age=604800000");

res.status(200).json(response);
复制代码

我在这里所作的就是在个人响应中附加一个说明超过一周（毫秒）应该从新下载资源的缓存控制头。若是您常常更新这些文件，缩短最长时间多是个好主意。

内容分发网络

现实中的 CDN 图像，Pexels 提供。

内容分发网络（CDN）是容许来自世界各地的用户在地理上更接近您的内容的网络。若是用户必须加载来自日本的大图像，但您的服务器在美国，这将比您在东京的服务器花费更长的时间。

CDN 容许您利用分布在世界各地的一组代理服务器，不管您的最终用户位于何处，均可以更快加载您的内容。

我想指出的是，实现 CDN 以前，我可以实现上面你所看到的结果--我只是想说起它们，由于没有网站优化的文章说起到他们。若是您计划拥有全世界的读者，那么在您的网站上有一些创新是绝对必要的。

一些流行的 CDNs 包括 CloudFront 和 CloudFlare.

其余方法

这里有些能让您有所收获的内容：

首先经过增长您网站的感知性能优先加载“首页”来优化您的网站。一种常见的方法是延迟加载没有显示在登陆页面上的图像。
除非您的应用程序依赖于 JavaScript 来渲染 HTML，例如使用 Angular 或者 React 来构建网站，那么它会在你 HTML 文件的 body 底部看似安全的区域加载你的 script 标签。即便这可能会影响您的交互时间，因此我并不会对每一个状况都推荐使用这种技术。

总结

当涉及到优化您的网站时，这都只是冰山一角。根据您接受的流量和所提供的服务数量，您可能会在许多不一样的领域存在性能瓶颈。也许您须要更多的服务器，也许您须要一个拥有更多 RAM 的服务器，也许您的三重嵌套 for 循环可使用一些重构--谁知道呢？

对于加速您的网站来讲，没有一个准确无误的方法，您最终将不得不根据您的测试来作出最好的决定。不要浪费时间去优化不须要优化的东西。分析您网站的性能，找出瓶颈，而后专门解决这些瓶颈。

我但愿您能在这篇文章中找到一些有用的东西！正如我所提到的，我在这个领域还有不少东西要学。若是您有任何额外的提示或者建议，请将它们留在下面的评论中！

若是您喜欢个人文章，请为我鼓掌，还有如下内容：

固然，也能够关注个人 Twitter.

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。