WordPress Optimize Etme: Web sitenizi 7 saniyede nasıl analiz edersiniz?

Jan Hornung
9 Dk.
Bu ipuçları ve bizim hile sayfası ile, analiz edebilirsiniz WordPress sadece 7 saniye içinde sayfaları ve hatta Google daha iyi PageSpeed Insights
Son güncelleme tarihi 27.03.2020

İster misin WordPress bazı önlemler kristal berraklığında, iyi bilinen ve etkili olduğu kanıtlanmıştır. Ama hatta sözde iyi optimize edilmiş sayfalar genellikle hala potansiyele sahip. Bu yüzden Google'ın ötesinde buna değer PageSpeed Insights ve Co. Çünkü birçok performans aracı gerçek veri altın madeni sunarn, çok kapsamlı bir analiz için izin - ne aramak için biliyorsanız. Bugün size 7 ipucu göstereceğim. bu ile Analyse sadece 7 saniye içinde başarılı.

Google'ın gibi basit performans araçları Sitemi Test Edin Veya Google PageSpeed Insights sonuç olarak, eylem için öneriler listesi. Başlangıç için iyi olabilir. İstersen WordPress ancak, projeleri etkin bir şekilde izlemek ve WordPress Anlamlı bir şekilde optimize etmek istiyorsanız, er ya da geç Sayfanızın yükleme süresini de dolduran ve alışveriş yaparken blogunuzun, mağazanızın, şirketinizin sayfanızın tam olarak nasıl davrandığını gösteren bir performans aracına başvurmalısınız.

Bunlar arasında, örneğin, Pingdom, GTMetrix Veya Web sayfası testi. Bunlar genellikle sözde Şelale diyagramı Ile. Bu biraz hantal veri kümeleri pek çok kullanıcı tarafından fark edilir. Ancak, eğer profesyonel iseniz WordPress Nasıl çalıştıklarını anlamalısın. Çünkü: Sayfanızın ne kadar hızlı yükyükolduğunu, ev sahibinizin ne kadar iyi olduğunu, sayfanızın ne kadar verimli yükyükettiğini ve sitenizin şantiyelerinin nerede bulunduğunu gösteren başka bir veri kaynağı yoktur.

Ve küçük bir uygulama ile bir bakışta her sayfaanaliz edebilirsiniz ve (elle durduruldu) 7 saniye her sayfa 😉

Bu nasıl olacak? Bugün size adım adım göstereceğim!

ebook: Sitenizin performansını profesyonel gibi ölçün

WordPress optimize: şelale diyagramı olmadan, sadece yüzeyçizik

Belki şimdi merak ediyor: Neden tüm çaba? Zaten bana tüm önemli optimizasyon önlemleri göstermek büyük performans araçları vardır. Buna ek olarak, genellikle zaten aşağıdaki noktaları ile sınırlıdır:

Tabii, bir kez açıklık ve bu noktaları optimize ettik, gerçekten hızlı bir sayfa için çok iyi bir temel oluşturduk. Bu nedenle bu nedenler (oldukça haklı) tüm iyi performans kılavuzları ele alınmıştır.

Örneğin,

Ve aynı zamanda en yaygın Şarj süresi frenleri WordPress Sayfa bu nedenler her zaman ön yerlerde sona erer.

Ancak, web sayfası testi ve kapsamlı site kontrolleri ile sistematik performans analizleri yüzlerce deneyimimiz gösterir: Hatta sözde "optimize" WordPress Sayfalar her zaman performans tuzakları bulunur. Şelale nin haritası da burada işe yarıyor. Çünkü özel bir şey yapabilir: sayfanızın nasıl yüklendiğini, hangi öğelerin yüklendiğini ve ne kadar hızlı olduğunu gösterir.

Veri hazinesine nasıl ulaşılasınız?

Tüm iyi performans analizleri de çıkış şelale diyagramları. Örneğin, Pingdom araçlarını kullanıyorsanız, yeterince uzağa kaydırmanız yeterlidir.

WordPress pingdom Şelale optimize
Pingdom araçları ile şelale diyagramına ulaşmak için biraz kaydırmanız gerekir. İlgili bölüme Dosya İstekleri denir. Web sayfası testi ve GT-Metrix'in diyagramlar için kendi sekmeleri vardır.

Ama doğru tüm bu bilgileri yakalamak için, nasıl doğru şelale grafikleri okumak için anlamak gerekir.

Şelale diyagramları doğru okuma

