杭州网站制作：快速赢得改善您的网站的性能和安全性

在建立和维护网站时，必须考虑大量的事情。所有网站管理员都应努力：

a）提高网站的性能，以及b）提高网站的安全性。

• 改善其网站的表现，

• 提高网站的安全性。

这两个目标对于运营成功的网站至关重要。

杭州网站制作因此，我们汇总了您应该考虑实施的五种技术的列表，以提高您网站的性能和安全性。以下是我们将要讨论的主题的简要概述：

• 让我们加密（SSL）
  获取SSL证书的一种免费方式，以提高安全性和性能。

• HTTP / 2 HTTP 1.1协议的后继者，它引入了许多性能增强。

• Brotli压缩。
  压缩方法优于Gzip，从而缩小文件大小。

• WebP图像。
  一种图像格式，可以使图像比典型的JPEG或PNG小，从而加快加载速度。

• 内容分发网络。
  一系列服务器遍布全球，旨在更快地缓存和交付您网站的资产。

如果您不了解提高网站性能和安全性的好处，请考虑一下Google喜欢速度的事实，并且自2010年以来，一直将网站速度作为排名因素。此外，如果您使用选择加入表单运营电子商务商店或简单博客，则更快的网站会增加您的转化次数。根据Mobify的一项研究，主页加载速度每降低100毫秒，Mobify的客户群基于会话的转换率提升1.11％，平均年收入增加376,789美元。

网络也在迅速向SSL发展，为用户提供更好的安全性和更高的整体性能。实际上，对于本文中提到的几种技术，拥有启用SSL的网站是先决条件。

在进入之前，请注意即使您不能（或决定不）应用此处提到的每个建议，您的网站仍将受益于实施任何数量的方法。因此，请尝试确定您网站的哪些方面可以使用改进，并相应地应用以下建议。

我们加密（SSL）

如果您的网站仍然通过HTTP提供，那么现在是时候迁移了。Google已将HTTPS视为排名信号，根据Google的安全博客，所有非安全网页最终都会在Chrome浏览器中显示一条占主导地位的“不安全”消息。

这就是为什么，从这个列表开始，我们将通过Let's Encrypt了解如何使用免费的SSL证书完成迁移过程。让加密是一种免费的自动获取SSL证书的方式。在让我们加密之前，如果您想通过HTTPS交付网站，则需要从证书颁发机构购买有效证书。由于额外的成本，许多Web开发人员选择不购买证书，因此继续通过HTTP提供他们的网站。

但是，自从2015年底推出了Let's Encrypt的公共测试版以来，已经发布了数百万个免费的SSL证书。事实上，Let's Encrypt表示，截至2017年6月底，已发行超过1亿份证书。在启动Let's Encrypt之前，只有不到40％的网页通过HTTPS提供。在Let's Encrypt推出一年半之后，这个数字上升到了58％。

如果您尚未转移到HTTPS，请尽快执行此操作。以下是迁移到HTTPS有益的几个原因：

• 提高安全性（因为一切都是加密的），

• 为了使HTTP / 2和Brotli正常工作，需要HTTPS，

• HTTPS是排名信号，

• 受SSL保护的网站建立了访问者信任。

如何获取LET的加密证书

您可以通过几种方式获取SSL证书。尽管Let's Encrypt提供的SSL证书满足大多数用例，但有一些事项需要注意：

• 目前没有通配符证书的选项。但是，这计划在2018年1月得到支持。

• 我们的加密证书有效期为90天。您必须在它们到期之前手动续订，或者设置一个自动续订的过程。

当然，如果这些点中的一个或两个都是交易破坏者，那么从证书颁发机构获取自定义SSL证书是您的下一个最佳选择。无论您选择哪个提供商，拥有启用HTTPS的网站都应该是您的首要任务。

要获得Let的加密证书，您有两种方法可供选择：

• 使用shell访问：运行安装并自行获取证书。

• 没有shell访问权限：通过您的托管或CDN提供商获取证书。

