Mis en cache, PHP généré Thumbnails charge lente: Comment trouver le problème / solution de graphiques Waterfall?

Question

La Question de la Partie A ▉ (100 bountys, décerné)
Question principale était de savoir comment faire de ce site, le chargement plus rapide. Nous avons d'abord besoin de lire ces chutes d'eau. Merci à tous pour vos suggestions sur la chute d'eau de lecture à l'analyse. Évident à partir de différents graphes en cascade montré ici est le principal goulot d'étranglement: le PHP généré par les vignettes. Le protocole de moins de jquery chargement à partir de la CAN conseillé par David obtenu mon bounty, mais de faire mon site, seulement 3% plus rapide dans l'ensemble, et bien que ne répondant pas au site principal goulot d'étranglement. Le temps de la clarification de ma question, et, d'un autre bounty:

La Question de la Partie B ▉ (100 bountys, décerné)
Le nouvel objectif est maintenant de résoudre le problème que le 6 images jpg eu, qui sont à l'origine de la plupart de la charge de retard. Ces 6 images sont généré par PHP vignettes, minuscule et seulement 3~5 ko, mais le chargement relativement très lentement. Notez le "time to first byte" sur les différents graphiques. Le problème reste entier, mais un bounty est allé à James, qui a corrigé l'erreur d'en-tête qui RedBot a souligné: "if-Modified-since demande conditionnelle retourné à l'intégralité du contenu inchangé.".

La Question de la Partie C ▉ (mon dernier bounty: 250 points)
Malheureusement, même après REdbot.org erreur d'en-tête est fixe, le retard causé par le PHP images générées restée intacte. Ce qui sur terre sont ces minuscules chétif 3~5 ko vignettes de la pensée? Tous que les informations d'en-tête peut envoyer une fusée vers la lune et au dos. Toutes les suggestions sur ce goulot d'étranglement est très apprécié et traité comme une réponse possible, depuis que je suis coincé à ce bottleneckish problème depuis déjà sept mois maintenant. Mes remerciements à l'avance.

[Quelques informations de fond sur mon site: CSS est au top. JS en bas (Jquery,JQuery UI, acheté menu awm/menu.js les moteurs, les onglets js moteur, vidéo swfobject.js) les lignes noires sur La deuxième image pour indiquer quoi initier ce à charger. La colère robot est mon animal de compagnie "ZAM". Il est inoffensif et souvent plus heureux.]

---

La charge de la Cascade: Chronologique | http://webpagetest.org

---

En parallèle Domaines Regroupés | http://webpagetest.org

---

Site-Perf Cascade | http://site-perf.com

---

Pingdom Tools Cascade | http://tools.pingdom.com

---

GTmetrix Cascade | http://gtmetrix.com

---

Answer 1

Tout d'abord, à l'aide de ces multiples domaines de besoin de plusieurs recherches DNS. Vous seriez mieux combinant plusieurs de ces images dans un sprite à la place de la propagation de la demande.

Deuxièmement, lorsque je charge la page, je vois plus du blocage (~1.25 s) sur all.js. Je le vois qui commence avec (une vieille version) de jQuery. Vous devriez faire référence qu'à partir de la Google CA, non seulement de diminuer les temps de chargement, mais potentiellement éviter une requête HTTP pour elle entièrement.

Plus précisément, la plus récente de jQuery et jQuery UI bibliothèques peuvent être référencées à ces Url (voir ce post si vous êtes intéressé pourquoi j'ai omis l' 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

Si vous utilisez l'un de la valeur par défaut de jQuery UI thèmes, vous pouvez également tirer son CSS et les images de Google CDN.

Avec jQuery hébergement optimisé, vous devriez également combiner awmlib2.js et tooltiplib.js dans un seul fichier.

Si vous vous adressez à ces choses, vous devriez voir une amélioration significative.

Answer 2

J'ai eu un problème similaire il y a quelques jours et j'ai trouvé head.js. C'est un plugin Javascript qui vous permet de charger tous les fichiers JS en parallèle. J'espère que cela pourra aider.

Answer 3

Je suis loin d'être un expert, mais...

En ce qui concerne ceci: "If-Modified-since demande conditionnelle retourné à l'intégralité du contenu inchangé." et mes commentaires.

Le code utilisé pour générer les Vignettes doivent être de vérifier la suivante:

1. Est-il une version en cache de la vignette.
2. Est la version en cache plus récente que l'image d'origine.

Si l'un de ces faux la vignette doit être généré et retourné n'importe quoi. Si elles sont toutes les deux vraies, alors le cocher suivantes doivent être effectuées:

1. Est-il un HTTP_IF_MODIFIED_SINCE en-tête
2. Est la version mise en cache de l'heure de dernière modification le même que le HTTP_IF_MODIFIED_SINCE

Si ce sont des faux, la mise en cache des vignettes doivent être retournés.

Si ces deux sont vrai, alors un 304 http statut doit être retourné. Je ne suis pas sûr si son nécessaire, mais j'ai aussi personnellement retourner le Cache-Control, de l'échéance et de Dernière modification des en-têtes avec le 304.

En ce qui concerne GZipping, j'ai été informée qu'il n'est pas nécessaire de comprimer les images donc ignorer qu'une partie de mon commentaire.

Edit: je n'avais pas remarqué votre addition à votre post.

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");

Je suis également sûr que votre code doit vérifier la HTTP_IF_MODIFIED_SINCE en-tête et d'y réagir. Il suffit de régler ces en-têtes et votre .fichier htaccess ne fournira pas le résultat requis.

Je pense que vous avez besoin de quelque chose comme ceci:

$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

Wow, c'est dur à expliquer les choses à l'aide de cette image.. Mais ici, quelques essais:

• fichiers 33-36 charge que la fin, parce qu'ils sont chargés dynamiquement dans le fichier swf et le fichier swf (25) est chargé en premier, complètement avant qu'il se charge de tout contenu supplémentaire
• les fichiers, les 20 et 21 sont peut-être (je ne sais pas, car je ne sais pas votre code) de bibliothèques qui sont chargés par l'all.js (11), mais pour les 11 à exécuter, il attend pour l'ensemble de la page (et les actifs) pour charger (vous devez changer l'état de domready)
• les fichiers de 22 à 32 sont chargés par ces deux bibliothèques, encore une fois, après ceux qui sont complètement chargées

Answer 5

Juste une simple supposition, car ce type d'analyse nécessite beaucoup d'A/B testing: votre .ch de domaine semble être difficile à atteindre (de long, vert bandes avant le premier octet arrive).

Cela signifie que soit le .ch site est mal accueilli ou que vous FAI n'ont pas une bonne route.

Compte tenu de l'diagrammes, ce qui pourrait expliquer un gros gain de performance.

Sur une note de côté, il y a ce formidable outil cuzillion qui pourraient vous aider à trier les choses en fonction de votre commande de ressource de chargement.