js 毫秒转换分钟和毫秒_如何在560毫秒内加载博客

js 毫秒转换分钟和毫秒

I’ve built a lot of blogs over the years. Each time the process begins, I ask myself: “How do I make this blog load faster than ever before?” Because, aside from personally appreciating a fast page load time, it also has a big impact on the bottom line — it increases page views, lowers bounce rate, and has been linked to improved sales numbers for sites like Amazon.

这些年来，我建立了很多博客。 每次过程开始时，我都会问自己：“如何使此博客的加载速度比以往更快？” 因为，除了个人认为快速的页面加载时间之外，它还对底线产生重大影响 -它增加了页面浏览量，降低了跳出率，并与诸如Amazon之类的网站的销售量增长挂钩 。

With my latest project, I’ve managed to make my blog load in about 560ms. This isn’t necessarily achievable by everyone — my blog is quite simple — but most people can surely get their blog loading in under one second.

在我的最新项目中，我设法使博客加载时间大约为560ms。 每个人不一定都能做到这一点-我的博客很简单-但是大多数人肯定可以在一秒钟之内加载他们的博客。

Here are my suggestions.

这是我的建议。

1.跟踪页面加载时间 (1. Track your page load time)

Before making any changes to your blog, run it through the following tools:

在对博客进行任何更改之前，请通过以下工具运行它：

• Pingdom

  平度

• Web Page Test

  网页测试

• GTmetrix

  GTmetrix

All of these provide a measurement of your current page load time, along with tips and tricks to improve that time. It helps to have a baseline measurement so you know what changes are having an impact, and it also helps to re-test as you go to get an even better idea of what’s making a difference.

所有这些都提供了对当前页面加载时间的度量，以及改善该时间的提示和技巧。 它有助于进行基线测量，从而使您知道哪些变化正在产生影响，并且还有助于在进行测试时重新进行测试，以更好地了解产生了什么变化。

2.使用静态博客生成器 (2. Use a static blog generator)

This is less of a tweak and more of an entire change in philosophy, but hear me out. Dynamic software like WordPress places a lot of load on servers, and that load is inevitably passed on to users. If you need WordPress, that’s fine — the remaining tips will still apply — but if you don’t need it, then I’d suggest checking out either Jekyll or Middleman. These tools allow you to generate a static, HTML-based blog on your computer, which you can then upload to whatever server you want. This means:

这不是什么调整，而更多的是哲学的整体改变，但是请听我说。 像WordPress这样的动态软件给服务器带来了很多负担，而这种负担不可避免地会传递给用户。 如果您需要WordPress，那很好-其余技巧仍然适用-但如果您不需要它，那么我建议您查看Jekyll或Middleman 。 这些工具使您可以在计算机上生成基于HTML的静态博客，然后可以将其上传到所需的任何服务器。 这表示：

1. Your server will only have to serve static files. There won’t be any intensive processing involved. This is far more effective than mere caching and has a huge impact on page load time.

   您的服务器仅需提供静态文件。 不会涉及任何密集处理。 这远比单纯的缓存有效，并且对页面加载时间有很大的影响。

2. You’ll have much finer control over your website. WordPress is plenty flexible, of course, but hardly anything compares with the precision that comes with a static blog generator.
   您将可以更好地控制自己的网站。 WordPress当然非常灵活，但是几乎没有什么比静态博客生成器所具有的精度高。

Admittedly, converting a WordPress blog to a static blog probably isn’t worth the effort, but it’s worth considering a static site generator for your next project.

诚然，将WordPress博客转换为静态博客可能不值得，但是值得为下一个项目考虑使用静态站点生成器。

3.简化博客的设计 (3. Simplify your blog’s design)

Most blogs have too much going on. Many have obnoxious designs, huge images, embedded videos, social sharing buttons, advertisements, animations, and more.

大多数博客都在进行太多工作。 许多产品具有令人讨厌的设计，巨大的图像，嵌入式视频，社交共享按钮，广告，动画等。

Some of this stuff is necessary, but it’s rare that all of it is needed. As such, I’d suggest conducting an audit on your blog’s design. Maybe even print a copy of your homepage, sit on the couch, and consider two things:

这些东西中有些是必需的，但很少需要全部 。 因此，我建议对您博客的设计进行审核。 甚至可以打印您的主页副本，坐在沙发上，然后考虑两件事：

1. What is absolutely necessary?
   绝对需要什么？

2. What could be removed?

   什么可以删除？

You don’t have to make your blog as sparse as mine, but do be critical and try taking the epicenter approach to design:

您不必使您的博客像我一样稀疏，但一定要严格并尝试采用震中方法进行设计：

Epicenter design focuses on the true essence of the page — the epicenter — and then builds outward. This means that, at the start, you ignore the extremities: the navigation/tabs, footer, colors, sidebar, logo, etc. Instead, you start at the epicenter and design the most important piece of content first.

震中设计专注于页面的真正本质-震中-然后向外扩展。 这意味着，一开始，您将忽略四肢：导航/选项卡，页脚，颜色，侧边栏，徽标等。相反，您将从震中开始，首先设计最重要的内容。