第二种选择非常简单。如果您的Web主机或CDN提供商提供了Let's Encrypt支持，您基本上只需启用它即可开始通过HTTPS交付资产。

但是，如果您有shell访问权限并希望或需要自己配置Let's Encrypt，那么您需要确定您正在使用的Web服务器和操作系统。接下来，转到Certbot并从下拉菜单中选择您的软件和系统，以查找具体的安装说明。尽管每种软件和操作系统组合的说明都不同，但Certbot为各种系统提供了简单的设置说明。

HTTP / 2

感谢Let's Encrypt（或任何其他SSL证书颁发机构），您的网站现在应该通过HTTPS运行。这意味着您现在可以利用我们将要讨论的下两种技术，否则如果您的网站是通过HTTP提供的话，这两种技术将不相容。我们将介绍的第二项技术是HTTP / 2。

HTTP 1.1在15年前发布，从那以后发生了一些重大改进。HTTP / 2最受欢迎的改进之一是它允许浏览器仅使用一个连接并行化多个下载。使用HTTP 1.1，大多数浏览器平均只能处理六个并发下载。HTTP / 2现在呈现诸如域分片过时的方法。

除了每个源只需要一个连接并允许同时多个请求（多路复用）之外，HTTP / 2还提供其他好处：

• 服务器推送。推送它认为客户将来需要的其他资源。

• 标头压缩。通过使用HPACK标头压缩减少标头的大小。

• 二进制。与HTTP 1.1（文本文件）不同，二进制文件减少了将文本转换为二进制文件所需的时间，并使服务器更容易解析。

• 优先排序。优先级与请求相关联，从而允许首先传递更高重要性的资源。

启用HTTP / 2

无论您是如何从原始服务器或CDN提供大部分内容，大多数提供商现在都支持HTTP / 2。通过访问其功能页面并进行检查，确定提供程序是否支持HTTP / 2应该相当容易。至于CDN提供商，TLS Fast Yet？提供全面的CDN服务列表，并标记它们是否支持HTTP / 2。

如果您想自己检查您的网站当前是否使用HTTP / 2，那么您需要获取最新版本的cURL并运行以下命令：

curl --http2 http://yourwebsite.com

或者，如果您不习惯使用命令行，则可以打开Chrome的开发人员工具并导航到“网络”标签。在“协议”列下，您应该看到该值h2。

在NGINX上启用HTTP / 2

如果您正在运行自己的服务器并且使用的是过时的软件版本，那么您需要将其升级到支持HTTP / 2的版本。对于nginx用户来说，这个过程非常简单。只需确保您运行的是nginx 1.9.5或更高版本，并listen在配置文件的服务器块中添加以下指令：

listen 443 ssl http2;

在APACHE上启用HTTP / 2

对于Apache用户，该过程涉及更多步骤。Apache用户必须将其系统更新到2.4.17或更高版本才能使用HTTP / 2。他们还需要使用mod_http2 Apache模块构建HTTPS ，加载模块，然后定义正确的服务器配置。可以在Apache HTTP / 2指南中找到有关如何在Apache服务器上配置HTTP / 2的概述。

无论您使用哪种Web服务器，您的网站都需要在HTTPS上运行才能充分利用HTTP / 2的优势。

HTTP / 2 VS. HTTP 1.1：性能测试

您可以通过在启用HTTP / 2之前和之后运行在线速度测试或通过检查浏览器的开发控制台来手动测试HTTP / 2与HTTP 1.1的性能。

根据您网站加载的资产的结构和数量，您可能会遇到不同程度的改进。例如，具有大量资源的网站将需要通过HTTP 1.1进行多次连接（因此增加了所需的往返次数），而在HTTP / 2上则只需要一次。

以下结果是使用2017主题并加载18个图像资源的默认WordPress安装的结果。每个设置在100 Mbps连接上测试三次，并且平均总加载时间用作最终结果。Firefox用于检查这些测试的瀑布结构。