Bilginin yoğun yoğunluğu şelale diyagramları tam olarak kendi netlik için bilinen olmadığı anlamına gelir. Aslında, kayıtları anlamak için sadece dört şey bilmeniz gerekir:

  1. X ekseninde zaman kaldırılır.
    Şelale diyagramları kronolojik olarak yapılandırılır: X ekseni bir öğenin tam olarak ne zaman yüklenmeye başladığını ve ne kadar yüklemenin sürdüğünü görmenizi sağlar. Şelale diyagramı bu kadar değerli kılan tam olarak bu kronolojik yapıdır. Bu şekilde şarj süresinin tam olarak nerede kaybolduğunu ve şarj hızınızı optimize etmek için hangi işlemlere başlamanız gerektiğini görebilirsiniz.
  2. Her HTTP isteği Y ekseninde kaydedilir.
    Çoğu şelale grafiği için, bunlar hakkında ek bilgi için Y eksenindeki öğeleri tıklatabilirsiniz.
  3. Bir gösterge, ne tür bir kaynağın yüklendiğini gösterir.
    Webpagetest renkleri HTML, CSS, görüntüler, flaş vb, Pingdom bu amaç için semboller kullanır.
  4. Ek bir kodlama sistemi, sunucuya bağlanmanın ne kadar süreceği veya HTTPS'nin kullanılıp kullanılmadığı gibi tek tek isteklerin nasıl yürütüldedildiği hakkında bilgi sağlar.
WordPress Optimize Etme: Web sitenizi 7 saniyede nasıl analiz edersiniz?
WordPress şelale diyagramının alanlarını optimize etmek
Bu resimde yukarıda açıklanan dört alanı bulacaksınız.

WordPress 7 saniyelik analiz ile optimize etmek

Yani şimdi nasıl bir şelale grafik okumak açıktır - ama ne anlayışlar ondan çizebilirsiniz?

Performans analizimizde, 7 saniye analiz Kanıtlanmış: Diyagram, şarj hızı için yedi önemli faktöre bir bakış sağlar. Bu yedi kesmek tam olarak nasıl ve ne kadar hızlı web sitenizin işlenir anlamanıza yardımcı olur. Ve onları daha hızlı yapmak, sorunları gidermek veya daha da geliştirmek için potansiyel olduğunu gösterir.

Not

Örneklerimizde, bu arada, her zaman Webpagetest şelale diyagramları bakın, biz her zaman bu aracı kullanmak, çünkü, el ile veya otomatik olarak.

İpucu #1: Boyut önemlidir

Şelale ne kadar uzun sayılsa (yani Y ekseninde ne kadar çok öğe kaldırılırsa), daha fazla istek işlenir ve sayfa yükleri o kadar yavaş olur. Yine de, uzun bir şelale mutlaka kötü olmak zorunda değildir. Olmadan yapamayacağınız veya yapmak istemediğiniz özellikler ve dış kaynaklar vardır. Örneğin, canlı sohbet böyle bir araçtır. Tabii ki sohbet programının yüklenmesi sitemizi yavaşlatıyor. Ancak, hızlı sohbet desteği bizim barındırma önemli bir parçasıdır. Biz ile dağıtmak olabilir Plugin bu yüzden değil.

HTTP/2 ayrıca, istek sayısının birkaç yıl önce olduğu kadar önemli olmamasını da sağlar.

Yeni web standardı ile istekler birbiri ardına değil, aynı anda işlenebilir. Buna ek olarak, sunucu zaten bir önlem olarak HTTP/2 altında tarayıcıya HTML dosyaları gönderir. Yeni standart, çok sayıda HTTP isteğinden karşılaşabileceğiniz dezavantajları telafi eder. Ancak, HTTP/2'den yararlanabilmek için web sitenizin HTTPS üzerinden, yani SSL Belgesi var.

Her durumda, deneyim bir şelale uzunluğu ve gerçek yükleme hızı arasında doğrudan bir ilişki olduğunu göstermiştir. En azından belirli bir sınıra kadar: 100'den fazla soru çoğu durumda, oldukça sayıda vardır Tasarruf potansiyeli.

Web siteniz bu eşiği aşarsa, HTTP isteklerinize ayrıntılı olarak göz atmalısınız. Örneğin, ana sayfamız 130'dan fazla HTTP isteğiyle yüklenir. Yani burada optimizasyon potansiyeli var.

Şelaleniz 100'den fazla istek içeriyorsa, hangilerini onsuz yapabileceğinize yakından bakın.

İpucu #2: Şarj süresini algılama

X ekseninizdeki maksimum değer yükleme hızını analiz etmek için gereklidir: burada web siteniz tamamen oluşturulmadan önce ne kadar zaman geçtigini görebilirsiniz. Bu değer ne kadar küçükse o kadar iyi.

X ekseninizin maksimum değeri 10'un üzerindeyse, kesinlikle yan ınızın şarj hızıyla başa çıkmalısınız.

Sayfanızın toplam yükleme süresi 10 saniyeden az olmalıdır

İpucu #3: Keçeşarj süresini algılama

