WordPress’te Hız Endeksi (SI) nasıl artırılır
Web sitenizin ziyaretçi ekranınıza kaç saniye yüklenmesi gerektiğini biliyor musunuz? Cevap, hız endeksini (SI) ifade eder, performans metriği üst yarıyla ilgili herhangi bir şeyden etkilenir. Hız Endeksi (SI), Deniz Feneri raporuna genel performans puanınıza katkıda bulunur. İyi bir hız endeksini korumak olağanüstü kullanıcı deneyimi üretir: Bu, görünüm alanında bulunan içerik hızlı bir şekilde gönderildiği anlamına gelir. Performans puanınızı artırmak için, optimize edilecek altı metrik ve Lighthouse tarafından hesaplanan küresel değerin% 10’unu tutmanın hız endeksi vardır.
İyi bir hız endeksi ile kastedilen nedir? Nasıl ölçülür? Hangi araç en güvenilir? Web siteniz için bir performans denetimi çalıştırmak çok yorucu olabilir! Hız Dizin KPI’nızı kontrol etmek için adım adım kılavuzumuzu izleyin ve etkili performans optimizasyon süreçleri gerçekleştirin. Metriği ayrıntılı olarak açıklayacağız, performansınızı ölçmek için kullanabileceğiniz ücretsiz araç ve iyi bir SI değeri (3.4 saniyenin altında) elde etmek için uygulanabilecek bazı teknik ipuçları. Deniz fenerindeki hız endeksi nedir? Hız endeksi, sayfa içeriğinin kullanıcı tarafından ne kadar hızlı yüklendiğini ve görüldüğünü gösteren bir deniz feneri performans metriğidir.
Hız endeksi, Paro’da görünen parçanın Web sayfası üzerinden (ViewPort’ta) yükleme süresini gösterir. Bu, kullanıcının kaydırmadan önce gördüklerinin tüm yükleme işlemini ölçer. Aslında, Deniz Feneri video yükleme işlemi alır ve tüm çerçeveler arasındaki farkları hesaplar. Ardından, Lighthouse SI’nın son puanını hesaplamak için Speedline Node.js modülünü kullanır. (GitHub’da bu modül hakkında daha fazla bilgi bulabilirsiniz). Hız endeksi hesaplamanın sonucudur: bu, web sayfalarının ortalama oluşturma hızı ve görsel yerleşim olarak da adlandırılan görsel ilerleme. Bu, web sitesi performansının kullanıcı algısını doğrudan etkileyen yükleme süresini ölçmek anlamına gelen bir laboratuvar metriğidir. Bu görsel yerleşimi iki senaryo ile gösterelim: Sayfa A optimize edilirken, B sayfası aşağıdakiler değil:
SI ve görsel yerleşim- Kaynak: Hızla
Yükleme sürecini açıklayın – Kaynak: Dev.Bu şimdi, hız endeksinin deniz feneri tarafından ölçülen diğer 5 kpis ile nasıl karşılaştırıldığını görelim. Deniz Feneri Skorunun Ağırlığı Deniz Feneri V8 Performans Puanında, SI’nın ağırlığı% 15’ten% 10’a düşürüldü. Deniz Feneri Puanlama Hesap Makinesi V8 (SI dahil) – Web.dev Hız Endeksi Deniz Feneri tarafından Nasıl Hesaplanır? Web.dev, hız endeks puanınızın “sayfa hız endeksinizin ve gerçek web sitesi hız endeksinizin karşılaştırılması” olduğunu açıklar. Lighthouse V8 sürümü, nihai performans puanınızı üretmek için altı metrik sayar. Bu, çekirdek web canlılarını, interaktife toplam süreyi, toplam engelleme süresini ve son olarak hız indeksini içerir:
%25
0-2.5 saniye
0-3.8 saniye
0 - 0.1
çünkü çünkü Sayfanızın hızlı mı yoksa daha sonra mı kabul edildiğini belirler.
Deniz fenerine göre iyi puanı belirlemelidir.
Ve bu bizi bir sonraki bölüme götürüyor: hız endeks eşiği. İyi bir hız endeksi puanı nedir? İyi bir hız endeksi puanı 3.4 saniyenin altında olmalıdır. SI - Kaynak: Web.devHız Dizinine Karşı Cat Contentful İlk Web Vital Core güncellemelerine aşina iseniz, hız endeks metriği KPI İlk İçerik Boyası'na (FCP) benzeyebilir. Temel farkı ve iki metriğin neden önemli olduğunu açıklayayım. İlk içerikli boya aynı zamanda tarayıcının herhangi bir içeriği ilk oluşturana kadar süreyi ölçen görsel bir metriktir. Hız endeksi, üst yarıda tam içerik seviyesini açıklar.
FCP VS SI KPI - Kaynak: Daha hızlı, böylece, FCP'nizi hızlandıran herhangi bir şey hız endeksi metriğinizi artıracaktır (ve kullanıcıların korkutucu bir beyaz ekrandan daha iyi bir şey görmesi daha iyidir.) Hız dizinine karşı, içeriği stabilize eden her şeyi değiştirme Üst paro ve artan etkileşimin de iyi bir hız endeksinin korunmasına yardımcı olacaktır. Görsel kararlılığı ölçmek için Google, bir sayfa deneyim sinyalinden birikimli bir düzen kayması (CLS) kullanır. CLS, kullanıcılar veya kullanıcı deneyimine zarar veren rahatsız edici reklamlar gibi kullanıcılar tarafından arzu edilmeyen sayfalarda ani değişiklikler ölçer: CLS - Kaynak: Bu nedenle, iyi bir CLS puanı iyi görsel istikrar anlamına gelir ve olumlu bir şekilde etkileyebilir. İyi bir SI sürdürmek performans için değil, aynı zamanda pazarlama için de çok iyidir. Bakalım nasıl. Olağanüstü Hız Endeksi 1. Olağanüstü Hız Endeksini Korumak için Dört Yararı 1. Oran oranınızı iyi bir şekilde düşürün, web sitesine erişmeye çalıştığınızı hayal edin, ancak hemen herhangi bir içeriği görmek yerine boş ekrana bakarsınız. Ne yapıyorsun? Gittin. Bu senaryoya (hepsinden kaçınmak istediğimiz) "yansıma" olarak adlandırılır. Birisi web sitenizi ziyaret eder ve sitenizle daha fazla etkileşime girmeden hemen ayrılır. ///////// HR TD>
2. KPI "sayfanızda harcanma süresini artırın" Hız dizinini düşürürseniz, sitenizi ziyaret eden kullanıcılar için istekli olacaktır Sitenizde daha uzun olun ve daha fazla sayfayı ziyaret edin. 3. Dönüşüm seviyesini artırın Kullanıcılar sitenizde zaman geçirdiğinde iyi hız sayesinde başka avantajlarınız var: satın alma eğilimindedirler. İhtiyaçlarını cevaplarsınız: İstedikleri cevapları veya ürünleri mümkün olan en kısa sürede bulun.
4. SEO'nuzu artırın Ziyaretçileriniz web sitenizdeki deneyimden keyif alıyorsa, Google da hoşuna gidecek ve arama motoru ürünlerinde size daha iyi bir konum verecektir. Deniz Feneri Hız Endeksi nasıl ölçülür, geliştiricilerin hız endeksini ve diğer performans metriklerini ölçmelerine yardımcı olan açık kaynaklı bir araçtır. Otomatik araçlar, hız, performans, erişilebilirlik, UX ve SEO hakkında derinlemesine raporlar oluşturur. WordPress'teki deniz feneri performans puanlarınızı nasıl artıracağınızı açıklayan eksiksiz kılavuzumuzu izleyin. Genel hız ve performans skoru endeksinizi ölçmek için, Lighthouse teknolojisi tarafından desteklenen iki popüler araç olan Google PagePeed Insights ve GTMetrix'i kullanabilirsiniz.
SI skoru (PSI): 0.8 s
SI skoru (GT Metrix): 1.1 DTK
Üçüncü taraf kodu
Deniz Feneri tarafından yapılan "fırsatlar" ve "teşhis" bölümü sayesinde, SI ve performans değerinizi iyileştirmenin yollarını bulabilirsiniz.
Fırsatlar ve Teşhis Bölümü - Kaynak: PSI raporu, her hatanın performansınız üzerindeki etkisinin ne kadar olduğunu belirler. Üstesinden gelin, hız dizin değerinizi büyük ölçüde azaltacak ve WordPress sitenizin genel kullanıcı deneyimini artıracaktır. Hedefimiz basit: Ziyaretçilerin en kısa sürede üst yarıyı görmelerini istiyoruz. Hız endeksini artırmak için PSI'dan gelen ana önerileri ekledik:
Oluşturmayı engelleyen kaynakları ortadan kaldırın
Ana UTAS çalışmasını en aza indirin (tarayıcı atamalarını en aza indirin)
JavaScript yürütme süresini azaltın
Web yazı tipi yüklemesi sırasında metnin görünür olduğundan emin olun (özel bir yazı tipi doğru kullanın)
JS'yi sil. Hangisi kullanılmıyor Üçüncü taraf kodunun etkisini azaltın
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
TTFB ve sunucu yanıt süresini azaltın
Doğru formatta yüklenmek için dosyadaki görüntüyü kullandığınızdan emin olun
Şimdi birbirimize nasıl uygulanacağını görelim. Hız Dizini Nasıl Artırılır: 8 Performans İpuçları WordPress sitenizin hız ve hız endeksini artırmak için izlenmesi gereken sekiz performans tekniği vardır:
Ertelenmiş JS
JS'yi erteleyin ve kullanılmayan JS'yi sil
JS ve CSS'yi en aza indirin
CSS teslimatını optimize edin ve kullanılmayan CSS'yi silin
Resimleri Optimize Et + Tembel Yük
Veri Sıkıştırma kullanın
CDN kullanın
Pramuian ve yazı tiplerini optimize et
Her birini kazalım. 1. JS JS dosyaları, tarayıcı en alakalı içeriği görüntüledikten sonra yüklenir. Bu işlem, tarayıcının komut dosyasının yüklenmesini beklemeden tam içerik içermesine izin verir. JS dosyalarını geciktirerek, önce görüntülemek istediğiniz içerik türüne de öncelik verirsiniz. Bizim durumumuzda, en üst parodaki herhangi bir şeye odaklanmalıyız: Alt Paro'daki önemsiz JS'nin askıya alınması gerekir. Deniz Feneri tarafından bildirilen sorunlar: "Renetleri engelleyen kaynakları ortadan kaldır", "Kullanılmayan JavaScript'i Sil" ve "Kritik Talep Zincirlerinden Kaçının". Popüler eklentileri kullanarak JavaScript'i erteleme:
WP Rocket, aşağıda gösterildiği gibi JS WordPress dosyalarını erteleme seçeneğine sahiptir:
Yük JS Ertelenmiş Özellikler - Kaynak: WP Roket Gösterge Tablosu
Temizleme Varlıkları - Bu ücretsiz eklenti, sayfaya yüklenecek içeriği bir öncelik olarak tarar ve algılar. Önce oluşturulmaması gereken CSS kodunu veya JS'yi seçmeniz yeterlidir. Eklentinin yazarı, en iyi performans sonuçlarını elde etmek için WP Rocket gibi önbellek eklentileri ile Varlık Temizlemesi kullanılmasını önerir.
Hız Amplifikatör Paketi - Tüm HTML oluşturulduktan sonra JS dosyalarını erteleme.
Async JS - Hangi komut dosyasını 'erteleme' özniteliğini eklemek istediğinizi kontrol edin.
Manuel yöntemi kullanarak JavaScript'i geciktirin
Gecikme Özellikleri: "Defer" Boolean özniteliğini HTML'deki komut dosyalarını etiketlemek için kullanın ve hedeflemek istediğiniz JS'yi geciktirir. Defer'in özelliği yerinde olduğunda, html belgesi hala ayrışırken komut dosyası paralel olarak indirilir. İyi olan şey, HTML'nin ayrışması tamamlanana kadar komut dosyasının yürütülmemesidir. Nasıl Çalışır Öne Çıkarımlar - Kaynak: Jozefzacek.cz 2. JS ve Sil JS ve Sil JS yürütme ve kullanılmayan JS'yi geciktirmek için kullanılmayan JS Performansı artırmak ve puanlamak için. Chrome Devtools'taki Kapsam sekmesi, kullanılmayan JavaScript kodunu bulmanıza yardımcı olabilir:
Kod Kapsam Raporu - Kaynak: Devtools Denetim yapmanın ve optimize edilecek JS'yi tanımlamanın başka bir yolu PSI veya GTMetrix kullanmaktır:
Şelale özelliği en şiddetli JS komut dosyasını tanımlamak için - Kaynak: Deniz Feneri tarafından bildirilen gtMetrix problemleri: "Kullanılmayan JS'yi azaltın" ve "Kritik Talep Zincirlerinden Kaçının". Manuel Çözüm:
Setimeout () yönteminin işlevi ile JS yürütmesinde bir gecikme yapın. Bu, MS'de belirttiğiniz süre sonra işlevi çağırır. Seçtiğiniz JS işlevini geciktirmek için kod snippet'ini kullanabilirsiniz.
Not: Lighthouse, kullanılmayan 20KB'den fazla JS koduna sahip herhangi bir dosyayı işaretler, bu nedenle manuel olarak geciktirir Her JS dosyası biraz hayal kırıklığı yaratabilir. JS'yi geciktirmek için 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, öncelikli olarak yayınlanması gereken JS içeriğinin önceliklendirilmesine 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. Gonzales - CSS ve JS'yi şartlı olarak devre dışı bırakmak mümkündür. Perfmatters - Kullanılamayabilecek komut dosyalarını devre dışı bırakarak sitenizi hızlandırmaya yardımcı olur. JS'yi parfatlarla ertelemek
Eklenti Organizatörü - Eklentinizi yükleme sırasını değiştirin. Varlıkları yansıtan - yüklenmesi gerekmeyen CSS/JS'yi seçmenizi sağlar.
WP roket önbellek eklentisi - en iyi pürüzsüz çözüm. WP roket eklentisi ile JS gecikme özelliği, kullanılmayan JS'yi azaltmak için kullanılır. JS dosyalarını tek bir tıklamayla kolayca geciktirebilirsiniz:
WP Rocket 3.9'daki JavaScript Yürütme özelliğini erteleme 3. Sol JS ve CSS minififörleri, işlevlerini değiştirmeden JavaScript kodundan tüm gereksiz karakterleri kaldırma işlemidir. Basit İngilizce'de, kodunuzu en aza indirmek, noktalama işaretlerini ve yeni çizgiler, yorumlar, alanlar, noktalar vb. Gibi işe yaramaz kaoların kaldırılması anlamına gelir. Şişkinliği azaltmak ana UTA'lar için zaman ayıracaktır. Bir kez daha, bu üst yarı yaşam içeriği için yer ve zaman yapmakla ilgilidir. Deniz Feneri tarafından tanımlanan sorun: "JavaScript Yürütme Süresini Azalt", "UTAS Ana İşini Minimize", "Minify JS" ve "Minify CSS".
İşte sizin için bazı seçenekler. Kodunuzu manuel olarak azaltma: Önemli: Sitenizin veya sıkıştırmak istediğiniz dosyanın yedeklemesini yapmanızı öneririz. Dev ortamında böyle manipüle etmek en iyisidir. Dostça teknoloji değilseniz, bunun yerine eklentiler kullanmalısınız.
Yüce metin veya Visual Studio kodu gibi metin editörlerini kullanın.
Kodunuzu içeren bir dosya açın ve yorumları, boşlukları, yeni satırları ve eğrileri silin. Kimlik, sınıf veya değişken adını mümkün olduğunca artırın ve koşullu ifadenizi optimize edin.
Dosyayı tekrar kaydedin.
Çevrimiçi araçları kullanarak kodunuzu en aza indirin:
Minifycode.com'u açın ve Seçim sekmesini açın: JS, CSS, HTML, vb. Kodu dosyanızdan ana alana yapıştırın ve Minify JS düğmesini tıklayın. JS Minifier Aracı - Kaynak: Minifycode.com En İyi JS ve CSS Minifikasyon Araçları:
Google tarafından kapatma derleyicisi, JavaScript'in ayrıştırılmasını ve analiz edilmesini, gerektiğinde kodu yeniden yazmayı ve bundan sonra JS'yi küçültmeyi düşünmek için sağlam bir seçenek.
Uglifyjs, JavaScript'inizi küçültür, ayrıştırır ve optimize eder.
AutoPtimize, CSS ve JS'yi optimize etmek için çok popüler bir seçenektir.
Yui'nin Yahoo'nun kompresör aracı bir CSS ve JavaScript minifikasyon aracıdır.
WP Super Minify, JavaScript ve CSS dosyalarını birleştirir, en aza indirir ve depolar
CSS Nano (CSS Praprocessor)
CSSO (CSS PraproseSor)
UNCSS (CSS Praprocessor)
JavaScript Dosyası Özelliklerini Bırakın - WP Roket Gösterge Tablosu
CSS dosyalarını en aza indirin - WP Roket Gösterge Tablosu 4. CSS teslimatını optimize edin ve WordPress'in kullanılmadığı CSS'yi azaltın çok büyük bir ekosistemdir ve tema yazarlarının çoğu birçok düzen seçeneği ve tasarım efektleri sunar, böylece birçok CSS kullanır. Sorun şu ki, hepimiz CSS'ye ihtiyacımız var çünkü web içeriğimize stil veren bir kod. Bir yandan, 2000'lerden kötü bir web sitesi istemiyoruz, ancak aynı zamanda iyi performans sağlamalıyız. Bu tamamen mükemmel bir denge bulmak ve CSS'nin sayfanızda nasıl oluşturulduğunu/teslim edildiğini optimize etmekle ilgilidir. CSS dosyaları site yükleme sürenizi etkiler ve performansınızı ve puanınızı artırmak için bu sorunun üstesinden gelmeniz gerekir. CSS teslimatını optimize etmek için çeşitli taktiklere bakalım. Deniz Feneri tarafından tanımlanan sorunlar: "Ana UTAS çalışmasını en aza indirin", "Kullanılmayan CSS'yi azaltın", "Oluşturmayı engelleyen CSS'yi silin". Manuel Çözüm: CSS komut dosyasını birleştirin, sıkıştırın ve hizalayın: Bu, sayfanın ayrı bir CSS dosyasıyla yüklenmediği anlamına gelir. Bunun yerine, bir sayfa için gereken tüm stil bilgileri sayfaya dahil edilmiştir (ve yüklenecek işe yaramaz bir kuvvet sayfası yoktur.)
CSS kurallarına öncelik ver: Üst yarısı -Half içeriği önce yüklenmelidir.
Kodunuzu izleyerek manuel olarak kullanılmayan CSS'yi silin/azaltın.
CSS teslimatını optimize etmek için kullanabileceğiniz WordPress eklentileri:
AutoPtimize - WordPress kontrol panelindeki "CSS Kodu Optimize" kutusunu etkinleştirin.
Harcama - CSS teslimatını optimize et - evet, buna denir!
WP Roket Önbellek Eklentisi - Doğrudan Dosya Optimizasyonu sekmesinden kullanılmayan CSS'yi silerek CSS gönderiminizi optimize etmenize yardımcı olur. Özellik sizin için işe yaramazsa, CSS Asynchronosuly özelliğini kullanabilirsiniz. açık zamanda. Neyse ki, gerçek kaliteyi kaybetmeden boyutu değiştirmenize ve sıkıştırmanıza yardımcı olan bazı araçlar var. Görüntünüzü optimize etmenin bir başka yolu da onlara tembel yükler uygulamaktır. Bu, görüntünün kullanıcı tarafından görülmesi gerektiğinde sayfadaki görüntülerin yüklenmesini geciktiren bir dizi tekniktir. Deniz Feneri tarafından tanımlanan sorunlar:
Doğru Görüntü Boyutu - Büyük görüntünün boyutunu doğru boyuta değiştirin. Görüntüleri verimli bir şekilde kodlayın - yani sıkıştırmanız gerekir. Görüntüleri yeni nesil formatta sunun - JPEG/PNG'yi WebP'ye dönüştürün.
Ekranın dışındaki görüntüleri erteleyin - yavaş yükleme görüntüleri ve arka plan görüntüleri.
Çevrimiçi uygulamalar ve araçlarla resim boyutunu manuel olarak değiştirin:
Gimp - Windows ve Mac için ücretsiz.
Mac için önizleme - ücretsiz ve yüklendi.
Photoshop - Olağanüstü olabilir, ancak bu en eksiksiz tasarım yazılımıdır.
Befunky - Web tabanlı grafik tasarım yazılımı.
Picmonkey.com - Logolar dahil görsel içerik düzenleme ve üretme. Pixlr.com - Ücretsiz ve kullanımı kolay fotoğraf düzenleyicisi.
Fotor.com - Görsel oluşturma platformunu tamamlayın.
PhotoPea - PSD (Photoshop) dosyasını doğrudan tarayıcınızdan ücretsiz olarak açın.
WordPress sitenize yüklemeden önce görüntüleri çevrimiçi araçlarla sıkıştırın: GIMP (Ölçekli Resim Seçimi)
Photoshop (Web Seçenekleri için Kaydet)
JPEG Optimizer (Temel Sıkıştırma Seçenekleri)
Küçük PNG (Akıllı Kayıplı Sıkıştırma Seçeneği)
JPEG.IO (Gelişmiş JPEG Optimizasyon Seçeneği)
WordPress eklentileri (mevcut ve yeni resimler) ile görüntüleri optimize etmek:
Imagify - Görüntüleri tek bir tıklamada optimize etmek için en sofistike araç: Kalite, WebP dönüştürme ve kütle kompresini (kütle optimizasyonu özelliği) kaybetmeden daha hafif bir görüntü alın. Imafy tüm görüntü formatlarını optimize edebilir: JPG, PNG, PDF ve GIF. Imafy yaklaşık 200 resim için ücretsizdir, bu nedenle premium sürüme yükselmelisiniz.
UNSARDUM - Yükleme boyutu sınırını WordPress kitaplığınıza yerleştirin ve büyük görüntünün boyutunu otomatik olarak değiştirin. Ayrıca, standart WordPress sıkıştırma kullanarak boyutunu değiştirme işleminde JPG görüntülerini sıkıştırır. Bununla birlikte, yine de EWWW Image Optimizer veya Imagify gibi daha fazla sıkıştırma odaklı eklenti kullanmanızı önerirler.
EWWW Görüntü Optimize Edici -Her şeyi kolaylaştırır ve görüntüler otomatik olarak sıkıştırılır, sayfaya uyacak şekilde deşarj ve yeni nesil formata dönüştürülür.
WordPress eklentisini kullanarak görüntüye yavaş yükleme uygulama:
WP Rocket tarafından tembel yük - Resimde tembel yük komut dosyasını uygulayan tarafımızdan geliştirilen ücretsiz eklenti hizmetçisi. Web sitenizi hızlandırmak için YouTube IFrame'yi bir önizleme küçük resim ile de değiştirebilirsiniz.
WP Roket - Önbellek eklentimiz, aşağıdaki medya sekmesinde görebileceğiniz gibi fotoğraflar ve videolar için yavaş yükleme özellikleri ile donatılmıştır:
Lazyload Özelliği - WP Roket Gösterge Tablosu
Diğer Tembel Yük Eklentileri: Tembel Yük özelliğini uygulamak için kullanabileceğiniz en iyi eklentiler hakkında yazdığımız makaleye bakın.
6. Sıkıştırma veri sıkıştırma, performans puanlarınızı artırmak için web sitesi dosyanızın boyutunu azaltma işlemidir. Basit: Tarayıcınıza daha hafif dosyalar gönderdiğinizde, oluşturma süresi daha hızlı olacaktır. Tekrarlanan HTML sözdizimi ve
, , , gibi etiketleri kullanın, sonuç olarak, kodu sıkıştırmak ve doldurmak için "GZIP sıkıştırma" adlı bir yöntem kullanmak için yararlı olacaktır. WordPress eklentilerini kullanarak GZIP sıkıştırmasını etkinleştirin:
GZIP Sıkıştırma eklentisi, WordPress sitenizdeki GZIP sıkıştırmasını etkinleştirme ve devre dışı bırakma gücü sağlar.
WP Rocket, eklentiyi etkinleştirdikten hemen sonra MOD_DEFLATE modülünü kullanarak .htaccess dosyasındaki GZIP özelliğini etkinleştirir. Yine, birkaç eklenti yüklemek yerine tam çözümümüzü seçebilirsiniz.
7. CDN (İçerik Dağıtım Ağı) kullanın CDN, dünyanın çeşitli yerlerinde bulunan birkaç sunucudan dosyaları dağıtmanıza olanak tanır. Bu sistem sayesinde, özellikle uluslararası ziyaretçiler için site yükleme süreniz artar. CDN'nizi etkinleştirmek için WordPress eklentilerini kullanın:
WP roketinin iki seçeneği var:
1. Rocketcdn'e 7,99 $/ay abone olun. CDN, çok rahat olan diğer WP roket özellikleriyle otomatik olarak yapılandırılır. 2. Kendi CDN'nizi doğrudan WordPress Gösterge Tablosuna entegre edin. Her iki CDN Seçeneklerini Görüntüle - Kaynak: WP Roketinde CDN Sekmesi 8. Gösterge Tablosu ve Optimize Pramuian yazı tipi yazı tipi, önemli yazı tiplerini daha önce yüklemek için "İsteyin" ziyaretçi tarayıcısının "isteyin" anlamına gelir. ikincil. Hız endeksi, Üst Paro'da neler olduğuna bağlıdır, sonuç olarak yazı tipi, görülen içeriğin ziyaretçiler için doğru görüntülenmesini sağlar. Özel web yazı tipleri de düzende ani değişikliklere neden olabilir ve Google bunu gerçekten sevmez. Aslında, ziyaretçileriniz iki ana sorunla karşılaşabilir:
Fout (yazı tipi çekici olmayacak şekilde kuvvet uygulanmaz)
FOIT (görünmez metin ve ekranda yazı tiplerini görüntülemek için yüksek bekleme süresi)
İyi bir kullanıcı deneyimi korumak ve bu tür durumlardan kaçınmak için önce web yazı tiplerinizi yüklemenizi öneririz. Deniz Feneri tarafından tanımlanan sorunlar: "Pramuiuan Anahtar İsteği" ve "Web yazı tipi yüklemesi sırasında metnin görünür kaldığından emin olun". Önceki yazı tipini yüklemek için manuel bir çözüm kullanma: tarayıcınızdan önce yazı tipini yüklemesini istemek için etiketi ve rel = "preload" özniteliklerini kullanabilirsiniz. Gerçek hayat örnekleri: <link relay = "preload" as = "yazı tipi" href = "/fonts/custom-font.woff" type = "font/woff2" crossorigin = "anonim"? Her CSS komut dosyası ve siteye yüklenen yazı tipi dosyaları için HTML'nizdeki kafa etiketi arasında. Önceki yazı tiplerini yüklemek için WordPress eklentisini kullanma:
Önce yazı tiplerini yüklemek için WP roketini kullanın. "Sekme ön yük" i açın, "önceden yükleme yazı tipleri" için kaydırın ve sadece daha önce yüklemek istediğiniz yazı tipi dosyasının URL'sini belirleyin: WP Roket Gösterge Tablosu WP Roket ile Hız Dizini Nasıl Artırılır: Sonuçlar Önce ve Sonra WordPress için en iyi önbellek eklentisi olan WP roketini kullanarak hız endeks değerinizi azaltın. Gerçekten de, JS/CSS dosyasının ve önceki yazı tipi yüklemesinin optimizasyonuna yol açan herhangi bir şey Si'yi artıracaktır. İyi haber: Her WP roket özelliği web performansı için tasarlanmıştır! Sadece bunun için sözümüzü almayın. Web sitesinin performansının WP roketini kullanmadan önce ve sonra nasıl olduğunu gösterelim. WP roketinin SI puanı üzerindeki etkisini analiz ederek, Google PagePeed Insights aracını kullanarak "Le Point Gourmand ..." adlı Fransız catering için bir performans denetimi yaptık. Bulgularımıza bakalım.
WP Roketinden Önce Deniz Feneri Puanı: 51/100
Turuncu renkte: TTI 7.0 saniyedir, TBT 480 ms'dir
Kırmızı: Hız endeksi 6.0 D ve LCP 7.1 D'dir
WP Roketinin Aktivasyonundan Sonra Deniz Feneri Puanı: 95/100
Yeşil Renk: TTI, FCP, TBT, CLS ve ... Hız Endeksi!
WEBY WP Roketini etkinleştirmeden önce çok iyi durumda değil ve PSI tarafından tanımlanan birçok problem:
Lighthouse (Extract)- PSI tarafından tanımlanan sorunlar WP roketini etkinleştirdikten sonra WP Roket Performans özelliğini etkinleştirir, birkaç seçeneği etkinleştirir ve önceki bölümde önerilen teknik listesini izlerim. Aşağıda Yeşil Bölge'de bulunan tüm roket WP seçenekleri: JS dosyamı optimize etme (askıya alınmış JS'yi yükleme, JS yürütme ve kullanılmayan JS'yi sil)
JS Dosya Optimizasyonu sekmesi - WP Roket Gösterge Tablosu
CSS Dosyalarının Optimizasyonu - WP Roket Gösterge Tablosu
Sil/Azalt kullanılmayan CSS:
Kullanılmayan CSS'yi Sil/Azaltın/Azaltın - WP Roket Gösterge Tablosu <BS ROCET kullanmadan önce iki fırsat belirlenir: "Kullanılmayan CSS'yi azaltın" ve "JS sorunlarını azaltın".
Yük yazı tipleri:
Roket WP kontrol paneline PSI
"Geçen Denetim" listesi WP roketini kullandıktan sonra arttırıldı (Extract) - Kaynak: PSI SRAPS SI metriklerini optimize etme, ziyaretçilerinizin içeriğinizin en iyi Paro'da ne kadar hızlı göründüğü konusunda gerçek bir gelişme hissetmesine yardımcı olabilir. SI, sayfanın görsel bütünlüğünü gösterir, ancak içeriğin kullanıcı için önemli olup olmadığını göstermez. Bu nedenle, bu diğer deniz feneri metriklerinin yerini değildir. Puanınızı azaltmanın en kolay yolu, aktivasyon sırasında en iyi web performans uygulamasının% 80'ini uygulayan WP Rocket'i yüklemektir. Başka bir avantaj, WP Rocket tarafından sunulan çeşitli özellikler sayesinde her Lighthouse KPI'sının optimize edilebilmesidir. WordPress sitenizi birkaç performans eklentisi ile yüklemenize gerek yoktur, WP Rocket sizi Google PagesPeed Insights Green Zone'a yaklaştırmak için yeterlidir. WP roketinin işe yaramaz olduğunu düşünüyorsanız, satın alma işleminden sonraki 14 gün içinde her zaman% 100 para iade garantimize güvenebilirsiniz. Hızınızı ve kullanıcıların şu anda hissettikleri performansı artırın!