下面的第一个测试显示了HTTP 1.1的结果。总的来说，整个页面平均需要1.73秒才能完全加载，并且会产生不同长度的阻塞时间（如红色条所示）。

当测试完全相同的网站时，只有这次通过HTTP / 2，结果是完全不同的。使用HTTP / 2，整个页面的平均加载时间为1.40秒，并且阻塞的时间量可以忽略不计。

只需切换到HTTP / 2，加载时间的平均节省最终为330毫秒。话虽这么说，您的网站加载的资源越多，必须建立的连接越多。因此，如果您的网站加载了大量资源，那么实施HTTP / 2是必须的。

3. Brotli压缩

第三项技术是Brotli，这是谷歌在2015年开发的一种压缩算法.Brotli继续受欢迎，目前所有流行的网络浏览器都支持它（Internet Explorer除外）。与Gzip相比，Brotli在全球可用性方面仍有一些进展（即CMS插件，服务器支持，CDN支持等）。

然而，与其他方法相比，Brotli显示出一些令人印象深刻的压缩结果。例如，根据谷歌的算法研究，Brotli的压缩比超过Zopfli（另一种现代压缩方法）20％至26％。

启用BROTLI

根据您运行的Web服务器，Brotli的实现将有所不同。您需要使用适合您的设置的方法。如果您使用的是nginx，Apache或Microsoft IIS，则可以使用以下模块启用Brotli。

• ngx_brotli，nginx模块

• mod_brotli，Apache模块

• IIS Brotli，Microsoft IIS社区贡献的扩展

完成上面的一个模块的下载和安装后，您需要根据自己的喜好配置指令。这样做时，要注意三件事：

• 文件类型。可以使用Brotli压缩的文件类型包括CSS，JavaScript，XML和HTML。

• 压缩质量。压缩质量取决于您想要换取时间的压缩量。压缩级别越高，所需的时间和资源就越多，但是大小的节省就越大。Brotli的压缩值可以定义为1到11之间。

• 静态与动态压缩。您希望Brotli压缩发生的阶段将决定是实现静态压缩还是动态压缩：

  • 静态压缩提前预压缩资产 - 在用户实际发出请求之前。因此，一旦提出请求，Brotli就不需要压缩资产 - 它已经被压缩，因此可以立即提供服务。此功能内置了nginx Brotli模块，而使用Apache实现静态压缩需要一些配置。

  • 动态压缩即时发生。换句话说，一旦访问者请求Brotli可压缩资产，资产就会在现场压缩并随后交付。这对于需要在每个请求时进行压缩的动态内容非常有用，缺点是用户必须等待资产在传递之前进行压缩。

nginx用户的Brotli配置可能类似于下面的代码段。此示例将压缩设置为动态（动态），定义质量级别5并指定各种文件类型。

brotli on;brotli_comp_level 5;brotli_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

要验证您的服务器上是否已启用Brotli，您可以打开Chrome的开发人员工具，导航到“网络”标签，选择资产，然后检查Content-Encoding标题。现在应该是br。请注意，Brotli需要HTTPS，因此如果您已正确完成安装和配置过程但仍未看到该br值，则需要迁移到HTTPS。

否则，您可以运行简单的cURL命令，例如：

curl -I https://yourwebsite.com/path/to/your/asset.js

这将返回响应标头列表，您还可以在其中检查Content-Encoding标头值。如果您正在使用WordPress并希望通过提供Brotli压缩的HTML文档更进一步，请查看我的WordPress Brotli指南以了解具体方法。

布罗特利VS. GZIP：性能测试

为了比较Brotli和Gzip压缩，我们将采用三个可压缩的Web资产，并在大小和加载速度上进行比较。两种压缩方法都使用5级压缩值定义。

测试资产三次并取每个资产的平均加载速度后，结果如下：

总体而言，Gzipped资产总规模为77.2 KB，而Brotli资产为74.7 KB。仅仅通过在三个资产上使用Brotli压缩，整体页面大小减少了3.3％。至于加载时间，Gzip资产的总时间为761毫秒，而Brotli资产的加载时间为676毫秒 - 增长了12.6％。

