新手如何设置和优化关键词

by Mario Hoyos

通过马里奥·霍约斯(Mario Hoyos)

网站优化新手指南 (A beginner’s guide to website optimization)

I am a beginner, and I was able to achieve 99/100 in Google’s optimization ranking. If I can do it, you can too.

我是一个初学者，我能够在Google的优化排名中达到99/100。 如果我能做到，你也可以。

If you’re like me, you like proof. So here are Google’s PageSpeed Insights results for hasslefreebeats, a website that I maintain and recently spent some time optimizing:

如果您像我，就喜欢证明。 因此，这是Google对hasslefreebeats进行 的PageSpeed Insights搜索结果，该网站由我维护，最近花费了一些时间进行优化：

I am pretty proud of these results, but I want to stress that I didn’t have a clue about how to optimize a website just a couple of weeks ago. What I have to share with you today is simply the result of a whole lot of googling and troubleshooting, pains I wish to spare you.

我为这些结果感到非常自豪，但是我想强调一点，就在几周前，我对如何优化网站一无所知。 我今天要与您分享的只是简单的谷歌搜索和故障排除的结果，我希望为您省去很多麻烦。

This article is broken up into subsections for each optimization, in case you want to jump around.

如果您想跳来跳去，本文将每个优化分为几个小节。

I am by no means an expert, but I’m confident that if you implement the techniques below, you will see results!

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

图片 (Images)

As a beginner web-developer, images were not something I ever paid much mind to. I knew that adding high-quality images to my website would make it look more professional, but I never stopped to consider the effects they would have on my page’s load time.

作为一个初学者的Web开发人员，我从来没有考虑过图像。 我知道，向我的网站添加高质量的图像会使它看起来更加专业，但是我一直没有停止考虑它们对页面加载时间的影响。

The main thing I did to optimize my images was compress them.

优化图像的主要工作是压缩图像。

Looking back, this should have been fairly intuitive from the get-go, but it wasn’t for me, so maybe it isn’t for you either.

回想起来，这从一开始就应该是相当直观的，但是这对我来说不是，所以也许对您也不是。

The service that I used to compress my images was Optimizilla, an easy-to-use website where you upload your images, select the level of compression you want, and then download the compressed image. I saw size decreases upwards of 70% for some of my resources, which goes a LONG way towards faster load times.

我用来压缩图像的服务是Optimizilla ，这是一个易于使用的网站，您可以在其中上载图像，选择所需的压缩级别，然后下载压缩的图像。 我发现某些资源的大小减少了70％以上，这大大加快了加载速度。

Optimizilla is hardly the only choice for your image compression needs. Some standalone, open-source software you can use is ImageOptim for Mac or FileOptimizer for Windows. If you prefer to compress using build tools, there are Gulp and WebPack plugins that should do the trick. It doesn’t matter so much how you do, so long as you do. The performance gains are well worth the minimal effort.

Optimizilla并不是满足图像压缩需求的唯一选择。 你可以使用一些独立的，开源软件是ImageOptim的Mac或FileOptimizer为Windows。 如果您更喜欢使用构建工具进行压缩，则可以使用Gulp和WebPack插件来解决问题。 只要您做，您的工作并不重要。 性能上的提高值得付出最小的努力。

Depending on your use case, it may also be worth looking at your files’ format. Generally speaking, jpg is going to be smaller than png. The main difference in whether I use one or the other is whether I need transparency behind the image: If I need transparency, I use png, otherwise I use jpg. You can dive deeper into the pros and cons of both here.

根据您的用例，可能还需要查看文件的格式。 一般来说，jpg将小于png。 我是否使用一个或另一个的主要区别是我是否需要在图像后面添加透明度：如果需要透明度，则使用png，否则使用jpg。 您可以在这里深入了解两者的优缺点。

Also, Google has come out with a webp format that is pretty sweet, but since it’s not supported on all browsers yet, I’m hesitant to use it. Keep an eye out for further support in the future!

此外，Google推出了非常漂亮的webp格式，但是由于尚不支持所有浏览器，因此我很犹豫是否使用它。 随时注意将来的支持！

I didn’t do more than compress my images to get the results I showed you above, but if you want to optimize further here is a great article.

除了压缩图像以得到上面显示的结果外，我所做的只是其他工作，但是如果您想进一步优化， 这是一篇很棒的文章。