Çoğu kullanıcı hangi değerlerin analiz araçlarını tükürdeğini umursamaz. Onlar için önemli olan tek şey: sayfa yüklerini ne kadar hızlı hissettiğidir.

Bir site operatörü olarak sizin için, bu nedenle mümkün olduğunca hız bu hissi geliştirmek için önemlidir. Bunu, örneğin, en iyi önbelleğe alma, kıvrımüstü optimizasyon veya - müşterileriniz yurtdışında dayanıyorsa - bir İçerik Dağıtım Ağı (CDN) kullanımı yoluyla elde edebilirsiniz.

Neyse ki, ancak, bu şelale diyagramları ile yükleme süresi hissettim de çok sürünme için iyidir. Bildiğimiz kadarıyla, Web sayfası testi arasında kullanılabilecek tek ücretsiz araçtır teknik olarak ölçülen Şarj süresi ve kullanıcı tarafından algılanan şarj süresi.

Diyagramın tamamı daha az önemli olan teknik yükleme süresini gösterir. Keçe yükleme süresi diyagramdaki mavi ve yeşil çizgiler arasında gizlidir.

Yeşil çizgi, Web sayfasının ilk görsel öğesinin ne zaman yüklendiğini gösterir (burada "Başlat Render" noktası olarak adlandırılır). Mavi çizgi, kullanıcının sayfayı tam yüklü olarak algıladığında , bu noktadan itibaren sayfayla etkileşim olasılığı önemli ölçüde arttığını gösterir. Bu iki satır mümkün olduğunca sol ve birbirine yakın olmalıdır.

WordPress keçe şarj süresinin en iyi şekilde haritalama
Turuncu alan, görünür içeriğin işlenmediği aşamayı gösterir. Bu aşamanın sonuna kadar, ziyaretçi sadece bir beyaz tarafı görür. Mavi alan, Ziyaretçinin görünür bir işleme işlemini (örn. bir kum saati) algılayabildiği Başlangıç İşlemi ve Yükleme Süresi arasındaki zaman aralığını işaretler. Her ikisi de keçe yükleme süresini oluşturur.

Web sayfası testi bu verileri veren tek araçtır. Biz Pingdom Araçları veya GTMetrix bu farkında değildir. Bu nedenle, bu kural yalnızca Web sayfası testi kullanır:

Yeşil çizgi yaklaşık 2 ila 3 saniye sonra, en geç 7 saniye sonra mavi çizgi görünmelidir.

İpucu #4: HTTP/2 vs. HTTP/1

HTTP/1 ile karşılaştırıldığında, HTTP/2 belirleyici bir avantaj sunar: Yeni web standardı ile sayfalar çok daha hızlı yüklenir. Ancak, bir SSL sertifikasına ek olarak, bu hizmeti sağlamak için hosterinizin de olması gerekir. Ancak, birçok site operatörleri bu aslında onlarla durum olup olmadığı konusunda belirsizdir.

HTTP/2'nin en büyük avantajlarından biri birden çok isteğin eşzamanlı olarak işlenmesidir. Ve bunları şelale diyagramınızda açıkça görebilirsiniz. İstekler kronolojik olarak kaldırıldığından, HTTP/2 kullanıldığında X ekseninin aynı noktasında birkaç çubuk başlar.

WordPress bir şarj davranışını optimize WordPress http/2 ile ve olmadan sayfa
Solda, tipik bir şarj davranışı WordPress http/2 olmadan sayfa. Tek tek HTTP istekleri sırayla gerçekleştirilir. Sağtarafta aynı sayfanın HTTP/2 ile nasıl hissettiğini görebilirsiniz: Tek tek istekler aynı anda buraya yüklenir.

Tek tek istekleri paralel olarak yükleyin, sayfanız HTTP/2 ile çalışır.

İpucu #5: Çok büyük görüntüleri algılama

Analiz ettiğimiz web sitelerinin yaklaşık yüzde 30'u ile görüntü boyutu açısından hala potansiyel buluyoruz. Bu, çoğu web yöneticisinin bu işlerden en iyi şekilde karşıçıktığını varsayması olmasına rağmen.

Deneyimlerimizde, görüntüler önbelleğe alma sonrası sayfa yükleme süresinin en önemli faktörüdür. Arka uçta yüklediğiniz her resim için, WordPress diğer dosyaların, küçük resimlerin veya öne çıkan görüntülerin bir dizisini otomatik olarak görüntüler. Bu dosyaların doğru sıkıştırma boyutunu azaltmak ve bu nedenle sayfanızın hızını yükleme için en etkili yollarından biridir.

Resimlerinizi makul bir şekilde en iyi duruma getirme:

