pageSpeed Insights 图片对网站优化方案

一 规则 如下归纳几点 可供参考。<br>

避免使用着陆页面重定向

启用压缩功能

缩短服务器相应应用时间

使用浏览器缓存机智

缩短资源大小

优化图片

优化css发送过程

优化加载可见内容

移除会阻止呈现内容的javaScript

1 避免使用着陆页面重定向<br>

   重定向会触发http请求相应周期。并会拖慢网页呈现速度。在最好的情况下，每个重定向都会添加一次往返响应。最坏的情况下，除了额外的http请求响应周期以外。可能会更多次的的执行dns查找 ，tcp 握手和tls协商，因此，您可能减少重定向的使用和提示网站的性能。以下是重定向的模式exapmple.com 使用网页设计 无需要人任何重定向快速切很理想化。example.com -m.exmaple.com/htom 会导致设备用户遭到多次往返。exmaple.com => www.example.com->m.exmaple.com 移动端非常缓慢建议了解自适应设计基础知识。 以提供出色的多设备体验并消除不必要的重定向。

2 启用压缩功能<br>

   所有现代浏览器都支持gzip 压缩 所有http 请求自动协议类似的压缩。启用gzip 压缩珂大幅度压缩索传授的响应大小 减少客户端的流量并加快网页的首次呈现速度。建议在您的网络服务器上启用品测试gzip 支持 html5 所包含人民的服务器Server Configs[Apache](https://github.com/h5bp/server-configs-apache "Apache")[Google App Engine (GAE)](https://github.com/h5bp/server-configs-gae "Google App Engine (GAE)")[Internet Information Services (IIS)](https://github.com/h5bp/server-configs-iis "Internet Information Services (IIS)")[lighttpd](https://github.com/h5bp/server-configs-lighttpd "lighttpd")[Nginx](https://github.com/h5bp/server-configs-nginx "Nginx")[Node.js](https://github.com/h5bp/server-configs-node "Node.js")

3 改善服务器响应时间<br>

    建议服务器响应衡量的是花费多长时间加载必要的html 开始呈现服务托管网页。其中减去的了谷歌哥您的服务器之前的网络延迟时间，每次运行所以的时间可以有所不同，但是这差异不应太大。事实上，每次各种服务器应在用时方面存在很大的差异行，可能意味潜在性能我问题。建议您应该将服务器响应的时间控制在200毫秒内，很多潜在因素可能会延迟服务器响应，当解决问题后。您必须继续衡量服务器先gin赶时间，并设法应将出现的性能瓶颈的问题1 收集并检测2 找出并修复3 检测并提醒

4 使用浏览器缓存<br>

   通过网络获取资源速度缓慢有代价昂贵，下载过程可能需要和客户端服务器之间进行多次往返，会导致延迟处理，可能会阻止网页内容呈现，是访问支持数据费用。所有的服务器响应都应指定一种缓存政策。帮助客户端明确是否可以重用之前的获取响应。建议， 每项资源都指定一种明确的缓存政策来回答下列问题。该资源可被缓存，可缓存多长时间。如何在缓存政策到后期对该资源进行有小的重现验证。当服务器返回响应时间。必须提供etag 标头。Cache-Contol 指定浏览器和其他中间缓存如何 缓存单项响应时长时间，eTAG 提供重新验证的令牌，有浏览器自动发送。用于检测上次请求响应的资源是否发生变化，[指定最佳的Cache-Control 政策](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#defining-optimal-cache-control-policy "指定最佳的Cache-Control 政策")[使用缓存的响应失效的最佳缓存的响应](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating-and-updating-cached-responses "使用缓存的响应失效的最佳缓存的响应")[缓存核对清单。](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#caching-checklist "缓存核对清单。")对于静态素材的资源不常的素材变化资源，我们建议至少缓存1周，至多缓存1年。如果您需要精确控制资源的失效时间，我们建议使用网址指纹版本控制技术.5 缩减资源(HTML CSS javascript 的大小)<br>缩减大小的是指不影响浏览器处理资源的情况下移除冗余，不必要的数据。移除未使用的代码。建议 缩减html CSS js 资源的大小要缩减HTML大小 请查实使用htmlMinifer要缩短CSS大小。请尝试使用的cssNano csso要缩短js大小。请尝试使用。UglifyJS Closure Compiler 也有效。您珂创建一个使用的这些工具的构建的流程。缩短和重命名开发文件将保持正式版目录。6 优化图片<br>对于网页来说，在所下载的字节数中，图片往往会占很大比例。因此，优化图片通常可以卓有成效地减少字节数和改进性能：浏览器需要下载的字节数越少，对客户端带宽的争用就越少，浏览器下载内容并在屏幕上呈现内容的速度就越快。在为您的图片资源寻找最理想的格式和优化策略时，您需要仔细分析多个方面：要编码的数据的类型、图片格式功能、质量设置、分辨率，等等。此外，您还需要考虑：是否最好以矢量格式提供某些图片、是否可通过 CSS 实现所需的效果，以及如何为每类设备传送已进行相应调整的资源。遵循提供自适应图片的最佳做法参阅各种图片的图片优化核对清单针对 GIF、PNG 和 JPEG 图片进行优化GIF、PNG 和 JPEG 格式在整个互联网的图片流量中占 96%。鉴于这些图片格式的热门程度，PageSpeed Insights 提供了具体的优化建议。为方便起见，您可以直接从 PageSpeed Insights（它使用的是 modpagespeed.com 中提供的图片优化库）下载经过优化的图片。您还可以使用相关工具（例如 ImageMagick 提供的 convert 库）来应用类似的优化 - 请参阅下面的示例说明。如果您使用第三方工具，则请注意：倘若您的图片在此之前已进行了充分的优化，转换后的图片可能会变大。如果发生这种情况，请使用您的原始图片。GIF 和 PNG 均是无损格式，因为压缩过程不会对这两类图片的外观做出任何修改。对于静止图片，PNG 可以实现更好的压缩宽高比和更好的外观质量。对于动画图片，请考虑使用 video 元素（而不是 GIF）以实现更好的压缩效果。始终将 GIF 转换为 PNG 格式，除非原始图片是动画图片或非常小（不足几百字节）。对于 GIF 和 PNG，如果所有像素都是不透明的，请移除 Alpha 通道。例如，您可以使用 convert 库通过如下命令优化 GIF 和 PNG 图片（括号内的参数是可选的）：convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.pngcuppa.pngcuppa.png（1763 字节）convert cuppa.png -strip cuppa_converted.pngcuppa_converted.pngcuppa_converted.png（856 字节）JPEG 是一种有损格式。压缩过程会去除此类图片的外观细节，但压缩宽高比可能会是 GIF 或 PNG 的 10 倍。如果图片质量较高，请将其降至 85。当图片质量大于 85 时，图片会迅速变大，但外观上的改善却微乎其微。将色度采样率降至 4:2:0，因为人类视觉系统对亮度（与颜色相较而言）更敏感。对超过 10k 字节的图片使用渐进式格式。渐进式 JPEG 通常可为大型图片实现更高的压缩宽高比（与基准 JPEG 相较而言），并具有渐进式呈现图片的优势。如果图片是黑白的，请使用灰度色彩空间。例如，您可以使用 convert 库通过如下命令优化 JPEG 图片（括号内的参数是可选的）：convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpgpuzzle.jpgpuzzle.jpg（13501 字节）convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpgpuzzle_converted.jpgpuzzle_converted.jpg（4599 字节）7 优化CSS 发送过程浏览器必须先处理当前网页的所以样式的布局信息。然后才能呈现内容。因此，浏览器会阻止呈现网页内容。直到外部样式表表以下载完毕处理完毕，想要详细了解关键呈现路径。获取如何取消阻止的呈现优化CSS 发送过程相关的提示如果外部CSS资源较小。您可以将直播插入HTML文档中，较小的CSS文件可以让浏览器顺畅五组的网站。请注意。如果CSS  文件较大。完全内嵌CSS  并缓加其余样式。内嵌较小CSS文件的实例请勿内嵌较大的数据url请勿内嵌CSS属性<html><head><style>.bule{color:blue}</style></head><body class="blue"><div class="blue">Hello world</div><noscript id="deferred-styles"><link rel="stylesheet" type="text/css" href="small.css"/></noscript><script>var loadDeferredStyles = function (){var addStylesNode = document.getElementById('deferred-styles');var replacement = document.createrElement('div');replacement.innerHTML =addStylesNode.textContent;document.body.appendChild(replacement);addStylesNode.parentElement.removeChild(addStylesNode);};var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;if(raf) ref(funciton(){window.setTimeout(loadDeferredStles,0);});else window.addEventListener('load',loadDeferredStyles);</script></body></html>
8 缩减首屏内容大小如果所需要的数据超出的初始拥塞窗口的限制。系统就是继续用你难道服务器用户的浏览器 之间进行更多的往返的时候，如果用户使用的延迟时间较长的网络。该问题坑你会显著拖慢网页的加速速度建议我哪敢呀加速几种方法。合理构建HTML 一遍首先加载关键首屏内容。减少资源所用的数据量。合理的构建的HTML 以便首先加载关键的首屏的内容请首先加载网页内容。合理构建网页一时来服务器的出示响应发送必要数据，从而立即呈现网络关键部分，并暂缓呈现其余部分。可能意味着，您必须将CSS 拆分两个部分。一个负责挑战内容ATF 部分的样式内嵌部分。以及一个可缓存的呈现的部分请参考示列。了解途观调整网站结构提高加载速度，如果您的HTML 先加载第三方软件 在家中主要内容。加载顺序更改为加载主要内容。如果您的网站的采用两列湿布局。而您的HTML 加载边栏。减少资源所有数据量当经过重新设计的网站都可在过个涉笔政策运行的首关键内容。使用一下技术减少用户呈现是网页的数据量减资源的大小。通过移除不必要的空格的评论来缩减HTML CSS JAVAscript 的大小。用过使用重命名资源中间变量的名称工具，实现进一步优化尽可能考虑使用CSS 而非图片启用压缩功能。9 移除会阻止内容呈现的 JavaScript浏览器必须先通过解析HTML 标记构建的DOM树 然后才能呈现网页，在此过程中。每当解析遇到脚本，必须先停止解析HTML执行平执行该脚本，然后才继续解析，复议外部脚本，系统还会强制解析相应的资源下载完毕。建议您应尽可能避免使用会阻止内容呈现的 JavaScript，尤其是必须先由系统获取然后才能被执行的外部脚本。用于呈现网页内容的脚本可内嵌到网页中，以避免产生额外的网络请求，但内嵌的内容不能太大，而且必须可被快速执行以提供良好的性能。对初次呈现不重要的脚本应设为异步加载，或推迟到首次呈现完毕后再开始加载。请注意，要通过这种方式缩短加载用时，您还必须优化 CSS 发送过程。内嵌 JavaScript会阻止内容呈现的外部脚本会强制的浏览器等待系统获取JAVASCRIPT 可能会咋网页系统中增加一次多次的网络往返过程。如果外部的脚本较小，您可将内容海子街内嵌到HTML文档中。以避免网络延迟，<html><head><script type="text/javascript" src="small.js"></script></head><body><div>Hello, world!</div></body>
</html>
您就可以按照如下方式内嵌脚本：
<html><head><script type="text/javascript">/* contents of a small JavaScript file */</script></head><body><div>Hello, world!</div></body>
</html>
内嵌脚本内容可消除对 small.js 的外部请求，并可使浏览器缩短首次呈现网页所需的时间。但请注意，内嵌也会导致 HTML 文档变大，并且相同的脚本内容可能需要内嵌在多个网页中。因此，我们建议您只内嵌较小的脚本以实现最佳性能。
将 JavaScript 设为异步加载默认情况下，JavaScript 会阻止 DOM 构建，因而会导致网页的首次呈现时间延迟。为防止 JavaScript 阻止解析器正常运行，我们建议您对外部脚本使用 HTML async 属性。例如：<script async src="my.js">要详细了解异步脚本，请参阅解析器被阻止与异步 JavaScript。 请注意，异步脚本未必会按指定的顺序执行，且不应使用 document.write。考虑到这些限制，如果脚本有赖于执行顺序或者需要访问或修改网页的 DOM 或 CSSOM，那么您可能需要重新编写此类脚本。延迟加载 JavaScript如果某些脚本对于初次呈现网页不是必不可少的，此类脚本的加载和执行便可被推迟到初次呈现网页后或网页的其他关键部分加载完毕后。这样做有助于减少资源争用并提高性能。常见问题解答如果我使用的是 JavaScript 库（例如 jQuery），该怎么做？很多 JavaScript 库（例如 jQuery）都可用来增强网页，从而为网页增添额外的互动性、动画和其他效果。不过，这些行为大多可在首屏内容呈现后再添加，以确保无虞。 请考虑将此类 JavaScript 设为异步加载或推迟其加载时间。