Si ces fichiers PNG sont stockés dans la base de données en tant que BLOBs — pas clair à partir de votre question — ne le faites pas. Le traitement d'images à partir d'une base de données via PHP n'est pas aussi efficace que de laisser le serveur Web les servir directement depuis le système de fichiers. Si les images sont liées à des enregistrements particuliers, nommez simplement le PNG après l'ID de ligne, afin de pouvoir le trouver dans un répertoire dédié au stockage de ces images. Le code PHP génère ensuite simplement l'URL qui pointe vers le fichier PNG sur le disque, de sorte que le serveur Web peut les envoyer statiquement.
Je ne pense pas que le préchargement des images dans la même page va vous acheter quelque chose. Si quelque chose, il peut ralentir le apparente temps de chargement global de la page parce que le navigateur peut uniquement récupérer un nombre fixe de ressources simultanément, généralement 2-4. Le chargement des images en haut du <body> signifie qu'il y a d'autres choses en haut de la page "au-dessus du pli" qui doivent attendre que des slots de connexion HTTP soient libérés. Mieux vaut laisser les images se charger dans leur ordre naturel.
préchargement est logique dans deux situations:
L'image est non représentée par défaut, mais devrait être nécessaire que l'utilisateur interagit avec la page. De bons exemples de ceci sont les images de survol et de clic pour les survols.
L'image est utilisée sur cette page, mais seront nécessaires sur le prochain.De bons exemples de ceci sont les sites où il y a une nette progression d'une page à l'autre, comme dans un panier.
De toute façon, faire la pré-charge au très bas du <body>, donc tout d'abord une autre charge.
Après avoir corrigé ces deux problèmes, exécutez YSlow sur votre site. Il a commencé comme un plugin pour Firebug, qui est à son tour un plugin pour Firefox, mais il a depuis été porté sur tous les principaux navigateurs sauf IE.
La beauté de YSlow est qu'il détecte automatiquement les ralentissements courants, en chargeant simplement la page lorsque l'extension est active. Il vous donne ensuite une note claire pour la page, de sorte que vous pouvez juger lorsque vous avez terminé votre optimisation. Si vous êtes en dessous de A, vous n'avez pas encore terminé. :) Il n'est pas rare de voir des sites notant un D ou pire, parce que la configuration par défaut des serveurs Web est conservatrice pour éviter de causer des problèmes. La correction des alertes YSlow est généralement assez facile, mais vous devez faire attention à ne pas créer de cache et d'autres problèmes, c'est pourquoi la configuration du serveur par défaut ne fait pas ces choses.
Une autre réponse a recommandé l'offre Google PageSpeed. Il est disponible en tant que plugin pour Chrome et Firefox, en tant que module Apache côté serveur et en tant que service hébergé par Google. Je n'ai aucune idée de comment il se compare à YSlow, mais il semble intéressant.
Pensez également à utiliser le débogueur de navigateur pour obtenir un graphique cascade de temps de chargement des ressources:
Dans Firebug vous obtenez ceci dans l'onglet Net.
Dans Safari, vous y accédez via le menu Développer, qui est normalement désactivé dans les Préférences. Activez-le si nécessaire, puis dites Développer> Démarrer l'enregistrement de la timeline. Cela vous met dans l'instrument Network Requests. Vous pouvez également y accéder via Développer> Afficher l'inspecteur Web.
Dans Chrome, dites Affichage> Développeur> Outils de développement, puis accédez à l'onglet Réseau.
IE a une forme très faible de ceci, via Outils> Developer Tools> Profiler. Il donne simplement un tableau de nombres, plutôt qu'un graphique en cascade, donc l'information est là, mais vous ne pouvez pas simplement scanner visuellement de longues barres pour trouver les ressources les plus lentes.
Merci, je vais essayer cette approche! –