Most of the time, simplifying a blog doesn’t involve any actual sacrifice. It might feel like you’re losing something, but the readers come for the content, not for the bits and pieces in the sidebar.

在大多数情况下，简化博客并不涉及任何实际的牺牲。 感觉好像您正在失去一些东西，但是读者是来找内容的，而不是边栏中的零碎的东西。

4.在您的站点访问者附近选择一个主机服务器 (4. Choose a host server near your site visitors)

If your website is hosted on a server in New York, a visitor from New York will have a faster page load time than someone from the opposite side of the world. Because of this, it’s worth knowing where visitors are coming from.

如果您的网站托管在纽约的服务器上，那么来自纽约的访问者的页面加载时间将比来自世界另一端的访问者更快。 因此，值得知道访客来自何处。

For a lot of SitePoint’s readers, the answer will be, “the United States,” but:

对于许多SitePoint读者来说，答案将是“美国”，但：

1. If that’s not the case, it might be worth hosting the blog elsewhere.
   如果不是这种情况，可能值得在其他地方托管该博客。
2. The United States is a big place.
   美国是一个大国。

Something I noticed, for instance, is that a lot of my blog’s visitors were coming from the west coast. As such, I moved my blog to a server that’s hosted in San Francisco. This didn’t cost anything extra, but it means that many of the visitors are getting that extra pleasant experience.

例如，我注意到的是，我博客的许多访问者都来自西海岸。 因此，我将博客移到了旧金山托管的服务器上。 这并没有花费额外的费用，但是这意味着许多游客都将获得额外的愉快体验。

As for how to track where your visitors are coming from, all of this data is available through Google Analytics. Just set up a map-based widget. It’ll only take a moment to figure out the best place to host your website.

至于如何跟踪访客的来源，所有这些数据都可以通过Google Analytics(分析)获得。 只需设置一个基于地图的小部件。 只需花一点时间就可以找到托管网站的最佳位置。

5.切换到Digital Ocean(或Linode) (5. Switch to Digital Ocean (or Linode))

All the optimization in the world means nothing if your blog is hosted on a server that’s chugging along with poor performance. And if you’re feeling like your host is a little sickly, I’d suggest switching to one of the following:

如果您的博客托管在性能低下的服务器上，那么世界上所有的优化都没有任何意义。 而且，如果您觉得您的房东病了一些，建议您改用以下一种方法：

1. Digital Ocean

   数字海洋

2. Linode

   Linode

Both of these services, aside from providing very affordable hosting, have two main benefits:

这两种服务除了提供非常实惠的托管服务外，还有两个主要好处：

1. They use solid-state drives, which is a huge boon to performance.
   他们使用固态驱动器，这对性能产生了巨大的好处。
2. They are absolutely barebones, so no performance-hogging junk is installed on your server by default.
   它们绝对是准系统，因此默认情况下，服务器上不会安装任何会降低性能的垃圾。

The downside of course is that you have to know how to operate a server via the command line but that amount of control means you have a lot of flexibility with improving performance even further.

当然，缺点是您必须知道如何通过命令行来操作服务器，但是这种控制量意味着您具有很大的灵活性，可以进一步提高性能。

(There are traditional hosting companies that use solid-state drives, but none that I’ve used, so I can’t personally recommend any of them.)

(有一些传统的托管公司使用固态驱动器，但是我没有使用过，因此我个人不推荐它们。)

6.安装nginx (6. Install nginx)

Most of the web servers in the world are running Apache. But while Apache is flexible and feature-rich, it’s far from the best option if you’re concerned about performance. In that realm, nginx is the king of the hill.

世界上大多数Web服务器都在运行Apache 。 但是，尽管Apache灵活且功能丰富，但如果您担心性能，它就不是最佳选择。 在那个领域， nginx是山丘之王。

nginx is a fast-growing alternative to Apache that has fewer features and certain limitations, but it comes with huge performance gains. There are, however, a few things to keep in mind:

nginx是Apache的快速增长的替代产品，具有较少的功能和某些限制，但具有巨大的性能提升。 但是，请记住以下几点：

• You’ll probably need to install nginx on your own server. This can be tricky for beginners but there are plenty of helpful guides to assist you.

  您可能需要在自己的服务器上安装nginx。 对于初学者来说这可能很棘手，但是有很多有用的指南可以为您提供帮助。

• Installing WordPress can be even trickier, but Digital Ocean has a one-click option that you might want to check out.
  安装WordPress可能会更加棘手，但是Digital Ocean有一个一键式选项，您可能想查看一下。
• If you’re using a static blog generator, using nginx has no downsides and it’d be a big waste to not make the most of it.
  如果您使用的是静态博客生成器，则使用nginx不会带来任何不利影响，并且如果不充分利用它，将是一大浪费。

Switching to a new web server is not a simple change but, as with static blog generation, do a little research. It won’t take long to see the benefits.

切换到新的Web服务器不是一个简单的更改，而是像生成静态博客一样进行一些研究 。 很快就会看到好处。

