Chrome geliştirme cihazlarını kullanarak WordPress performansını ölçme
Bu bir konuk yazısı. Görüşler ve öneriler yazarın kendisine aittir. SAVVII’de sizin ve WP Rocket’in arkasındaki insanlar gibi hızlı yüklenen web sitesini seviyoruz. Siteniz istediğiniz kadar hızlı değilse, gelişme zamanı. İyileştirmeden önce, mevcut açık süreyi ölçmeniz gerekir. Bu makalede, birkaç dakika içinde Chrome Dev Araçları ile WordPress sitenizde trafik ve hataların nasıl kolayca bululacağını göstereceğim. Öncelikle geliştirme toolleri nasıl açılır, Chrome’da test etmek istediğiniz sayfaya gidin. Komut+I (Mac) veya Control+Shift+I (Windows ve Linux) tuşuna basın. Açık Dev Aygıt panelini göreceksiniz. ‘Ağ’ sekmesine tıklayın, mucizenin oluştuğu yer burasıdır.
Kullanıcınızı taklit edin web sitelerini test ederken, kullanıcınız tarafından kullanılan bağlantıları ve cihazları çoğaltmak önemlidir. Geliştiricinin bunun için birkaç iyi seçeneği var. ‘Çevrimiçi’ tıklayarak bağlantınızı seçebilirsiniz, şimdi örneğin 2G hücresel bağlantılara geçebilirsiniz. Aygıt simgesine tıklayarak, varsayılan seçenek olarak bir masaüstü ile en yaygın cihazlar arasında geçiş yapabilirsiniz. Bonus İpuçları: Film şeridini izlemek için kamera simgesini tıklayın. Bu, içeriğinizin kullanıcınız tarafından ne kadar hızlı görüldüğünü görselleştirecektir. Unutmayın: daha da önemlisi, kullanıcıların web sitelerini sayfalarla etkileşim kurmaktan mümkün olduğunca çabuk okuyabilmeleri ve tarayabilmesi.
İlk suçluyu bulun, ‘yüklememiz’ gereken zamana bakalım. Bu numarayı kaydedin ve bakalım geliştirip geliştiremeyeceğimizi. Aşağıdaki öğeleri kontrol ederek ve onararak, mevcut açık zamandan gelen süreyi azaltabilmeliyiz. Komut dosyası oluşturma tarayıcısından önce, sayfada neyin görüntülenmesi gerektiğini anlatabilir, tarayıcının sayfa tarafından yayınlanan tüm komut dosyalarını parçalaması gerekir. Bu nedenle, sayfa üstbilgisine bir JavaScript dosyası koyarsanız, tarayıcının sayfada neyin oluşturulacağına karar vermeden önce bu dosyadaki tüm kodları okuması gerekir. Bu komut dosyası, kullanıcı web sitenizden ekranda bir şey gördüğünde gecikir. Oranı azaltmak için, ekranda bir şeyleri mümkün olduğunca erken görüntülemek çok önemlidir. ‘DomConcenToaded’ gösteren mavi çizgiye bakarak bir oluşturma engelleme komut dosyası bulabilirsiniz. Bu satırdan önce yüklenen komut dosyası bir engelleme yapabilir. Komut dosyasını tıklayıp Önizleme sekmesini kontrol ederek araştırabilirsiniz. Bu komut dosyasını senkronize etmeye çalışın, kapak gövdesi etiketinin yakınında hareket edin (WPROCKE bunu sizin için yapabilir) veya tamamen kurtulun. Google, Render Engelleme ile Asenkron JavaScript hakkında çok iyi bir makale yazdı. Şüpheli Durum Kodu Sunucudan indirilen tüm varlıklar bir durum kodu ile donatılmıştır. Bu durum kodu çok şey anlatıyor. Durum kodu 200 ‘Tamam’ anlamına gelir. Tüm varlıklarınızın 200 durum koduna sahip olmasını istersiniz. Durum sütununa göre ağ sekmenizdeki varlıkları sıralayarak şüpheli bir durum kodu bulabilirsiniz. 200’i geçin ve başkalarına odaklanın. Geliştirmek istediğiniz durum kodu çoğudur:
4xx – İstemci hatası, özellikle 404 (dosyalar bulunamıyor)
3xx – Transfer, özellikle 301 (kalıcı) ve 302 (geçici) transferi
5xx (sunucu hatası)
Lütfen tam liste için htttatatları kontrol edin.
Büyük talepler büyük talebin kötü olması şaşırtıcı değildir. Yavaştırlar ve çok fazla bant genişliği harcarlar (özellikle sınırlı bant genişliğine sahip cep telefonu aboneliği olan kullanıcılar için). En büyük varlığı bulmak için ‘Boyut’ sütununu sıralayın. Genellikle bu büyük varlıklar görüntü veya video dosyalarıdır. Görüntü boyutunun, sitenizde kullanma şeklinizin boyutlarıyla eşleştiğinden ve görmek için uygun tutan sıkıştırma miktarıyla kaydedin. Hayali gibi hizmetler, iyi görünürken bu resimleri daha da sıkıştıracaktır. Yavaş talep büyük talep genellikle yavaştır, ancak yavaş talep her zaman büyük olduğu anlamına gelmez. Bu nedenle, ‘Zaman’ sütununa göre sıralamak da iyidir. Yavaş talep genellikle belirli izleme veya işlevsellik için harici bir komut dosyasıdır. Bu varlığın indirilmesini isteyen varlık başlatıcı sütununun hangi varlık başlatıcısı olduğunu görebilirsiniz. Ayrıca, ne olduğundan emin değilseniz, varlık içeriğini kontrol etmek için önizleme sekmesini kullanın. Harici komut dosyalarının optimize edilmesi çok zordur. Sitenizi çok fazla yavaşlatırlarsa, diğer tedarikçileri düşünün. Daha derin varlıkları nasıl kontrol ederlerse, birincil sekmeyi kullanarak yapabileceğiniz birkaç şeyden bahsettik. Ayrıca diğer sekmeleri de keşfetmelisiniz: başlıklar, yanıtlar, çerezler ve zaman ayarları.
Başlık Bu, önbellekleme hakkında bir açıklama için üstbilgiyi kontrol etmek için kullanışlıdır. Önbellek stratejisini optimize etmenin çeşitli yolları vardır. Google iyi bir arsa diyagramı yaptı. Önbellek politikası, sunucular ve web siteleri de dahil olmak üzere birçok farklı varlık tarafından düzenlenebilir. Savvii’de sitenizi hızlandırmak için vernik önbellek kullanıyoruz. Verniklerin sayfada doğru işlev görüp çalışmadığını doğrulamak istiyorsanız, bu başlık bilgileri bir kurtarıcı olabilir. Üstbilgiye ek bilgi ekleyerek, sayfanın vernikten sunulup sunulmadığını kolayca görebilirsiniz. Birincil sekmede mümkün olduğunda bir varlığın (HTML veya görüntü gibi) görsel gösterimini gösterecektir. Yanıt sekmesi varlık kodunu gösterir (resimler için mevcut değildir). Bu pasta, Phpsessid çerezlerini kontrol etmek için çok kullanışlıdır. Böyle bir çerez varsa, oturumlar kullanılır. Örneğin, kullanıcının alışveriş sepetinde öğeler varsa oturum çok ihtiyaç duyulabilir. Bir oturum kullanmak için bir neden görmüyorsanız, başlangıçta oturumun olmadığından emin olun. Oturum önbelleklemeyi çok daha zorlaştırıyor. Zaman çünkü açık zamanı optimize etmekten bahsediyoruz, zaman ayarı sekmesi önemli hale geliyor. Bu sekmede, varlıkları indirmek için gereken çeşitli aşamaların zaman ayarlarını görürsünüz. Analiz edilmesi gereken en önemli şey:
HTTP 1.0/1.1, aynı alandan sadece altı bağlantıyı bir noktada ele alabileceğinden kuyruk varlıkları teslim edilebilir. Çok sayıda küçük varlığınız varsa, bu sitenizi yavaşlatabilir. Varlık miktarını azaltmaya bakınız (sprite kullanmak gibi), bir etki alanı paylaşımı (örneğin CDN ile) veya en iyisini kullanarak: HTTP/2 protokolünü kullanan SavVII gibi ana bilgisayarları kullanın. HTTP/2 aynı anda bir dizi varlığı boşaltabilir. Bekleme (TTFB) TTFB, ilk bayta zamanın kısaltılmasıdır. İstediğiniz sayfadan HTML belgeleri için bu zamanı kontrol etmeniz gerekir. Bu kez ayar, istek gönderildiğinden beri ilk baytı tarayıcıya geri almak için gereken süreyi ölçer. Bu, Bootstrap WordPress’i içerir, PHP işlevlerini çalıştırır, bir veritabanı sorgusu çalıştırır, HTML cüzdanları ve kullanıcıya geri gönderir. TTFB’yi iki kez ölçmelisiniz, önce TTFB’yi önbellek devre dışı bırakarak kontrol etmelisiniz ve ayrıca önbelleğe alınarak (‘kullanıcınızı taklit edin’ paragrafına bakın). İyi bir barındırma şirketi, WordPress web sitenizi hızlandırmak için sunucu tarafı önbelleğini kullanacaktır. Genel olarak, açılış saatinizi tarayıcınızdan analiz etmenin bazı hızlı ve kolay yollarını açıkladım. Bundan sonra, performansı daha da artırmak için SavVII gibi iyi yönetilen WP roket ve barındıran WordPress kullanabilirsiniz. Lütfen ipuçları veya ek geliştirici araç soruları ile yorum yapın.