视频 (Video)

I haven’t used video in any of my current projects, so I will only touch on this briefly as I do not feel I am the best resource for this, specifically.

我目前没有在任何项目中使用视频，因此，我将仅简要介绍一下此视频，因为我认为我并不是对此的最佳资源。

This is one of those situations where I would likely let the pros do the heavy lifting. Vimeo offers an excellent platform for hosting videos where they will degrade video quality for slower connections and compress your videos to optimize performance.

在这种情况下，我可能会让专业人士承担沉重的负担。 Vimeo为托管视频提供了一个出色的平台，该平台会降低视频质量以降低连接速度，并压缩视频以优化性能。

You could also host your videos on Youtube and then use this youtube-dl tool to download them from Youtube while configuring the videos to your website’s needs.

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

For other possible solutions, check out Brightcove, Sprout or Wistia.

有关其他可能的解决方案，请查看Brightcove ， Sprout或Wistia 。

Gzip (Gzip)

I had no idea what gzipping was when I initially deployed my website.

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

Long story short, gzip is a file compression format that most browsers understand and that can run behind the scenes without requiring the user to even know it’s happening.

长话短说，gzip是大多数浏览器都能理解的文件压缩格式，可以在后台运行，而无需用户甚至知道它的发生。

Depending on where you are hosting your application, gzipping may be as simple as flipping a configuration switch to specify that you want your server to gzip files when sending them out. In my case, my website is hosted on Heroku, which does not provide this option.

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

As it turns out, there are packages to add compression explicitly in your server code, which allows you to reap the benefits of gzipping in exchange for only a few lines of code. Using this compression middleware, I was able to decrease the size of my Javascript and CSS bundles by 75%.

事实证明，有一些软件包可以在服务器代码中显式添加压缩，这使您可以利用gziping的好处来交换几行代码。 使用这种压缩中间件， 我可以将Javascript和CSS包的大小减少75％。

It is worthwhile to check if your hosting service provides a gzip option. If it does not, look into how to add gzipping to your server-side code.

值得检查您的托管服务是否提供了gzip选项。 如果没有，请研究如何将gziping添加到服务器端代码。

缩小 (Minifying)

Minification is the process of removing unnecessary characters from code without affecting its functionality (whitespace, new-line characters, and so on). This allows you to decrease the size of the file you are transporting across the internet. It’s also useful for obfuscating your code, which makes it harder for sneaky hackers to detect security weak-points.

缩小是从代码中删除不必要的字符而不影响其功能(空白，换行符等)的过程。 这使您可以减小正在Internet上传输的文件的大小。 这对于混淆代码也很有用，这使狡猾的黑客更难检测到安全弱点。

These days, minifying is usually done as part of the build process with Webpack or Gulp or some alternative. These build tools can have a bit of a learning curve, however, so if you are looking for easier alternatives, Google recommends HTML-Minifier for HTML, CSSNano for CSS, and UglifyJS for Javascript.

如今，最小化通常是使用Webpack或Gulp或其他替代方法作为构建过程的一部分来完成的。 这些构建工具可能会有一些学习曲线，因此，如果您正在寻找更简单的替代方法，则Google推荐HTMLHTML-Minifier ， CSSCSSNano以及Javascript的UglifyJS 。

浏览器缓存 (Browser-Caching)

Storing static files in the browser’s cache is a very efficient way to increase the speed of your website, especially on return visits from the same client. I was not aware, until Google told me, that some of my resources were not being cached appropriately because of missing headers on the HTTP response I was sending from my server.

将静态文件存储在浏览器的缓存中是提高网站速度的一种非常有效的方法，尤其是在来自同一客户端的回访中。 在Google告诉我之前，我不知道我的一些资源没有得到适当的缓存，因为我从服务器发送的HTTP响应中缺少标头。

As soon as my home page is loaded, a request is made to my server to get data about a bunch of songs which are then rendered in a music player. I don’t update the songs on this website very often, so I do not mind if a user comes to my website and sees the same songs from the last time they visited, if it will make my page load a bit faster for them.

加载我的主页后，就会向我的服务器发出请求，以获取有关一堆歌曲的数据，然后将这些数据呈现在音乐播放器中。 我不经常更新此网站上的歌曲，因此我不介意用户是否访问我的网站并从他们上次访问时看到相同的歌曲，这是否会使我的页面加载速度更快。

