前端

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

参考:https://developers.google.com/speed/docs/insights/MinifyResources

图片压缩

  • 图片格式选择:png格式各方面优于gif , 尽量使用png替代gif格式的图片,仅对简单图像,如小于10x10像素或少于三种颜色的图像。对照片类图片使用jpg格式,不要使用bmp或者tiff格式。

需要动态处理的图片(如新闻图片),可以使用在程序内调用对应的上述外部程序,如上传图片成功后,php中可使用execsystem等函数调用jpegtran或optipng操作图片,如果能找到使用编程语言存在精简压缩处理图片的类库或函数,请使用类库或函数处理更好。

固定的图片如css样式图片,背景图片,icon等,可以直接使用 chrome扩展 保存处理后的图片或对应压缩工具处理过的图片来替换。


服务器架构方案,安装服务器模块自动优化

pagespeed有服务器自动优化模块,当前只支持nginx和apache。

在源服务器跟squid之间加入一层(或者直接使用nginx或者apache做反向代理),放入一个nginx(安装ngx_pagespeed模块)服务器,为节省带宽,最好是跟squid在同一服务器或同一内网,nginx作为源服务器的反向代理,squid作为nginx的反向代理和缓存服务器。缺点是占用部分服务器资源。响应时间可能略有增加。

ngx_pagespeed能完成基础优化。这是测试站点得分,与设想架构不同的是,这是在squid外包装了nginx作为反向代理。测试服务器在北京,存取香港服务器速度很慢,因而响应时间一项得分表现不佳