4. WebP图像

我们的第四个建议是使用名称为WebP的图像格式。与Brotli一样，WebP是由Google开发的，目的是使图像更小。与JPEG和PNG一样，WebP是一种图像格式。服务WebP图像的主要优点是它们的尺寸比JPEG和PNG小得多。通常，将JPEG或PNG转换为WebP后，可以节省高达80％的成本。

WebP图像格式的缺点是并非所有浏览器都支持它。在撰写本文时，只有Chrome和Opera可以。但是，通过适当的配置，您可以将WebP图像传送到支持的浏览器，同时向不支持的浏览器提供后备图像格式（如JPEG）。

在变得像JPEG和PNG一样广泛之前，WebP还有很长的路要走。然而，由于其令人印象深刻的尺寸节省，它有很大的持续增长机会。总的来说，WebP减少了总页面大小，加快了网站加载速度并节省了带宽。

如何转换和交付WEBP

有几个选项可用于将图像转换为WebP格式。如果您使用流行的CMS，如WordPress，Joomla或Magento，可以使用插件直接在CMS仪表板中转换图像。

另一方面，如果您想采用手动方法，可以使用在线WebP图像转换器，某些图像处理应用程序甚至带有您可以导出的WebP格式选项，从而使您无需转换任何内容。

最后，如果您更喜欢更集成的方法，某些图像处理服务会提供一个API，您可以使用该API直接集成到Web项目中，使您能够自动转换图像。

如前所述，并非所有浏览器目前都支持WebP图像。因此，如果您在网站上仅使用.webp扩展程序投放图像，则不支持的浏览器将返回损坏的图像。这就是后备很重要的原因。让我们通过三种方式实现这一目标。

1.使用picture元素

此方法允许您定义WebP图像的路径，以及网站HTML中原始JPEG的路径。使用此方法，支持浏览器将显示WebP图像，而所有其他浏览器将显示picture块中最后一个嵌套子标记中定义的默认图像。请考虑以下示例：

<picture>
    <source srcset="images/my-webp-image.webp" type="image/webp">
    <img src="images/my-jpg-image.jpg" alt="My image"></picture>

此方法最广泛地实现WebP功能，同时确保回退机制到位。但是，它可能需要对HTML进行大量修改，具体取决于应用程序的大小。

2.修改服务器的配置文件

如果浏览器不支持WebP，则此方法使用服务器配置文件中定义的重写规则回退到支持的图像格式。根据您的Web服务器使用适当的Apache或nginx片段，并相应地调整path/images目录。

对于Apache：

RewriteEngine OnRewriteCond %{HTTP_ACCEPT} image/webpRewriteCond %{DOCUMENT_ROOT}/$1.webp -fRewriteRule ^(path/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]Header append Vary Accept env=REDIRECT_acceptAddType image/webp .webp

对于nginx：

# http config blockmap $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";}# server config blocklocation ~* ^(path/images.+)\.(png|jpg)$ {
    add_header Vary Accept;
    try_files $1$webp_ext $uri =404;}

此方法的缺点是，如果您要将WebP图像与CDN结合使用，则不建议使用此方法。原因是如果WebP支持的浏览器是第一个请求资产的浏览器，CDN将缓存WebP图像。因此，任何后续请求都将返回WebP图像，无论浏览器是否支持它。

3.使用WORDPRESS缓存插件

如果你是一个WordPress用户并且需要一个能够将WebP图像传递给支持浏览器的解决方案，同时又回归到其他人的JPEG和PNG，同时与CDN兼容，那么你可以使用缓存插件，如Cache Enabler。如果您在插件中定义要为WebP创建其他缓存版本，则插件将向支持的浏览器提供WebP缓存版本，同时为其他浏览器返回HTML或HTML Gzip。

WEBP比。JPEG：性能测试

