缓存,PHP生成的缩略图加载缓慢

Question

问题A部分 ▉(100个赏金,被授予)
主要问题是如何使这个网站,加载更快.首先,我们需要阅读这些瀑布.感谢您对瀑布读数分析的建议.从这里显示的各种瀑布图表可以看出主要的瓶颈:PHP生成的缩略图.来自CDN建议的无协议jquery加载得到了我的赏金,虽然使我的网站总体上只增加了3%,​​并且没有回答网站的主要瓶颈.是时候澄清我的问题了,还有另一个赏金:

问题B部分 ▉(100个赏金,获奖)
现在新的焦点是解决6 jpg图像所带来的问题,这些问题导致了大部分的加载延迟.这6个图像是PHP生成缩略图,很小,只有3〜5 KB,但加载相对很慢.注意各种图形上的" 第一个字节的时间 ".这个问题仍未得到解决,但詹姆斯获得了一笔赏金,他解决了RedBot 强调的标题错误:"If-Modified-Since条件请求返回了完整内容不变." .

问题C部分 ▉(我的最后一笔赏金:250分)
不幸的是,在修复了REdbot.org标题错误之后,由PHP生成的图像引起的延迟仍未受到影响.这些微小的3~5Kb缩略图在想什么呢？所有标题信息都可以发送火箭到月球和后面.关于这个瓶颈的任何建议都非常受欢迎并被视为可能的答案,因为我已经困在这个瓶颈问题已经七个月了.我提前谢谢了.

[我网站上的一些背景信息:CSS位于顶部.底部的JS(Jquery,JQuery UI,购买菜单awm/menu.js引擎,选项卡js引擎,视频swfobject.js)第二个图像上的黑线显示什么是启动加载的内容.愤怒的机器人是我的宠物"ZAM".他是无害的,往往更快乐.]

---

加载瀑布:按时间顺序排列 | http://webpagetest.org

---

并行域分组 | http://webpagetest.org

---

Site-Perf瀑布 | http://site-perf.com

---

Pingdom工具瀑布 | http://tools.pingdom.com

---

GTmetrix瀑布 | http://gtmetrix.com

---

Answer 1

首先,使用这些多个域需要多次DNS查找.将这些图像中的许多图像组合成一个精灵而不是传播请求会更好.

其次,当我加载你的页面时,我看到all.js上的大部分阻塞(~1.25s).我看到它以jQuery的旧版本开头.您应该从Google CDN中引用它,不仅可以减少加载时间,还可以完全避免HTTP请求.

具体来说,可以在这些URL上引用最新的jQuery和jQuery UI库(如果您对我省略的原因感兴趣,请参阅此帖子http:):

//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js

如果您使用的是默认的jQuery UI主题之一,您还可以将其CSS和图像从Google CDN中删除.

随着托管jQuery的优化,你也应该结合起来awmlib2.js,并tooltiplib.js成一个单一的文件.

如果你解决这些问题,你应该看到一个重大改进.

Answer 2

我有一个类似的问题,前几天和我发现head.js.它是一个Javascript插件,允许您加载所有JS文件并行.希望有所帮助.

Answer 3

我远非专家,但......

关于这一点:"If-Modified-Since条件请求返回完整内容不变." 和我的评论.

用于生成缩略图的代码应检查以下内容:

1. 是否有缩略图的缓存版本.
2. 缓存版本是否比原始图像更新.

如果其中任何一个为假,则无论如何都应生成并返回缩略图.如果它们都是真的那么应该进行以下检查:

1. 是否有HTTP_IF_MODIFIED_SINCE标头
2. 缓存版本的上次修改时间是否与HTTP_IF_MODIFIED_SINCE相同

如果其中任何一个为false,则应返回缓存的缩略图.

如果这两个都为真,则应返回304 http状态.我不确定它是否需要,但我也亲自返回Cache-Control,Expires和Last-Modified标头以及304.

关于GZipping,我被告知不需要GZip图像,所以忽略我的评论部分.

编辑:我没有注意到您对帖子的添加.

session_cache_limiter('public');
header("Content-type: " . $this->_mime);
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 2419200) . " GMT");
// I'm sure Last-Modified should be a static value. not dynamic as you have it here.
header("Last-Modified: " . gmdate("D, d M Y H:i:s",time() - 404800000) . " GMT");

我也确定您的代码需要检查HTTP_IF_MODIFIED_SINCE标头并对其做出反应.只是设置这些标头和.htaccess文件将无法提供所需的结果.

我想你需要这样的东西:

$date = 'D, d M Y H:i:s T'; // DATE_RFC850
$modified = filemtime($filename);
$expires = strtotime('1 year'); // 1 Year

header(sprintf('Cache-Control: %s, max-age=%s', 'public', $expires - time()));
header(sprintf('Expires: %s', date($date, $expires)));
header(sprintf('Last-Modified: %s', date($date, $modified)));
header(sprintf('Content-Type: %s', $mime));

if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
    if(strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) === $modified) {
        header('HTTP/1.1 304 Not Modified', true, 304);
        // Should have been an exit not a return. After sending the not modified http
        // code, the script should end and return no content.
        exit();
    }
}
// Render image data

Answer 4

哇,很难用这个图像来解释事情..但是在这里,有些尝试:

• 文件33-36加载很晚,因为它们是在swf中动态加载的,并且swf(25)在加载任何其他内容之前首先加载
• 文件20和21 可能(我不知道,因为我不知道你的代码)由all.js(11)加载的库,但是要执行11,它等待整个页面(和资产)加载(你应该改为domready)
• 文件22-32由这两个库加载,再次完全加载后