partyline优化建议
安装浏览器扩展测试
chrome扩展
: https://developers.google.com/speed/docs/insights/using_chrome
图片、css、js静态资源缓存时间
除对缓存有特殊要求的资源外, 资源的缓存时间
使用expires响应头, 设置为一周以上,一年以下
调整CSS结构加速首屏呈现速度
提取并内嵌关键的css样式,延迟加载次要样式(在首屏呈现后加载)
将需要在首屏加载时使用的样式内嵌在<style>
内,次要样式使用js加载,如:
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'small.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
</body>
</html>
减少首屏内容大小:
https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
优化css推送:
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
精简压缩html,css,js
- chrome扩展提供精简后的html
- css压缩可使用cssmin.js 和
YUI
Compressor - js压缩可使用JSMin和YUI
Compressor
参考:https://developers.google.com/speed/docs/insights/MinifyResources
图片压缩
- 图片格式选择:
png
格式各方面优于gif
, 尽量使用png
替代gif
格式的图片,仅对简单图像,如小于10x10像素或少于三种颜色的图像。对照片类图片使用jpg
格式,不要使用bmp
或者tiff
格式。
使用
jpegtran
压缩jpg
需要动态处理的图片(如新闻图片),可以使用在程序内调用对应的上述外部程序,如上传图片成功后,php中可使用exec
,system
等函数调用jpegtran或optipng操作图片,如果能找到使用编程语言存在精简压缩处理图片的类库或函数,请使用类库或函数处理更好。
固定的图片如css样式图片,背景图片,icon等,可以直接使用 chrome扩展
保存处理后的图片或对应压缩工具处理过的图片来替换。
服务器架构方案,安装服务器模块自动优化
pagespeed有服务器自动优化模块,当前只支持nginx和apache。
在源服务器跟squid之间加入一层(或者直接使用nginx或者apache做反向代理),放入一个nginx(安装ngx_pagespeed模块)服务器,为节省带宽,最好是跟squid在同一服务器或同一内网,nginx作为源服务器的反向代理,squid作为nginx的反向代理和缓存服务器。缺点是占用部分服务器资源。响应时间可能略有增加。
ngx_pagespeed能完成基础优化。这是测试站点得分,与设想架构不同的是,这是在squid外包装了nginx作为反向代理。测试服务器在北京,存取香港服务器速度很慢,因而响应时间一项得分表现不佳