为了演示WebP和JPEG图像之间的大小差异，我们将拍摄三张JPEG图像，将它们转换为WebP，并将输出与原始图像进行比较。这三个图像如下所示，分别带有2.1 MB，4.3 MB和3.3 MB的大小。

转换为WebP格式时，每个图像的大小都会显着缩小。下表概述了原始图像的大小，WebP版本的大小以及WebP图像的大小比JPEG小。使用有损压缩将图像转换为WebP，质量等级为80。

您可以使用无损（即无质量损失）或有损（即某些质量损失）方法压缩WebP图像。质量的权衡是较小的图像尺寸。如果您希望实现有损压缩以进一步节省大小，那么使用WebP可以在较小的尺寸上呈现质量更好的图片，而不是在相同质量水平下的有损JPEG。David Walsh撰写了一篇全面的文章，概述了WebP，JPEG和PNG之间的大小和质量差异。

5.内容交付网络

最后一个建议是使用内容分发网络（CDN）。CDN通过在一组服务器上缓存它们来加速全球Web资产。当一个网站使用CDN时，它基本上将其大部分流量卸载到CDN的边缘服务器，并将其访问者路由到最近的CDN服务器。

由于缓存，CDN将网站的资源存储在预定义的时间段内。通过缓存，CDN的服务器可以创建源服务器的Web资产的副本，并将其存储在自己的服务器上。考虑到访问者将从多个地理区域访问您的网站，此过程可以提高Web请求的效率。

如果没有配置CDN，那么所有访问者的请求都将转到源服务器的位置，无论在哪里。这会产生额外的延迟，特别是对于从远离源服务器的位置请求资产的访问者。但是，配置CDN后，访问者将被路由到CDN提供商最近的边缘服务器以获取所请求的资源，从而最大限度地减少请求和响应时间。

设置CDN

设置CDN的过程将根据您使用的CMS或框架而有所不同。但是，从较高的层面来看，这个过程或多或少是相同的：

1. 创建指向您的原始URL（https://yourwebsite.com）的CDN区域。

2. 创建CNAME记录以将自定义CDN URL（cdn.yourwebsite.com）指向CDN服务提供的URL。

3. 使用您的自定义CDN URL将CDN与您的网站集成（请务必遵循适合您网站设置的指南）。

4. 检查您网站的HTML，以验证是否使用您定义的CDN的URL而不是源URL来调用静态资产。

完成后，您将从CDN的边缘服务器而不是您自己的服务器上提供您网站的静态资产。这不仅可以提高网站速度，还可以增强安全性，减少原始服务器的负载并增加冗余。

使用CDN之前和之后：性能测试

由于CDN本质上具有多个服务器位置，因此性能测试将根据您从CDN最近的服务器请求资产的位置和位置而有所不同。因此，为简单起见，我们将选择三个位置来执行测试：

• 德国法兰克福

• 纽约，美国

• 加拿大多伦多。

至于要测试的资产，我们选择测量图像，CSS文件和JavaScript文件的加载时间。无论是否启用CDN，每项测试的结果都列在下表中：

在所有情况下，通过CDN加载的资产的加载时间比没有CDN的加载时间快。结果将根据CDN和访客的位置而有所不同; 但是，总的来说，应该提高性能。

结论

如果您正在寻找提高网站性能和安全性的方法，这五种方法都是很好的选择。它们不仅相对容易实现，而且还可以使整个堆栈现代化。

其中一些技术仍处于全球采用的过程中（在浏览器支持，插件支持等方面）; 但是，随着需求的增加，兼容性也会增加。值得庆幸的是，有一些方法可以为支持它们的浏览器实现某些技术（例如Brotli和WebP图像），而对于那些不支持它们的浏览器则有所回应。

最后请注意，如果您尚未将网站迁移到HTTPS，请尽快执行此操作。HTTPS现在是标准，并且是使用某些技术所必需的，例如HTTP / 2和Brotli。您的网站整体更安全，性能更快（感谢HTTP / 2），并且在Google眼中会更好看。

杭州网站制作