谷歌搜索引擎优化初学者指南(Google搜素和故障排除所得出的结果结果)

　　谷歌搜索引擎优化初学者指南(Google搜素和故障排除所得出的结果结果)

　　网站优化初学者指南

　　

　　图片由 Pexels 提供。

　　我是初学者，我可以在谷歌优化排名中达到 99/100。如果我能做到，你也能。

　　如果你和我一样，你喜欢证据。以下是 Google 的 PageSpeed Insights 结果。hasslefreebeats 由我维护网站，我最近花了一些时间优化它。

　　

　　我的 PageSpeed Insights 分数截图。

　　我对这些结果感到非常自豪，但我想强调几周前我还不知道如何优化 网站。今天要和大家分享的只是一堆谷歌搜索和问题排查的结果，希望能为大家省去麻烦。

　　如果你想跳过它，这个 文章 被分成几个部分。

　　我绝不是专家，但我相信如果你实施以下技术，你会看到结果！

　　图片

　　

　　图片由 Pexels 提供（中等优化）。

　　作为一个初学者网站开发者，我没有考虑图片。我知道在我的 网站 中添加高质量的图像会使它看起来更专业，但我从未停下来考虑它们对我的页面加载时间的影响。

　　我优化图像所做的主要是压缩它们。

　　回想起来，这从一开始就非常直观，我只是不在乎，可能你也是。

　　我用来压缩图片的服务是Optimizilla，一个简单易用的网站，所以你只需上传图片，选择你要压缩的级别，然后下载压缩后的图片。我已经看到一些资产的大小减少了 70% 以上，这对加快加载时间大有帮助。

　　Optimizilla 并不是您图像压缩需求的唯一选择。您可以使用一些独立的开源软件，Mac 的 ImageOptim 或 Windows 的 FileOptimizer。如果您更喜欢使用构建工具进行压缩，可以使用 Gulp 和 WebPack 插件。不管你做什么，如果你做到了，即使是最小的努力也会给你带来性能提升。

　　根据您的情况，您可能还想查看文件格式。一般来说，jpg会比png小。我是否使用其中一个的主要区别在于我是否需要图像背后的透明度：如果我需要透明度，则为 png，否则为 jpg。您可以在此处阅读有关两者优缺点的更多信息。

　　此外，Google 提出了一种非常好的 webp 格式，但我仍然犹豫要不要使用它，因为目前并非所有浏览器都支持它。将密切关注未来的进一步更新支持！

　　我没有对我的图像进行任何压缩以获得上面显示的结果，但是如果您想进一步优化，这里有一篇很棒的帖子 文章。

　　视频

　　

　　照片来自 Pexels 的 Terje Sollie。

　　特别是因为我在当前的任何项目中都没有使用视频，所以我将简要介绍一下，因为我不觉得这对我来说是这方面的最佳解决方案。

　　在这种情况下，我可能会请专业人士完成繁重的工作。Vimeo 为托管视频提供了一个很好的平台，它们会降低视频质量，从而降低链接速度，并压缩视频以优化性能。

　　您也可以在 YouTube 上托管视频，然后使用 youtube-dl 工具从 YouTube 下载视频，同时根据您的 网站 需要配置视频。

　　对于其他可能的解决方案，请查看 Brightcove、Sprout 或 Wistia。

　　Gzip 压缩

　　

　　知道了？邮编压缩？图片由 Pexels 提供。

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

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

　　根据您的应用程序所在的位置，gzip 可以像打开配置开关以指定您希望服务器在文件发送时对其进行 gzip 压缩一样简单。就我而言，托管我的 网站 的 Heroku 不提供此选项。

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

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

　　最小化

　　

　　最小化菠萝 Pexels 报价。

　　最小化是在不影响代码功能（空格、换行符等）的情况下从代码中删除不必要字符的过程。这使您可以减小通过 Internet 传输的文件的大小。它还有助于混淆您的代码，这使得狡猾的黑客更难检测到安全漏洞。

　　今天，缩小通常是 Webpack 或 Gulp 或其他方法作为构建过程的一部分。但是这些构建工具有一点学习曲线，所以如果你正在寻找一个更简单的替代方案，谷歌推荐 HTML-Minifier 用于 HTML，CSSNano 用于 CSS，UglifyJS 用于 Javascript。

　　浏览器缓存

　　

　　不太确定浏览器究竟如何存储数据，但它是我能得到的最接近的。由 Pexels 赞助。

　　将静态文件存储在浏览器的缓存中是提高 网站 速度的一种非常有效的方法，尤其是在来自同一浏览器的回访时。直到 Google 告诉我，由于我从服务器发送的 HTTP 响应标头中缺少标头，我的一些资源没有被正确缓存，我才意识到这一点。

　　加载我的主页后，会向我的服务器发送一个请求，以获取一堆歌曲的数据，然后在音乐播放器中对其进行解析。我不经常更新这个 网站 上的歌曲，所以我不介意用户在我的 网站 上看到与上次一样的内容，如果这会使我的页面加载速度更快一些.

　　为了提高性能，我在服务器的响应对象（Express/Node 服务器）中添加了以下代码：

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

res.status(200).json(response);

复制代码

　　我在这里所做的是将缓存控制标头附加到我的响应中，说明应该重新下载资源超过一周（毫秒）。如果您经常更新这些文件，最好缩短最长时间。

　　内容交付网络

　　

　　真实 CDN 图片，由 Pexels 提供。

　　内容交付网络 (CDN) 是一种网络，它允许来自世界各地的用户在地理上更接近您的内容。如果用户必须从日本加载大图像，但您的服务器在美国，则需要的时间比您在东京的服务器要长。

　　CDN 允许您利用分布在世界各地的一组代理服务器来更快地加载您的内容，无论您的最终用户位于何处。

　　我想指出，在实施 CDN 之前，我能够实现您在上面看到的结果——我只是想提及它们，因为没有 文章optimized 文章 提及它们。如果您打算拥有全球读者群，那么对您的 网站 进行一些创新是绝对必要的。

　　一些流行的 CDN 包括 CloudFront 和 CloudFlare。

　　其他方法

　　以下是一些您可以动手做的事情：

　　总结

　　这只是优化 网站 的冰山一角。根据您接受的流量数量和提供的服务数量，您可能会在许多不同的领域遇到性能瓶颈。也许你需要更多的服务器，也许你需要一个有更多内存的服务器，也许你的三重嵌套 for 循环可以使用一些重构——谁知道呢？

　　没有一种万能的方法来加速你的 网站，你最终必须根据你的测试做出最好的决定。不要浪费时间优化不需要优化的东西。分析您的 网站 性能，识别瓶颈，然后专门解决这些瓶颈。

　　我希望你能在这个 文章 中找到有用的东西！正如我所提到的，我在这方面还有很多东西要学。如果您有任何其他提示或建议，请在下面的评论中留下！

　　如果你喜欢我的文章，请给我掌声，加上以下内容：

　　当然，你也可以在 Twitter 上关注我。

　　掘金翻译项目是一个翻译优质互联网技术文章的社区，文章来源是掘金上的英文分享文章。内容涵盖、、、、、、等领域。如果想看到更多优质翻译，请继续关注掘金翻译计划、官方微博、知乎栏目。