7.通过CDN交付资产 (7. Deliver assets via a CDN)

Generally, when a user visits a website, all of the resources — the images, the JavaScript files, etc — are downloaded from a single location: the server. But while this might sound perfectly normal, it’s a problem for two reasons:

通常，当用户访问网站时，所有资源(图像，JavaScript文件等)都是从单个位置下载的：服务器。 但这听起来很正常，但这是一个问题，原因有两个：

1. A single visit can place a lot of load on the server.
   一次访问会给服务器带来很多负担。
2. There’s a better approach available.
   有更好的方法可用。

The alternative is to use a content delivery network (CDN). A CDN is used to off-load the hosting of resources like images and CSS files, so when a user visits your blog, your server handles only the bare minimum of processing; everything else is loaded from an external server that’s optimized for speedy delivery.

替代方法是使用内容交付网络 (CDN)。 CDN用于减轻托管资源(如图像和CSS文件)的负担，因此，当用户访问您的博客时，您的服务器仅处理最少的处理； 其他所有内容均从针对快速交付进行了优化的外部服务器加载。

This is useful because:

这很有用，因为：

1. Content delivery networks operate from data centers around the world, so resources can be delivered from locations closer to your visitors.
   内容交付网络从世界各地的数据中心运营，因此可以从更靠近您的访客的位置交付资源。
2. By not delivering these resources from your own server, you’re far more immune to traffic spikes and other sources of slow-down.
   通过不从您自己的服务器提供这些资源，您将更不受流量高峰和其他速度下降因素的影响。

You can even be cheaper than the standard approach. I pay $5 per month for a Digital Ocean droplet and off-load all of the resources to MaxCDN for $60 per year. For the amount of performance I get, that’s a great deal.

您甚至可以比标准方法便宜。 我每月为Digital Ocean小滴支付5美元，然后以每年60美元的价格将所有资源卸载到MaxCDN 。 对于我获得的性能而言，这是非常重要的。

8.使用第三方CDN交付(某些)资产 (8. Deliver (some) assets with a third-party CDN)

A lot of modern websites share common assets, like jQuery, and it’s not the best idea to host these resources yourself. Instead, the better approach is to deliver them from third-party servers, like Google’s:

许多现代网站都共享jQuery之类的共同资产，最好不要自己托管这些资源。 相反，更好的方法是从第三方服务器(如Google的服务器)提供它们：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

This gives you the benefit of using a CDN (for free), and many visitors will already have a Google-hosted copy of jQuery cached in their browser, avoiding the need to download the library again.

这为您提供了使用CDN(免费)的好处，并且许多访问者已经在其浏览器中缓存了Google托管的jQuery副本，而无需再次下载该库。

There are third-party CDNs available for more than just jQuery though, many of which you can find here:

但是，第三方CDN不仅可用于jQuery，而且可在此处找到：

• Google Hosted Libraries

  Google托管库

• cdnjs.com

  cdnjs.com

9.最小化HTTP请求 (9. Minimize HTTP requests)

For every resource that’s loaded onto a page, an HTTP request is required. So when a CSS file is loaded, that’s an HTTP request. Or when a social media share button is embedded on a page, that can be 2-3 HTTP requests. But even if these requests only retrieve a small amount of data, the requests themselves are one of the biggest sources of page load time.

对于加载到页面上的每个资源，都需要一个HTTP请求。 因此，当加载CSS文件时，这就是一个HTTP请求。 或者，当页面上嵌入社交媒体共享按钮时，可以是2-3个HTTP请求。 但是，即使这些请求仅检索少量数据，请求本身也是页面加载时间的最大来源之一 。

To combat this:

为了解决这个问题：

1. Embed social buttons only when they’re needed. Your audience probably only uses a small handful of the most popular sites.
   仅在需要时嵌入社交按钮。 您的听众可能只使用了少数几个最受欢迎的网站。
2. Where possible, combine files. Instead of having multiple CSS files, for instance, put all of your styles into a single file or have a workflow in place that automates this process.
   尽可能合并文件。 例如，不要将多个样式都放在一个文件中，或者要有一个可以自动完成此过程的工作流，而不是拥有多个CSS文件。

Also, refer to one of the previous points about simplifying your blog’s design. If your blog is loading slowly due to HTTP requests, there’s probably too much happening.

另外，请参考前面关于简化博客设计的要点之一。 如果您的博客由于HTTP请求而加载缓慢，则可能发生了太多事情。

结论 (Conclusion)

Website performance is a big topic, and there are plenty of other things to consider to get every ounce of speed from your blog and server. In this post, we’ve covered some fundamentals that provide the biggest impact.

网站性能是一个大话题，要想从您的博客和服务器上获得每秒钟的速度，还有很多其他事情需要考虑。 在本文中，我们介绍了一些影响最大的基础知识。

What strategies are you using (including ones that I haven’t mentioned)? Share them in the comments below.

您正在使用哪些策略(包括我没有提到的策略)？ 在下面的评论中分享它们。

翻译自: https://www.sitepoint.com/how-make-blog-load-560ms/

js 毫秒转换分钟和毫秒