【前端SEO优化】从三个方面入手有效提升网页加载速度

当用户拜访网页时，最直观的感觉是网页内容的速度。咱们需求做的优化作业首要是为了这个意图。那么怎么进步页面加载（或呈现）速度呢？一般来说，有三个方面：

1、代码逻辑：优异的代码逻辑结构能够有效地削减呈现页面（如虚拟DOM）时运用的内存和速度，这超出了本文的规模。

2、SSR服务器烘托，也称为“直接输出”。在服务器端将第一个屏幕的一切内容呈现为HTML静态代码后，能够直接输出到浏览器，有效地加快了用户拜访站点时第一个屏幕的加载时刻。可是，这方面不在本文的规模内。

3、本文将评论进步静态文件的加载速度，大致分为以下几点：

削减静态文件恳求的数量，然后削减恳求的数量（恳求的本钱高于移动页面的网络速度）

（1）代码紧缩是最常见的优化办法之一。

在平常开发时，JS脚本文件和CSS款式文件中的代码将根据特定的代码标准（如javascript标准款式），以进步项意图可维护性和团队协作的功率。可是在项目发布到Internet上之后，客户机（浏览器）会辨认这些代码。此刻，不需求代码命名标准和空间缩进。咱们能够运用东西来混杂和紧缩这些代码，以减小静态文件的巨细。这儿咱们挑选运用Webpack，稍后将介绍它。

（2）文件兼并在NPM中十分盛行。在前端项目开发中，常常运用涉及第三方代码库，如jquery、axios、weixinJSsdk、lodash、bootstrap等。每个库都有自己的脚本或款式文件。最陈旧的办法是，咱们将标签独自引进这些库中，然后在翻开页面时发生几十个恳求，这关于移动端来说是不行承受的。

（3）GZIP

通过紧缩兼并后，文件的巨细和数量得到了客观的削减。可是，一旦站点有了更多的事务逻辑，或许引进了更多的第三方库，文件的巨细关于移动端依然不达观。

现在是gzip紧缩呈现的时分了。~咱们在Webpack的装备中增加了gzip紧缩装备。

（4）为什么cdn和cache运用cdn？

cdn是一个全球（或国内，特定于供货商）的分布式网络，它能够更快地将网站的内容传输到服务规模内的特定方位，而且一般该特定方位远离实践的内容服务器。例如，在极点情况下，您的网站保管在爱尔兰（海南），您的用户拜访澳大利亚（MOHE）。此刻，当您的用户拜访您的网站时，推迟将十分大，将您的（静态）数据放在澳大利亚（MOHE）的cdn大将大大进步用户拜访该网站的体会。假如没有cdn服务，咱们能够增加expires头，削减dns查找，装备etag，并使ajax可缓存。

（5）安全：

CSPWeb前端有必要了解XSS安全漏洞。咱们知道，javascript句子乃至CSS表达式都或许导致XSS进犯，许多前端现在运用CSP战略来约束脚本源代码防护。