如何针对性能优化此CSS3 /多个图像？

Question

以下是link to site

这里有一些事情我想调整，我不太确定我还能做些什么。

缩略图和favicons是通过外部服务提取的，我宁愿不设置反向代理来缓存它们。通常情况下，图像在加载时应该平滑淡入（以某种“随机”顺序，它会产生很好的效果）。

你会注意到页面加载时，它似乎有点不稳定，我认为因为twitter脚本同时加载所有缩略图fadein。

我已经尝试过查看几种性能工具，但我对如何改进它有点不知所措。

我能想到的唯一一件事就是将推特偏移一两秒钟。

Answer 1

您应该查看image sprites和HTML defer属性。您还应该考虑打包脚本，将它们移动到页脚并合并它们。 CSS也是如此，你应该将它们放在两个不同的组中，这将导致它们以两个“批次”加载。

Answer 2

下载并安装apache服务器的mod_pagespeed

或尝试google's page speed up service

Details on the image optimization component

Answer 3

您可以随时预先延迟图像的显示：

JQuery的：

$(document).ready(function(){

  setTimeout(function(){
    $('img').css('opacity':'1');
  }, 2000);

});

CSS：

img{
  opacity:0;
  transition:opacity .5s;
}