Şelale diyagramında, görüntüler hızlı bir şekilde gösterge kullanılarak tespit edilebilir: Web sayfası testi menekşe çubukları ile gösterir, Pingdom bir simge ile. Yalnızca GTMetrix görüntüleri ayrı ayrı ayırt etmez. Her durumda, ilgili çubuklar kalan isteklerin çubuklarından çok daha uzunsa, bu uzun bir görüntü yükleme süresini gösterir.

WordPress Görüntüler gerçekten çok büyük olduğunda bu nasıl göründüğünü optimize edin
Sıkıştırılmamış görüntülerin aşırı ama çok canlı bir örneği. Bazı dosyaların tek başına yüklenmesi 8 saniyeden uzun sürer ve tüm sayfayı yavaşlatma sağlar.

Yukarıdaki gibi bir durumda, resimlerinize yakından bakmalısınız. İlgili isteği tıklatarak, genellikle bir şelale diyagramında tam olarak hangi dosyaları olduğunu görebilirsiniz. Bu, şarj süresi frenleri için arama çok daha kolay hale getirir.

Görüntü kaynakları için uzun yük çubukları sıkıştırma spotezial gösterir.

İpucu #6: Yönlendirmeleri bul

Şelale diyagramı, yalnızca hangi öğelerin ne zaman ve ne kadar hızlı yüklendiğini değil, aynı zamanda kaç yeniden yönlendirme nin ayarlandığını ve nereye işaret ettiklerini anlamanıza yardımcı olur.

İletmeli istekler genellikle renkli olarak vurgulanır. Diyagram ayrıca hangi yönlendirmenin ayarlandığı ve nereye gittiğini de bildirir.

WordPress iletme tanımlamayı optimize etme
Bu sayfada art arda birkaç 302 iletme vardır.

Bir şelale diyagramı ile bir bakışta kaç tane ve hangi yönlendirmelerin ayarlandığını görebilirsiniz. Bu, DNS değişikliğinden sonra forwardloops algılamaya da yardımcı olur. Sarı işaretler sayesinde, gereksiz ve hatta zararlı yönlendirme kumları birkaç kez tespit etmek mümkün olmuştur.

Sarı çizgiler ileri ye işaret eder.

Ipucu #7: Hataları bir bakışta algılama

Bazen, Bir Web sayfasının öğeleri doğru şekilde oluşturulamayabilir. Bu, örneğin AdSense çerçevelerini değil, aynı zamanda gömülü eşlemleri ve yazı tiplerini etkileyebilir.

WordPress şelale diyagramı hataları optimize kırmızı çizgilerle tanımlanır
Bu sayfa bir 404 hata atar.

Bu durumda, şelale grafiği bir hata iletisi atar ve satırı kırmızı ile işaretler. Diyagram ayrıca hangi hatanın söz konusu olduğunu ve hangi kaynağın hatayı ürettiğini de gösterir.

Kırmızı çizgiler, sayfayı işlerken hataları gösterir.

Ile Hile Sayfası görünümdeki tüm ipuçları

Bir şelale grafik muhtemelen sizin için kullanabileceğiniz en değerli değerlendirme WordPress sayfalar elde edilebilir. Bu, bir sayfa işleci olarak aklınızda bulundurmanız gereken çeşitli verileri birleştirir: yükleme süreleri, oluşturma sırası ve hata iletileri. Bu makalenin ipuçları ile silahlı, hızlı bir şekilde tanıyabilirsiniz ve etkili, nerede optimizasyon potansiyeli hala yükseltilecek:

  • Şelale çok mu uzun (100'den fazla istek)?
  • X ekseninin maksimum değeri çok mu büyük (10'dan büyük)?
  • İstekleri paralel olarak yükleyin (HTTP/2 üzerinden)?
  • Görüntüler çok mu büyük (bu yüzden görüntüler kötü optimize edilir)?
  • Yeşil ve mavi çizgiler çok uzak sağa veya çok uzak (bu yüzden kullanıcı yavaş olarak sayfa algılar)?
  • Beklenmeyen sarı çizgiler (forvetler) var mı?
  • Kırmızı çizgiler (hatalar) var mı?

Kuşkusuz, bu analiz için daha uzun gerekebilir ilk kez. Ancak, biraz deneyimle, şelale diyagramları WordPress çok daha iyi anlamak ve daha derinlemesine projeleri optimize etmek.

RAIDBOXER ilk saat ve Destek Başkanı. Bar ve WordCamps anda, o PageSpeed ve web sitesi performansı hakkında konuşmak için tercih ediyor. Ona rüşvet vermenin en iyi yolu espresso ya da Bavyera Brezn'idir.

Benzer makaleler

Bu makaledeki yorumlar

Yorum yaz

E-posta adresiniz yayınlanmayacaktır. Gerekli alanlar * Işaretlenmiş.