In order to get a performance boost, I added the following code to my server’s response object (Express/Node server):

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

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

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

All I am doing here is appending a cache-control header to my response, which says that after one week (in milliseconds), the resources should be re-downloaded. If you update these files more often, a shorter max-age might be a good idea.

我在这里所做的只是在响应中附加一个缓存控制标头，该标头表示一周(以毫秒为单位)后，应重新下载资源。 如果您更频繁地更新这些文件，则最大寿命可能会更短。

内容分发网络 (Content Distribution Network)

A content distribution network, or CDN, is a network that allows users from all over the world to be geographically closer to your content. If a user has to load a large image from Japan, but your server is in the United States, this will take longer than if you had a server in Tokyo.

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

A CDN allows you to take advantage of a bunch of proxy servers located all over the world, allowing your content to be loaded more quickly regardless of where your end-user is located.

CDN使您可以利用遍布全球的大量代理服务器，无论最终用户位于何处，都可以更快地加载内容。

I want to note that I was able to achieve the results you saw above before implementing a CDN — I simply wanted to mention them as no article about website optimization would be complete without mentioning them. Having one of these bad boys on your website is imperative if you are planning to have a worldwide audience.

我想指出的是， 在实施CDN 之前 ，我能够达到您看到的结果-我只想提及它们，因为没有提及它们的网站优化文章就不会完整。 如果您打算吸引全球受众，则必须在您的网站上拥有这些坏男孩之一。

Some popular CDNs include CloudFront and CloudFlare.

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

杂 (Miscellaneous)

Here’s a couple more tips to squeeze out even more juice:

这里有一些技巧可以榨出更多的果汁：

• Optimize your website to load “above-the-fold” content first to increase the perceived performance of your site. One common way to do this is by lazy-loading images that don’t show up on the landing page.

  优化您的网站以首先加载“首屏”内容，以提高网站的感知性能。 一种常见的实现方法是延迟加载未显示在登录页面上的图像。

• Unless your application depends on Javascript to render HTML, such as a website built with Angular or React, then it is likely safe to load your script tags at the bottom of the body section of your HTML file. This could affect your time-to-interactive, however, so it is NOT a technique I would recommend for every situation.

  除非您的应用程序依赖Javascript来呈现HTML，例如使用Angular或React构建的网站，否则将脚本标签加载到HTML文件主体部分的底部可能是安全的。 但是，这可能会影响您的互动时间 ，因此，并非我推荐每种情况下使用的一种技术。

结论 (In Conclusion)

This is just the tip of the iceberg when it comes to optimizing your website. Depending on the amount of traffic you are receiving and the service you are providing, you could have performance bottlenecks in many different areas. Maybe you need more servers, maybe you need a server with more RAM, maybe your triple-nested for-loop could use some refactoring — who knows?

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

There is no one-size-fits-all when it comes to speeding up your site, and you’ll ultimately have to make the best decisions for your situation based on measurements. Don’t waste your time optimizing something that does not need optimizing. Analyze the performance of your site to find bottlenecks, then attack those specifically.

要加快网站速度，没有万能的选择，最终您必须根据测量结果为您的情况做出最佳决策。 不要浪费时间优化不需要优化的东西。 分析网站的性能以发现瓶颈，然后专门针对这些瓶颈进行攻击。

I hope that you found something useful in this article! As I mentioned, I still have a lot to learn in this domain. If you have any additional tips or recommendations, please leave them in the comments below!

希望本文对您有所帮助！ 正如我提到的，在这个领域我还有很多东西要学习。 如果您还有其他提示或建议，请在下面的评论中保留！

If you liked this article please give it some claps and check out:

如果您喜欢这篇文章，请给予鼓掌并查看：

• Tools I wish I had known about when I started coding

  我希望在开始编码时就已经知道的工具

• Tools I wish I had known about when I started coding: Revisited

  我希望我在开始编写代码时就已经知道的工具：已回顾

Also, give me a follow on Twitter.

另外，请在Twitter上关注我。

翻译自: https://www.freecodecamp.org/news/a-beginners-guide-to-website-optimization-2185edca0b72/

新手如何设置和优化关键词