页面加速优化

内联 CSS

优点

1. 使用内联 CSS 可以减少浏览器去服务端去下载 CSS 文件
2. 关键 CSS 内联到 HTML 文件中

缺点

1. CSS 文件没法被缓存

注意：该方法只适用于很小的 CSS 文件，如果你的 CSS 文件足够大以及复杂，应该使用外部 CSS 的方法。

优化 CSS 交付

优化策略

1. 外部的 CSS 不要超过一个，大小应该小于 50k
2. 对于下拉区域以上的内容，使用 style 标记内联小 CSS 到 HTML
3. 不要使用 @import 调用 CSS
4. 不要把 CSS 元素放在 HTML 的 divs 或者 你的 h1s 中

以上步骤可以最小化渲染阻塞 CSS，使得页面加载非常快速。

如果你有多个 CSS 文件，应该把他们合并成一个。

延迟加载 javascript

1. 当我们调用外部 javascript 的时候，使用 "onload" 事件
2. 在页面内部被加载前，外部 javascript 将不被加载T
3. External javascript will then run and affect page

脚本调用外部 javascript 文件

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

1. 拷贝以上代码。
2. 把代码粘贴到你的 HTML，放置在 </body> 标签之前（靠近 HTML 文件的底部）。
3. 把 "defer.js" 变更为你外部 JS 文件的名字。
4. 确保文件路径是正确的。例如：如果你仅仅放置 "defer.js"，这时 "defer.js" 必须与你的 HTML 文件在同一目录下面。

把 javascript 分为两组，一组是加载页面必须的，一组是加载完成页面后需要使用到的（比如分析数据的 js，交互用的等等）。

示例证明：

1. Page with script inline - here
2. Page with external script using "defer" - here
3. Page using the recommended code above - here

延迟图片

可能存在的问题

1. 延迟加载会引起性能问题
2. 延迟加载对于某些页面是不可行的
3. 延迟加载对于 mobile 性能是不理想的

不使用延迟加载或 jQuery 延迟图片

延迟加载实际会做的事情：

1. 观察一个滚动位置
2. 监控一个滚动位置
3. 对一个滚动位置起作用R
4. 延迟图片

在以上 4 个事情中，仅仅只有一个是延迟图片。

HTML 代码：

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

javascript 代码片段：

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

组合外部 CSS

工具列表

• CSS delivery tool
• 页面加速优化
• 页面请求工具
• Google pagespeed insights tool
• Google 工具大全

扩展阅读

• Inline small CSS
• Optimize CSS delivery
• render-blocking-css
• Defer loading javascript
• https://www.feedthebot.com/pagespeed/avoid-css-import.html
• Critical rendering path
• How to defer images
• Combine external CSS
• Leverage browser caching
• Render blocking javascripts
• Guide to the robots.txt file
• Nginx Cache方面的设置
• Avoid CSS @Import

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hi1j1ajbc0j