前言
轩枫阁V3主题已上线，本文将介绍本站V3主题关于加载优化的内容。
图片优化
关于图片，这里使用传统的优化方式。本站使用的图片主要有各类图标、大图、文章配图、文章内容图等。
雪碧图
使用雪碧图Sprite，将各图标合并成一张图，可以减少HTTP请求数。
开发过程中，使用单个图标，结合tmt-workflow，在发布时将图片合并。同时移动端支持2倍雪碧图，只需同时将2x图标放至slice目录即可。
压缩
图标、大图、配图、内容图在制作的过程中，可以在PS中，使用快捷键Ctrl+Shift+Alt+S，保存为Web可用格式。半透明图一般选择PNG24，其它图片（色彩丰富）一般保存为质量为高的JPG格式图。
除了文章图，其它图片可以通过tmt-workflow构建，将图片进行压缩。PNG图片的压缩率一般在40%，JPG的压缩率一般在20%，具体根据图片。
lazyload
对于文章内容，使用lazyload非常的普遍。在用户滚动时，才提前加载显示相应的图片，保证页面打开速度。WP中使用lazyload也很简单。
1. 首先需要在functions.php中将img标签的src替换成base64灰色图
|
1 2 3 4 5 6 7 8 9 10 11 |
// lazyload function lazyload($content) { if(!is_feed() || !is_robots) { $content = preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img class=\"lazyload\" \$1data-original=\"\$2\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAOHh4QAAACH5BAAAAAAALAAAAAABAAEAQAICRAEAOw==\"\$3>\n", $content); } return $content; } // 文章内容 add_filter('the_content', 'lazyload'); // 文章配图 add_filter('post_thumbnail_html', 'lazyload'); |
2. 使用lazyload.js滚动加载图片
建议使用这个版本：https://github.com/jieyou/lazyload
|
1 2 3 4 5 |
$("img.lazyload").lazyload({ effect: "show", data_attribute: 'original', threshold: 100 }); |
资源文件
位置
js文件放底部
- js脚本是并行阻塞下载的。
HTTP/1.1协议中建议浏览器不在同一域名下并行下载多于两个的资源。假如你的图片是在多个域名下的，你可以并行下载超过两张的图片。可是一个脚本在下载的时候，浏览器不能再开始其他的下载，即使在不同的域名下。
css样式表合并放头部
- 将样式表移到文件的
Head可以让页面加载的更快，这是因为将样式表放在头部有利于页面渲染 - 将样式表放在底部的问题是它阻止了许多浏览器的渲染进度。这些浏览器会锁定渲染进程来保证页面上的元素在他们的样式改变时重绘
- 将代码高亮样式置于页面底部，可以晚加载，不影响主页面显示
外链文件
- 利用浏览器缓存，将一些公共的
js、css进行外链，使用缓存，加快用户第一次以后访问页面的速度
压缩合并
压缩合并JS、CSS文件，减少HTTP请求数。
CDN
WP可以结合七牛资源镜像CDN，加快文件下载速度。
localstorage
轩枫阁移动端针对JS文件进行了本地存储处理。
js文件在构建时，加上版本号，如main.bc9db071.js。
页面在打开时，会从localstorage里读取是否有当前版本的js文件，如果有则从LS中读取，否则下载后存储。
只有当下次上线更新文件时，会重新下载JS文件。
暂无评论