Ben nasıl benim web sitesinde görüntü yükleme süresi hızlandırabilir?

3 Cevap php

Şu anda PHP + MySQL ve jQuery ile bir web sitesi geliştiriyorum. Şimdiye kadar benim yerel makinede bunu yapıyor. Ben sayfayı görünce üzerine görüntüleri (birkaç defa ancak görünür) yüklenmesi biraz zaman alabilir fark. Tüm görüntüler (PNG en az 3 KB ile) küçük. Ben sayfasını yüklediğinizde Şimdi, ben gösterecektir bazı verileri almak için oluyor bazı veritabanı bağlantıları vardır.

Bu yükleme zamanı sorunu görüntülerin miktarı ile ilgili bir şey vardır, ya da PHP komut + DB bağlantıları yürütmek için almak zaman eğer ben emin değilim. (Benim veritabanında çok az veri yüzden ben bu davayı kabul etmem gerekir.)

Benim soru şudur: Her sayfanın başında tüm görüntüleri önceden iyi bir yaklaşım mı? JQuery ile denedim ve gayet iyi çalışıyor. Ben onunla alabilirsiniz hangi dezavantajları sadece emin değilim. Örneğin, bunu yapmak için, ben sayfanın başında jQuery kütüphanesi dahil etmek gerekir? Ben kötü bir uygulama olduğunu düşündüm.

3 Cevap

Yüklemek çoğu zaman gerekenlere veri kontrol etmek için google sayfa hızı eklentisi kullanmalısınız. Bir de görüntüler için ayrı yükleme sürelerini gösterir.

Küçük PNG çok kullanarak eğer onlar stil parçası ve bilgiler değil, çünkü tek bir görüntü içine bunları birleştirerek ve css arka plan özelliği ile ekranı manipüle öneririz. Bu durumda - yerine birkaç görüntü tek yüklenecek ve tüm unsurları ile yeniden. Bu durumda, tek bir görüntü bile önyükleme gerçekten çok kolay.

Eğer tek bir indirme içine tüm görüntüleri birleştirmek için CSS Sprites kullanarak düşündünüz mü? tools online bunu yardımcı olmak için, ve önemli ölçüde sayfası için gerekli HTTP istekleri sayısını azaltacak bir dizi vardır.

Onları önbelleğe izin için görüntülerde emin set the correct Expires header olduğundan emin olun.

Son olarak, detayli optimizasyon ipuçları sağlayabilir YSlow bakabilirsiniz.

Bu PNGs BLOB'lar veritabanında saklanır eğer - sorunuza net değil - bunu yapmaz. PHP ile bir DB görüntüleri hizmet veren web sunucusu düz dosya sistemi onlara hizmet icar olarak verimli değildir. Görüntülerin belirli kayıtlara bağlı olan, sadece satır kimliği sonra PNG isim, böylece bu görüntüleri saklamak için adanmış bir dizinde bulabilirsiniz. PHP kodu sonra sadece diskte PNG dosyası işaret URL oluşturur, böylece web sunucusu statik gönderebilirsiniz.

Sana bir şey satın alacak, aynı sayfa içinde görüntüleri önyükleme sanmıyorum. Eğer bir şey tarayıcı sadece, aynı zamanda tipik olarak 2-4, kaynakların sabit numarasını almak, çünkü apparent genel sayfa yüklenme süresini yavaşlatabilir. <body> üstündeki görüntüleri yükleme bazı HTTP bağlantı yuvaları boşaltmak için beklemek zorunda "kat üstünde" sayfasının üst kısmında başka şeyler var demektir. Daha iyi görüntüler doğal sırayla yüklemek izin.

Önyükleme iki durumda mantıklı:

  • Görüntü varsayılan olarak gösterilmemiştir, ancak kullanıcı sayfa ile birlikte hareket gerekli olması beklenmektedir. Bu iyi örnekler hover ve rollover için devlet görüntüleri için tıklayın.

  • Görüntü bu sayfada kullanılmaz, ancak bir sonraki ihtiyaç olacaktır. Bu iyi örnekler bir alışveriş sepeti gibi, sonraki bir sayfadan net bir ilerleme var herhangi bir site vardır.

Her iki şekilde de, çok bottom <body>, bu nedenle her şey yükler ilk başta önyükünü yapmak.

Sitenizde çalışacak bu iki sorunu, YSlow ele olması. Bu da Firefox için bir eklenti Firebug için bir eklenti olarak başlamış, ancak bu yana IE dışında tüm büyük tarayıcılar için taşıdık oldu.

YSlow güzelliği sadece uzantısı aktif iken sayfayı yükleyerek, otomatik olarak yaygın yavaşlama tespit olmasıdır. Daha sonra size sayfa için net bir not verir, böylece optimize "done" olduğunuzda hakim olabilir. Bir aşağıda iseniz A, henüz bitmedi. :) Web sunucuları için varsayılan yapılandırma sorunlara neden önlemek için muhafazakar çünkü, bir D ya da kötü reytinge siteleri görmek için nadir değildir. YSlow uyarıları Tespit genellikle oldukça kolaydır, ancak varsayılan sunucu geneli bu şeyleri yapmaz neden önbelleğe alma ve diğer sorunları, yaratmaktan kaçınmak için dikkatli olmak gerekir.

Başka bir cevap Google PageSpeed sunan önerilir. Bu bir sunucu tarafı Apache modülü olarak, ve bir Google tarafından barındırılan bir hizmet olarak, Chrome ve Firefox için bir eklenti olarak mevcut bulunuyor. Ben YSlow karşılaştırmasını nasıl hiçbir fikrim yok, ama ilginç görünüyor.

Ayrıca kaynak yükleme süreleri bir şelale grafiğini almak için tarayıcınızın debugger kullanarak düşünün:

  • Kundakçı size net sekmesinde bu olsun.

  • Safari, normalde Tercihler devre dışı geliştirin menüsünden aracılığı olsun. Gerekirse onu açın, sonra> Başlat Timeline Kaydı geliştirin söylüyorlar. Bu Ağ İstekler alet içine koyar. Ayrıca> Göster Web Müfettiş Geliştirmek aracılığıyla kendisine alabilirsiniz.

  • Chrome, Görünüm> Geliştirici> Geliştirici Araçları, ardından Ağ sekmesine gidin söylüyorlar.

  • IE Araçlar> Geliştirici Araçları> Profiler aracılığıyla, bu çok zayıf bir formu vardır. Bu sadece yerine bir şelale grafiğinde daha sayıların bir tablo verir, böylece bilgiler var, ama sadece görsel yavaş kaynakları bulmak için uzun barlar için tarama olamaz.