WordPress’te Etkileşime (TTI) zaman nasıl artırılır
İnteraktif saatin ne olduğunu bilmek ister ve WordPress sitenizin hızını nasıl etkiler? O zaman okumaya devam edin, çünkü hepimiz hızlı ve kolay bir web sitesinin etkileşime girmesini istiyoruz. Hiçbir şey sayfada bir yere tıklamaktan daha sinirli olamaz ve eylemlerimizin sonuçlarını almaz, değil mi? Web sitenizin olağanüstü bir kullanıcı deneyimi sağladığından emin olmak için, dikkat etmeniz gereken birkaç metrik vardır ve TTI bunlardan biridir. Kullanıcı merkezli bir metrik olarak Interactive Time, Lighthouse tarafından hesaplanan küresel performans puanının% 10’unu tutar. Bu muhtemelen son puan için en etkili metrik değildir, ancak kullanıcıların yaşadığı hayal kırıklığı sayfanızdan çıkmalarına veya daha da kötüsü: web sitenizden!
Etkileşimli saatin ne olduğunu, neden önemli olduğunu, hangi araçların ölçebileceğini ve puanı neyin etkilediğini açıklayacağız. Ayrıca, etkileşimli değere kötü zamanı artırmak için bazı teknik ipuçlarını da paylaşacağız (TTI 3.8 saniyeden fazla). Son olarak, genel performans puanınızı nasıl artıracağınızı göstereceğiz ve web sitenizin hasar görmediğinden emin olacağız. İnteraktif için (TTI) deniz fenerinde ne anlama geliyor? Etkileşimli önlemlerin zamanı, ziyaretçilerin sayfanızla ne kadar hızlı etkileşime girebileceği. Bu, kullanıcının performansı ve etkileşimi görüntüleme şeklini doğrudan etkileyen yük duyarlılığını değerlendirmek anlamına gelen bir laboratuvar metriğidir.
TTI Metrik Ölçümler Sayfa ana alt kaynak yüklenene ve kullanıcının eylemlerine hızlı bir şekilde yanıt verebilecek kadar yüklenmeye başladığında. Kısacası, TTI, sayfanın herhangi bir JavaScript kodunu ne kadar hızlı yürütebileceğini ölçer, böylece bileşenler herhangi bir kullanıcı eylemine hızlı bir şekilde yanıt verir. Bu, hangi sayfaların etkileşimli göründüğünü belirlemeye yardımcı olur. Bir örnekle açıklayayım. Kullanıcılar ekranda hareket eden davet düğmesini görebilir. Üzerine tıklamaya çalıştı, ancak hiçbir şey olmadı: öğe tıklanamaz. Hayal kırıklığına uğramış, değil mi? Metrik TTI, etkileşimli görünen ancak aslında olmayan sayfaları tanımlamanıza yardımcı olur. TTI toplam engelleme süresine uygun çalışır, çünkü TTI, kullanıcı eylemlerine sayfa yanıtınız hakkında bilgi verir. Ne zaman: – Bu sayfa ilk içerikli boya ile ölçülen faydalı içerik görüntüler. – En görünür sayfa öğesi için kayıtlı olayların kullanılması – Sayfa, kullanıcı etkileşimine 3.8 saniyede yanıt verir.
, geliştiricilerin web sayfalarının kalitesini iyileştirmesine yardımcı olan açık kaynaklı ve otomatik bir araçtır. Bu, hız, performans, erişilebilirlik, UX ve arama motoru optimizasyonu (SEO) denetimleri yapar. Olağanüstü kullanıcı deneyimi sağlamak için, site 90 ile 100 arasında bir puan almaya çalışmalıdır.
Lighthouse tarafından gerçekleştirilen performans puanları arasında TTI – PSI Kısacası, TTI hızlı bir şekilde sayfanın kullanılabilmesine yardımcı olur. Lighthouse V8, temel web verileri, hız endeksi, interaktif süresi ve toplam engelleme süresi dahil olmak üzere son performans puanınızı üretmek için altı metriği birleştirir: >
td> 25
-3.8 s (Web.dev, skorun 5 s’ye kadar alınabileceğini söylüyor)
> <200 ms
> TTI puanlarını belirlemek için etkileşime girme süresini nasıl ölçüleceğini, sayfanın ilk komut dosyasına görsel olarak yüklenmeye başladığında zaman ölçmeniz ve kullanıcı girişine güvenilir bir şekilde hızlı bir şekilde yanıt verebilmeniz gerekir. Deniz Feneri TTI ölçmek için dört adımı izler:
İlk içerikli boyadan başlayarak (ilk metin ve görüntü öğeleri ekrana görüntülendiğinde).Sessiz bir pencere için en az beş saniye boyunca zamanında sabırsızlanıyoruz (sessiz pencere = uzun görev yok ve uçuşta net ağlar için ikiden fazla istek yok)
Pencere sakinleşmeden önce son uzun görevi tekrar arayın, uzun bir görev bulunmazsa FCP'de durun.
TTI, pencere sessiz olmadan önce son uzun görevin son zamanıdır (uzun görev bulunmadıysa, değer FCP ile aynıdır). Aşağıdaki şema sayesinde dört adımı görselleştirebilirsiniz:
TTI'nin nasıl hesaplandığını açıklayın - Kaynak: WebDev - TTI'yi otomatik olarak ölçecek araçlar nelerdir? Lighthouse teknolojisini kullanarak TTI ve performansınızı ölçmek için iki farklı araç kullanabilirsiniz.
TTI metriklerini ölçmek için Google PagePeed Insight'ı (PSI) kullanın:
Zaman Etkileşimi - PSI TTI değeri elde etmek için gtMetrix'i kullanma:
Etkileşimli zaman - GTMetrix Her iki araç da TTI puanları verir, ancak gördüğünüz gibi, yeşil bölgedeki şekil - biraz farklıdır: TTI skoru (PSI): 0.8 s
TTI skoru (GT Metrix): 1.2 s Bu esas olarak deniz feneri testi metodolojisi, test yeri vb. Dahil olmak üzere çeşitli faktörlerden kaynaklanmaktadır.
Yeşil: 0-3.8 (iyi)
Turuncu: 3,8-7.3 (Onarılmaya ihtiyacım var)
Kırmızı: 7.3 (kötü)
Kabul edilen TTI puanları - Web.dev interaktif için zaman genellikle Metrik İlk Giriş Gecikmesi (FID) ile karşılaştırılır. Bir sonraki bölümde nedenini açıklayacağız. İlk giriş gecikmesi (FID) interaktif (TTI) için zamanla aynı mı? FID ve TTI, web sayfalarınızın etkileşim seviyesini ölçer. Bununla birlikte, bu benzerliğe ek olarak, bazı farklılıklar da buluyoruz: TTI, kullanıcı girişine yanıt vermeye hazır olmak için zamanın ne kadar süre olduğunu ölçerken, FID sayfanızın kullanıcının gerçekten etkileşime girmeye çalıştığı zaman ne kadar duyarlı olduğunu ölçer.
TTI laboratuvar verileri (gerçek dünya kullanıcıları olmadan) ile hesaplanabilir, ancak ilk giriş gecikmesi (FID) gerçek kullanıcı verileri gerektiren özel bir alandır. FID hesaplamaları laboratuvar ortamında yapılamaz. Bu veri şekli yalnızca gerçek kullanıcılardan toplanabilir.
İlk giriş gecikmesi, sayfa tamamen etkileşimli olmadan önce oluşan kullanıcının girişini izler. İlk giriş ertelemesi, başlangıç ve kritik etkileşimi yakalamanızı sağlar: Fid-tti açıkladı
Gerçek dünya kullanıcılarının hesaplanmasını gerektiren FID - aşağıda gösterildiği gibi birisi sayfayla etkileşime girdiğinde neler olduğunu ölçen temel bir web veri metriğidir:
Metrik FID: Kullanıcı girişinden tarayıcı yanıt süresine
Etkileşimi açıklayın - Kaynak: PagePeed Insights gibi araçlara gerçekten hoşlanmıyor ve performans seviyenizi azaltarak web sitenizi cezalandırmaktan çekinmeyecekler. Deniz Feneri V8 performans puanlarında deniz feneri skorlarında TTI ağırlığı, TTI ağırlığı% 15'ten% 10'a düşürülmüştür. Deniz Feneri Puanlama Hesap Makinesi V8 (TTI dahil) - Web.dev Neden böyle değişiklikler? Web.dev, kullanıcı geri bildirimlerine ve "metrik optimizasyondaki tutarsızlıklara, kullanıcı deneyiminde bir artışa yol açan tutarsızlıklara" doğrudan yanıt verdiğini açıkladı.
"TTI, sayfa tamamen etkileşimli olduğunda hala yararlı bir sinyaldir, ancak TBT ile azalır. Değerlendirmedeki bu değişiklik ile, geliştiricilerin kullanıcı etkileşimini optimize etmeye daha etkili bir şekilde teşvik edileceğini umuyoruz. " Kaynak: Web.dev TTI Sayfalarınızın ne kadar süre etkileşime hazır olduğunu ölçer: Ana JS UTA'larının ne kadar sürdüğü ve kullanıcı eylemlerini işleme kapasitesine ne kadar hızlı olacağını ölçer. Bu önemli bir laboratuvar metriğidir, çünkü sayfanızın kullanılıp kullanılamayacağını belirler. Size TTI'nızı 3.8 saniyenin altında tutmak için takip edilebilecek bir öneri vermeden önce, TTI puanlarının kötü olmasına neden olanı belirlememiz gerekir. Etkileşimli zamanı ne etkiler? Bakalım, Google PagePeed Insights'ın teşhis bölümünün yardımıyla etkileşimli puanlara neyin yüksek zamana neden olabileceğini görelim. Genellikle zayıf TTI değerine katkıda bulunan dört problemimiz var, yani: Kullanılmayan JavaScript ve JS kodu
JavaScript Yürütme Süresi Ana UTAS çalışması Üçüncü taraf kodu
Deniz Feneri raporundaki "fırsatlar" ve "teşhis" bölümü sayesinde, genel performans değerini artırmak için bazı ipuçlarını kullanabilirsiniz.
Fırsatlar ve Teşhis Bölümü - Rapor PSI'nın kaynağı, her hatanın tahmini tasarruflarınız üzerindeki etkisinin ne kadar olduğunu gösterir; Tamamlamak TTI ve kullanıcı deneyiminizi büyük ölçüde artıracaktır. TTI puanınızı artırmanız gerekiyorsa PSI'dan çeşitli öneriler ekledik:
Oluşturmayı engelleyen kaynakları ortadan kaldırın
Ana UTAS çalışmasını en aza indirin
JavaScript yürütme süresini azaltın
JS'yi sil. üçüncü taraf kodlarının etkisine kullanılmayan
Kritik talep zincirlerinden kaçının Pramuian istek anahtarı
Talep miktarının düşük kalmasına ve transfer boyutunun küçük kalmasına dikkat edin
Sunucu yanıt süresini azaltın
Ertelenmiş JS
JS'yi erteleyin ve kullanılmayan JS'yi azaltın
JS ve CSS'yi en aza indirin
CSS teslimatını optimize edin ve kullanılmayan CSS'yi azaltın
TTFB'yi azaltın
Ön resmen isteği DNS
Ön yükleme yazı tipi
Hücreselde TTI'yı artırın
1. JS dosyasını geciktirmek, dosyanın yalnızca tarayıcı en önemli içeriği görüntüledikten sonra yükleneceği anlamına gelir. Amaç, önce görüntülemek istediğiniz içeriğe öncelik vererek sayfanızı daha hızlı yüklemektir. TTI'yi artırmaya yardımcı olacak JS dosyalarını çözmek, derlemek ve çalıştırmak için harcanan süreyi azaltacaksınız. Genellikle askıya alınabilecek zorunlu olmayan JS örnekleri: sosyal paylaşım, çerez onayı vb. Deniz Feneri tarafından tanımlanan sorunlar: "Sonuçları engelleyen kaynakları ortadan kaldır", "Kullanılmayan JavaScript'i Azalt" ve "Kritik Talep Zincirlerinden Kaçınma Sorunu". Manuel Çözüm: Gecikme Özniteliklerinin Kullanımı: JS'yi geciktirmeye çalışırken, html'de boolean "erteleme" özniteliğini kullanabilirsiniz:
Derver özniteliği nasıl çalışıyor - Kaynak: JavaScript .PlainEnglish WordPress eklenti çözümleri:
Varlık Temizliği: Bu ücretsiz eklenti, sayfaya yüklenecek içeriği öncelikle tarar ve algılar. Tek yapmanız gereken, önce oluşturulmaması gereken CSS veya JS kodunu seçmektir. Not: Eklentinin yazarı, en iyi performans sonuçlarını elde etmek için WP Rocket gibi önbellek eklentileri ile Varlık Temizliği kullanmanızı önerir.
Async JS: Async JavaScript, WordPress sitenizin performansını iyileştirmeye yardımcı olmak için 'Defer' özelliğine hangi komut dosyalarının ekleneceğini tam olarak kontrol eder.
WP Rocket, JavaScript'in dökümünü geciktirme ve aşağıda gösterildiği gibi WordPress JS dosyasını erteleme seçeneğine sahiptir:
JS'nin ertelenmiş özelliklerini yükleyin - Kaynak: WP Roket Gösterge Tablosu. 2. JS'yi erteleyin ve JS'nin yürütülmesini geciktirerek ve kullanılmayan JS'yi silerek veya azaltarak kullanılmayan JS'yi azaltın, TTI performansınızı ve puanınızı artıracaksınız. Ana fikir, düğmeyi tıklamak veya sayfanın sonuna kadar kaydırma gibi kullanıcı etkileşimi gerçekleşene kadar tüm JS dosyalarının yüklenmesini geciktirmektir. İyi bir başlangıç noktası, JavaScript'in nereye yüklendiğini görmek için GTMetrix Şelale şemanızı kontrol etmektir. PSI kullanarak aynı tanıyı alabilirsiniz. Bir denetim çalıştırdıktan sonra, JS'nin "Bad" in kodunuzdan mı yoksa üçüncü taraf uygulamasından mı geldiğini belirleyebileceksiniz. Deniz Feneri tarafından tanımlanan sorunlar: "Kritik talep zincirlerinden kaçının" ve "Kullanılmayan JavaScript'i azaltın". Manuel Çözüm: JS'de gecikmeler yapmanın manuel yolu SetTimeout () yöntem işlevini kullanmaktır. Bu, MS'de belirttiğiniz süre sonra işlevi çağırır. Herhangi bir JS işlevini geciktirmek için çok yararlı bir kod görüntüsü kullanabilirsiniz.
Manuel olarak kullanılmayan JS'yi kaldırmak web siteniz için tehlikeli olabilir. Bir alan daha veya bir braket daha silerseniz, her şey çok kötü olabilir. Gelişmiş bir geliştirici değilseniz, manuel olarak böyle bir şey yapmanızı tavsiye etmeyeceğim.
WordPress eklentilerini kullanın:
Uçan komut dosyası: JS'yi geciktirmek ve önemli JS dosyalarına daha fazla kaynak sağlamak için eklentiler. Bu öncelik verilmeye yardımcı olur. Eklenti Organizatörü: Eklentinizi yükleme sırasını değiştirme (bu, önce oluşturulacak içeriği önceliklendirmenize yardımcı olur.)
WP Meteor: JS komut dosyasını geciktirmek ve ziyaretçilerin hissedilen hızı büyük ölçüde artırmak için eklenti (kullanıcı deneyimi için çok önemli). Gonzales: Ziyaret ettiğiniz sayfalara bağlı olarak CSS, JS ve hatta koşullu eklentileri devre dışı bırakmak mümkündür.
Temizlik varlıkları (lütfen yukarıdaki bölüme bakın).
Markatlar: Bu, eklentileri sayfa ve yayın dışında herhangi bir yerde devre dışı bırakmanıza olanak tanır. Örnek - Perfations ile kullanılmayan JS elementlerinin kaldırılması
WP Roket Önbellek Eklentisi: Tam Çözüm. JavaScript dosyalarını kolayca geciktirebilir ve tek bir tıklamada kullanılmayan JS'yi silebilir (veya azaltabilirsiniz).
WP Roket 3.9'daki JavaScript Yürütme Özelliklerini erteleme 3. Sol JS ve CSS Kodunuzu Azaltma Kodunuzu Azaltmak, Yararlı olmayan Kaos ve Noktalamayı ortadan kaldırmak anlamına gelir: yeni çizgiler, boşluklar, vb. Bu öğeler size veya geliştiricinizin kodu okumasına yardımcı olabilir, ancak bu öğeler sitenizi yavaşlatmaktan da sorumlu olabilir. Bu "işe yaramaz" kodun, komut dosyalarınızdan ortadan kaldırılması, ana UTA'ların birçok önemli göreve odaklanması için zaman ayıracaktır. Bir kez daha, bu en alakalı içeriğin önce oluşturulması için yer ve zaman yapmakla ilgilidir. Chrome Devtools'taki Kapsam sekmesi, kullanılmayan JavaScript ve CSS kodunu bulmanıza yardımcı olabilir:
Kodların Kapsamını Analiz Etme - Kaynak: Deniz Feneri tarafından tanımlanan sorun geliştirme araçları: "JavaScript Yürütme Süresini Azalt", "Ana UTA'ları En aza indirin", "Minify JS" ve "Minify CSS". Manuel Çözüm:
Önemi: Site rezervini yapın veya JS veya CSS dosyalarınızı doğrudan üretim sunucusunda düzenlemeyin.
Yüce metin veya Visual Studio kodu gibi metin editörlerini kullanın. Kodunuzu içeren dosyaları açın ve yorumları, boşlukları, yeni satırları ve eğrileri silin. Kimlikleri, sınıfları veya değişken adları mümkün olduğunca kısaltmayı ve koşullu ifadenizi optimize etmeyi unutmayın.
Web Araçlarını Kullanma:
Minifycode.com'u açın ve CSS/JS Minifier sekmesini tıklayın.
CSS/JS kodunu giriş kutusuna yapıştırın ve Minify CSS/JS düğmesini tıklayın.
CSS Minifier Araçları - Kaynak: CSS Minifier CSS ve JS'nizi küçültmek için WordPress eklentileri kullanın:
Uglifyjs (JS) Otomatik Optimizasyon Eklentisi (CSS ve JS) Yui kompresör aracı (CSS ve JS)
WP Super Minify (CSS ve JS)
CSS Nano (CSS)
CSSO (CSS)
UNCSS (CSS)
WP Rocket, JS ve CSS dosyalarını çeşitli tıklamalarda küçültmenize olanak tanır.
JavaScript dosyasını daraltmanın özelliği - WP Roket Gösterge Tablosu. CSS Dosyalarını Minimlatın - WP Roket Gösterge Tablosu 4. CSS teslimatını optimize edin ve tarayıcı içerik oluşturabilmeden önce kullanılmayan CSS'yi azaltın, tarayıcı geçerli sayfa için tüm stil ve düzen bilgilerini işlemelidir. Başka bir deyişle, tarayıcı CSS göndermelidir, ancak bu eylem diğer önemli görevler ve süreçlerle başa çıkmak için ana UTA'ları engelleyebilir. Bu nedenle, iyi performansı korumak için iki görev yapmak önemlidir:
CSS'nizin nasıl gönderildiğini optimize edin
Kullanılmayan tüm CSS'yi silin
Deniz Feneri tarafından tanımlanan sorunlar: "Ana iş parçacığı işini en aza indir" ve "Birleşik CSS'yi azaltın". CSS teslimatını optimize etmek için manuel çözüm:
CSS komut dosyasını birleştirin, sıkıştırın ve daire içine alın.
Öncelikle CSS kuralları: Üst gaga içeriği önceliklendirildi!
HTML gövdesinde etiket stili kullanmaktan kaçının.
Kullanılmayan CSS'yi silmek veya azaltmak için manuel çözümler: Bu eylemi gerçekleştirmek ve sayfalarınıza zarar vermemeye dikkat etmek için bazı teknik bilgilere ihtiyacınız olacaktır. Tam olarak kullanılmayan CSS'yi silmek istiyorsanız, CSS dosyanızın ne kadar azaltılabileceğini öğrenmek için PurifyCSS gibi araçları kullanın. Dezavantajı, silinecek CSS tanımlandıktan sonra, onu sayfadan manuel olarak silmeniz gerektiğidir.
WordPress eklentileri CSS teslimatını optimize etmek ve kullanılmayan CSS'yi silmek için:
Hız Up - CSS nakliye yükleme stil sayfası eşzamansız olarak optimize eder ve sayfa yükleme sürenizi artırır. Otomatik optimizasyon, CSS'yi hizalamak ve ertelemek ve CSS'yi optimize etmek için seçenekler içerir Varlık temizliği, kullanılmayan CSS'yi azaltmaya yardımcı olur
WP roket önbellek eklentisi, doğrudan "Dosya Optimizasyonu menüsünden" birkaç tıklamada kullanılmayan CSS'yi silerek (veya azaltarak) CSS gönderiminizi optimize etmenizi sağlar:
Kullanılmayan CSS'yi silin - WP Roket Bu özellik sizin için işe yaramazsa, CSS'yi her zaman ashnchronly yükleyebilir ve işini tamamlayabilirsiniz. 5. Sunucu yanıt süresini ve ilk bayt (TTFB) için zamanını azaltın TTI puanınızın düşük kalmasını istiyorsanız, sunucunuzun hızlı olması gerekir. Sunucu yanıt sürenizi azaltmak için aşağıdaki yöntemi kullanabilirsiniz:
Hızlı ve verimli bir barındırma sağlayıcısı seçin
CDN Services'i kullanın (dünyanın dört bir yanında hızlı CDN'lere sahip olmak daha hızlı içerik sunumu sağlayacaktır)
Gelişmiş önbellekleme kullanın
GZIP Sıkıştırma kullanın
Veritabanınızı optimize edin
PHP'nin en son sürümünü kullanın
Deniz Feneri tarafından tanımlanan sorunlar: "İlk sunucu yanıtının süresini azaltın". Gelişmiş önbellek eklentileri kullanın ve CDN: WP Rocket ve Rocketcdn önbellek eklentileri TTI puanlarını azaltmanıza yardımcı olacaktır.
WP roket kontrol paneli GZIP sıkıştırmasını etkinleştirir
GZIP Sıkıştırma Eklentileri kullanın.
WP Rocket, GZIP özelliğini otomatik olarak etkinleştirir.
Veritabanınızı optimize edin Bir şeye zarar vermeden veritabanınızı temizlemek için WP roketini kullanın.
Veritabanını Optimize Edin - WP Roket Gösterge Tablosu 6. Sitenizde Vimeo veya birkaç Google yazı tipinde yayınlanan video gibi üçüncü taraf kodunuz varsa, DNS isteklerini ön plana çıkarma, önce DNS isteklerini almanız gerekir. Bu, web sitenizi daha hızlı, SS, diğer web sitelerinden yükleme süresini ve kaynakları en aza indirecektir. Ana fikir, Preconnect'i, üçüncü taraf bir komut dosyasına, isteyene kadar beklemek yerine ilk bağlantı kurmak için kullanmaktır. Deniz Feneri tarafından tanımlanan sorunlar: "İlk sunucu yanıtının süresini azaltın", "Üçüncü tarafların kullanımını en aza indirin" ve "Gerekli kaynaklara bağlan". Manuel Çözüm:
Başlıkta "Rel = DNS-Prefetch" i kullanın. Tarayıcı tarafından alınacak alan adını manuel olarak belirleyebilirsiniz:
WordPress eklentisini kullanın:
Perfmatters eklentisinin bir DNS Prefeket seçeneği vardır:
DNS Ön Resme Seçenekleri - WordPress Eklentisi Kaynaklar Kaynakları
WP roket eklentisinde ayrıca WordPress kontrol panelinde "Ön Fetch DNS istekleri" bölümüne sahiptir:
DNS Önsöz - WP Roket 7. Önceden Yükleme Yazı Tipleri sayesinde, ziyaretçilerin tarayıcılarını erken yaşlardan itibaren önemli yazı tiplerini yüklemeye "zorlayabilirsiniz". Özel bir yazı tipi markanızın önemli bir parçasıdır, bu nedenle web sitenizde görüntülemek çok önemlidir. Ancak, performans sorunlarından kaçınmak için Pramuian web yazı tipi için en iyi uygulamalar vardır. Dikkate almak isteyebileceğiniz üç öneri: Doğru yazı tipi biçimini (WOFF ve WOFF2) kullanın.
Pramuian yazı tipi (aşağıdaki bölümde açıklandığı gibi). Doğru yazı tipi bildirimini kullanın (doğru yazı tipi ailesi).
Deniz Feneri tarafından tanımlanan sorunlar: "Pramuiuan Anahtar İsteği". Manuel Çözüm:
Tarayıcıya uygun etiketi kullanarak Pramuian yazı tipini yapmasını söyleyin ve "ön yük" woff2 ″ crossorigin = "anonim"> Etiketi nereye koymalı? Bu bağlantı etiketini, sitede yayınlanan her CSS, komut dosyası ve yazı tipi dosyaları için HTML'nizdeki kafa etiketleri arasında girmeniz gerekir.
WordPress eklentilerini kullanma:
Önce yazı tiplerini yüklemek için WP roketini kullanın. "Sekme ön yükünü" açın, "önceden yükleme yazı tipleri" ni kaydırın ve daha önce sığdırmak istediğiniz yazı tipi dosyasının URL'sini belirleyin: Ön Yüklü Yazı Tipi - WP Roket 8. Gösterge Tablosu Mobilde etkileşim için zamana odaklanıyor Mobil cihazlarda etkileşime kadar nasıl artar? İlk olarak, herhangi bir JavaScript probleminin üstesinden gelmeye odaklanın. Ardından, yukarıda listelenen tüm performans önerilerini uygulayın. Unutmayın: ne kadar çok komut dosyası, daha uzun TTI ve bu bir cihazdan diğerine de değişebilir. Bilgisayardan daha az güçlü bir işlemciye sahip bir akıllı telefon örneğini ele alalım. Son olarak yayınlanan bir site, JavaScript komut dosyalarının sayısının etkisini kesinlikle deneyimleyecektir. Google'ın önerisi, istikrar ve hücresel web siteleri oluşturmak için gerekli olmayan komut dosyalarını silmek veya geciktirmektir. Bu nedenle, JavaScript'inizi kontrol edin, hücresel sürüm tasarımının basit kalmasını sağlayın ve kayma gibi aşırı şiddetli elemanlar kullanmaktan kaçının. WP Roket ile TTI skorlarının nasıl azaltılması Önceki bölümde görüldüğü gibi, JavaScript yürütme TTI metriklerini etkileyen en önemli faktördür. WP roketini kullanarak JavaScript'i geciktirerek ve geciktirerek, WordPress sitenizin hızını artıracaksınız. TTI değerini artıran WP roket özelliğini keşfedelim. WP roketinin TTI skorları üzerindeki etkisini analiz edin. TTI puanınızı artırmak için PSI kullanarak, WordPress için en iyi önbellek eklentisi olan WP roketini kullanmalısınız. Google PagePeed Insights kullanarak "Le Point Gourmand ..." adlı bir Fransız catering için bir hız denetimi yaptık. WP roketinden önce ve sonra performans puanlarımıza bakalım:
WP Roketinden Önce Deniz Feneri Puanı: Turuncu renkte 51/100: TTI 7.0 saniyedir, TBT 480 ms'dir
Kırmızı: Hız endeksi 6.0 D ve LCP 7.1 D'dir
WP Roketini Kullandıktan Sonra Deniz Feneri Puanı: 95/100
Teşhis ve şansın WP roketini etkinleştirmeden önce kırmızı problemlerle dolu olduğunu hatırlıyor musunuz? Web sitem sağlıklı değil ve JS ile ilgili birçok sorun bulundu: Deniz Feneri ve İyileştirme Alanı tarafından tanımlanan sorunlar - PSI, WP roketinin aktivasyonundan sonra WP roketiyle performansı optimize eder, ayrıca önceki bölümde önerdiğimiz gibi aşağıdaki seçenekleri etkinleştiririm:
JS dosyalarının optimizasyonu (askıya alınmış JS'yi yükleme ve JS yürütme özelliklerini erteleme)
JS Dosya Optimizasyonu sekmesi - WP Roket Gösterge Tablosu
CSS dosyalarını en aza indirmekten CSS teslimatını optimize etmeye kadar optimize etmek:
CSS Dosyalarının Optimizasyonu - WP Roket Gösterge Tablosu
Ayrıca Prefetingch'e birkaç URL ekledim ve bu da puanımı tekrar artırıyor:
WP Rocket tarafından ön bildirim seçeneği
Ayrıca "Ön Yük Fontları" WP roket özelliğini de kullanıyorum: Rocket WP kontrol panelinde yayınlanacak yazı tipleri ekleme PSI'nın sonuç olarak önerileri, "Geçen Denetimler" listesi önemli ölçüde gelişti ve "Minify JS", "Ana İşlem İşlerini Minimize" gibi çeşitli sorunlar, "Unified'i Kaldır JS "veya" Render Engelleme Kaynaklarını Ortadan Kaldır ", WP Roket eklentisi sayesinde kayboldu.
