网站页面优化-(wordpress网站页面优化)

互联网有一个著名的 8 秒规则。 当用户访问一个网页时，如果超过8秒，他们会感到不耐烦，如果加载时间过长，他们会放弃访问。 大多数用户希望网页加载时间少于 2 秒。

事实上，加载时间每增加 1 秒，您就会失去 7% 的用户。 8 秒不完全是 8 秒，它只是表明加载时间对网站开发人员的重要性。 那么我们如何优化页面性能网站页面优化，提高页面加载速度呢？ 这是本文要讨论的主要问题。 但是，性能优化是一个综合性的问题，没有标准答案。 列出所有内容并不容易。 本文只关注一些核心点。 下面是我总结的性能优化的常用方法：

1、资源压缩整合

主要包括这几个方面：html压缩、css压缩、js压缩以及混淆和文件合并。

资源压缩可以从文件中删除冗余字符，例如回车符和空格。 当您在编辑器中编写代码时，您会使用缩进和注释。 这些方法无疑会使你的代码简洁易读，但它们也会给文档增加额外的字节。

1.HTML压缩

HTML代码压缩就是压缩在文本文件中有意义但在HTML中不显示的字符，包括空格、制表符、换行符等，其他一些有意义的字符，如HTML注释，也可以压缩。

如何进行html压缩：

使用在线站点进行压缩（开发期间通常不使用）

提供 html 工具

后端模板引擎渲染压缩

2.css代码压缩：

CSS代码压缩简单来说就是删除无效代码，合并CSS语义

如何进行css压缩：

使用在线站点进行压缩（开发期间通常不使用）

使用 html 工具

使用 clean-css 压缩 css

图片.png

3、js的压缩和混淆

js的压缩和混淆主要包括以下几个部分：

1.删​​除无效字符

2.删除评论

3、代码语义的缩减和优化

4.代码保护（代码逻辑变得混乱，降低代码可读性，这点很重要）

如何压缩和混淆js

1.使用在线网站进行压缩（开发时一般不用）

2.使用html工具

3.使用js压缩

其实，css压缩和js的压缩和混淆，比html压缩收益要高很多。 同时css代码和js代码要比html代码多很多。 css压缩和js压缩带来的流量减少会非常明显。 所以对于大公司来说，html压缩是可有可无的，但是css压缩和js压缩混淆是必须的！

4.文件合并

图片.png

从上图可以看出，不合并请求有以下缺点：

文件间插入上行请求，增加N-1个网络延迟

受丢包影响更大

keep-alive模式可能会出现一些情况，经过代理服务器的时候可能会断开连接，也就是说不能一直保持keep-alive状态

压缩合并css和js可以减少网站的http请求次数，但是合并文件可能会带来问题：首屏渲染和缓存失效。 那么如何处理这个问题呢？ ----常用库合并和不同页面的合并。

如何合并文件

1.使用在线网站进行文件合并

2.使用实现文件合并(gulp,fis3)

2.非核心代码异步加载的异步加载方式

1.异步加载方式

异步加载的三种方式——async和defer、动态创建脚本

① 异步方法

async属性是HTML5的新属性，需要IE9+浏览器支持

async 属性指定一旦脚本可用，将异步执行

async 属性仅适用于外部脚本

如果有多个脚本，该方法不能保证脚本按顺序执行

②延迟模式

兼容所有浏览器

defer 属性指定是否推迟脚本执行直到页面加载

如果有多个脚本，该方法可以保证所有设置了defer属性的脚本按顺序执行

如果脚本不会改变文档的内容，可以在标签上加上defer属性，加快文档的处理速度

③ 动态创建标签

在定义defer和async之前，异步加载的方式是动态创建，通过方法保证页面加载完成后再将标签插入DOM，具体代码如下：

function addScriptTag(src){ 
 var script = document.createElement('script'); 
 script.setAttribute("type","text/javascript"); 
 script.src = src; 
 document.body.appendChild(script); 
} 
window.onload = function(){ 
 addScriptTag("js/index.js"); 
} 

2.异步加载的区别

1）defer会在html解析完后执行，如果有多个则按加载顺序执行

2）async加载后立即执行，如果有多个，执行顺序与加载顺序无关

图片.png

蓝线代表网络读取，红线代表执行时间，都是针对脚本的； 绿线代表 HTML 解析。

3.使用浏览器缓存

对于 Web 应用程序，缓存是提高页面性能同时降低服务器压力的强大工具。

浏览器缓存类型

1、强缓存：

不会向服务器发送请求，直接从缓存中读取资源。 在控制台的选项中，可以看到请求返回状态码为200，大小显示为from disk cache或from cache；

有关的：

: 中的过期时间，当浏览器再次加载资源时，如果在过期时间内，会命中强缓存。 其值为GMT格式的绝对时间字符串，如：Thu,21 Jan 2018 23:39:02 GMT

Cache- ：这是一个相对时间，在配置缓存的时候以秒为单位表示，用一个值来表示。 当该值设置为max-age=300时，表示在请求正确返回时间5分钟内再次加载资源（浏览器也会记录），命中强缓存。 比如Cache-:max-age=300,

小结：其实两者并没有太大区别。 不同的是它是http1.0的产物，而Cache-是http1.1的产物。 1个环境，会很有用。 所以它其实是一个过时的产品，现阶段它的存在只是一种兼容的写法。 强缓存判断是否缓存的依据来自于是否超过某个时间或者某个时间段，不管服务端文件是否更新过，这可能会导致加载的文件不是最新的内容服务器端，那么我们怎么知道服务器端的内容，客户端有没有更新呢？ 此时我们需要协商一个缓存策略。

2.协商缓存：

