Sayfa Yükleme Süremizi 10 Saniye Nasıl Azaltıyoruz?

Harika bir web sitesi söz konusu olduğunda hız ve sosyal birlikte çalışmıyor. Sitemizi şuraya taşıdık: volan (bağlı kuruluş bağlantısı) ve sitemizin performansını ve kararlılığını büyük ölçüde geliştirdi. Ancak site tasarımımız - Facebook, Twitter, Youtube ve Podcast'imizdeki sosyal aktivitemizi destekleyen kalın bir altbilgi ile - sitemizi yavaşlattı.

Bu kötü oldu. Harika bir sayfa 2 saniye veya daha kısa sürede yüklenirken, sitemizin bir sayfanın tamamlanması 10 saniyeden fazla sürüyordu. Sorun WordPress veya Flywheel değildi, sorun diğer hizmetlerden yüklediğimiz tüm etkileşimli öğelerdi… Facebook ve Twitter widget'ları, Youtube ön izleme görüntüleri, Podcast uygulamamız, ne kadar yavaş yüklendiklerini kontrol edemedim. Şimdiye kadar.

Şimdi sayfalarımızın yaklaşık 2 saniye içinde yüklendiğini fark edeceksiniz. Nasıl başardık Altbilgimize, yalnızca kullanıcı o noktaya kadar kaydırdığında yüklenen dinamik bir bölüm ekledik. Bir tarayıcıda (mobil, uygulama veya tablet değil) sayfamızın sonuna kadar kaydırın ve bir yükleme görüntüsünün devraldığını göreceksiniz:

yük

JQuery'yi kullanarak, birisi orayı kaydırana kadar aslında sayfanın tabanını yüklemiyoruz. Kod aslında oldukça basit:

$ (pencere) .scroll (function () {if (jQuery (belge) .height () == jQuery (pencere) .scrollTop () + jQuery (pencere) .height ()) {if ($ ("# placetoload" ) .text (). uzunluk <200) {$ ("# tamamlayıcı"). load ('[yüklenecek sayfanın tam yolu]');}}});

Kullanıcı sayfanın tabanına kaydırdığında, jQuery go, belirtilen yolun sayfa içeriğini çıkarır ve bunları seçtiğiniz div içine yükler.

Site, buraya yüklenen içerikten artık yararlanmıyor olsa da (çünkü bir arama motoru onu taramıyor), sayfanın hızının sıralamamıza, paylaşmamıza ve katılımımıza birisine sahip olmaktan çok daha fazla yardımcı olacağından oldukça eminiz. sabırsızlıkla sayfamızın dayanılmaz derecede yavaş yüklenmesini bekleyin. Hepsinden iyisi, sayfa hızından ödün vermeden ziyaretçilerimizle etkileşim kurmak istediğimiz tüm öğelere hala sahip.

Hala yapmamız gereken işler var ... ama oraya geliyoruz!

Ne düşünüyorsunuz?

Bu site spam'i azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl işlendiğini öğrenin.