向服务器发送请求，服务器会根据请求的一些参数判断是否命中协商缓存。 如果命中，则返回一个304状态码，并给浏览器带来一个新的通知，从缓存中读取资源； 另外， cache需要和cache通信—— use。

有关的：

①Last- and If--Since：当第一次请求资源时，服务器在将资源传递给客户端时，会以“Last”的形式在实体头中加入资源最后一次改变的时间-: GMT”并一起返回给客户端结束。

最后时间：2016 年 7 月 22 日星期五 01:47:00 GMT

客户端会为资源标记这个信息，下次再次请求时，会把这个信息附加到请求报文中，带到服务器端进行检查。 如果传递的时间值与服务器上资源的最终修改时间一致 如果是，说明资源没有被修改，直接返回304状态码，内容为空，这样就省了传输的数据量。 如果两次不一致，服务器会发回资源并返回200状态码，与第一次请求类似。 这样可以保证资源不会重复发送给客户端，也可以保证客户端在服务端发生变化时能够获取到最新的资源。 304 响应通常比静态资源小得多，从而节省了网络带宽。

图片.png

但最后 - 有一些缺点：

一、 部分服务器无法获取准确的修改时间

二． 修改了文件的修改时间，但是文件的内容没变

既然根据文件修改时间来决定是否缓存还不够，那么是否可以直接根据文件内容是否修改来决定缓存策略呢？ ----ETag和If-None-Match

②ETag和If-None-Match：Etag是上次加载资源时服务器返回的，是资源的唯一标识。 只要资源发生变化，Etag就会重新生成。 浏览器下次加载资源向服务器发送请求时，会将上次返回的Etag值放到If-None-Match里面，服务器只需要比对客户端发送的If-None-Match即可在自己的服务器上使用 Etag 值。 资源的ETag是否一致可以判断资源相对于客户端是否发生了修改。 如果服务端发现ETag不匹配，则直接将新资源（包括新的ETag）以常规GET 200返回包的形式发送给客户端； 如果ETag一致，则直接返回304，告知客户端直接使用本地缓存即可。

图片.png

两者比较：

首先，在准确度上，Etag优于Last-。 Last-的时间单位是秒。 如果一个文件在1秒内被多次更改，他们的Last-实际上并不能反映修改，但Etag每次都会更改以确保准确性； 如果是负载均衡服务器，各个服务器生成的Last-也可能不一致。

其次，在性能上网站页面优化，Etag不如Last-。 毕竟Last-只需要记录时间，而Etag则需要服务器通过算法计算出一个哈希值。

第三，在优先级上，服务器验证优先Etag

缓存机制

强制缓存优先于协商缓存。 如果强制缓存（和Cache-）生效，则直接使用缓存。 如果不是，将执行协商缓存（Last- / If--Since 和 Etag / If-None-Match）。 协商缓存由服务器决定是否使用缓存。 如果协商缓存无效，则说明该请求的缓存无效，重新获取请求结果，存入浏览器缓存； 如果有效，则返回 304 并继续使用缓存。 主要流程如下：

[图片上传失败...(image--85)]

用户行为对浏览器缓存的影响

1、地址栏访问和链接跳转是正常的用户行为，会触发浏览器缓存机制；

2、F5刷新，浏览器会设置max-age=0，跳过强缓存判断，协商缓存判断；

3、Ctrl+F5刷新，跳过强缓存和协商缓存，直接从服务器拉取资源。

4.使用CDN

大型Web应用对速度的追求并不止于使用浏览器缓存，因为浏览器缓存永远只是为了提高二次访问的速度。 对于首次访问的加速，我们需要从网络层面进行优化。 最常见的方法是CDN（ ）加速。 通过将静态资源（如css、图片等）缓存到离用户很近的同一网络运营商的CDN节点，既可以提高用户的访问速度，又可以节省服务器的带宽消耗并减轻负荷。

图片.png

CDN是如何实现加速的？

其实这是CDN服务商在全国各省部署计算节点。 CDN 在网络边缘对网站内容进行加速和缓存。 不同地域的用户会访问离自己最近的同一条网络线路上的CDN节点。 当请求到达CDN节点后，该节点会判断自己缓存的内容是否有效，如果有效，则立即将缓存的内容响应给用户，从而加快响​​应速度。 如果CDN节点的缓存失效，会根据服务配置去我们的内容源服务器获取对用户的最新资源响应，缓存内容响应后续用户。 因此，只要一个区域内的用户先加载资源，并在CDN中建立缓存，该区域的其他后续用户就可以从中受益。

5.预解析DNS

资源预加载是另一种性能优化技术，我们可以使用它来提前通知浏览器某些资源将来可能会被使用。

使用DNS预解析告诉浏览器我们以后可能会从特定的URL获取资源。 当浏览器真正使用这个域中的资源时，它可以尽快完成 DNS 解析。 例如，如果我们以后可以获取图片或音频资源，我们可以在文档顶部的标签中添加如下内容：

当我们从这个 URL 请求资源时，我们不再需要等待 DNS 解析过程。 此技术对于使用第三方资源特别有用。 只需一行简单的代码，就可以告诉那些兼容的浏览器进行DNS预解析，也就是说当浏览器真正请求该域的资源时，DNS解析已经完成，从而节省了宝贵的时间。

另外需要注意的是，浏览器会自动为a标签的href启用DNS，所以a标签中包含的域名不需要手动在head中设置链接。 但它在HTTPS下不起作用，需要meta才能强制启用该功能。 之所以这样限制是为了防止窃听者从DNS中推断出HTTPS页面中显示的超链接的主机名。下面这句话的作用是强制开启a标签域名解析

关注蓝色时空，会不定期更新各类干货！