WordPress’te İlk İçerik Boyayı (FCP) artırmanın 10 kanıtlanmış yolu
2019’un başlarında Google, iki performans metriğine odaklanarak web sitesinin hız sıralamasını değerlendireceklerini açıkladı: İlk İçerik Boya (FCP) ve İlk Giriş Gecikmesi (FID). Zamanla performans senaryoları gelişti. Örneğin, Google üç temel web verisini duyurdu: en büyük içerik boyası (LCP), kümülatif bir düzen kayması (CLS) ve ilk giriş gecikmesi (FID). Bununla birlikte, metrik ilk içerikli boya metrik deniz feneri (ve kullanıcı deneyimi) olarak önemli bir rol oynamaya devam etmektedir. Bu, genel performans puanının% 10’una katkıda bulundu. Web siteniz hız testinde 2 saniyenin altında olabilir, ancak bu kitlenizin çoğuna gelmezse, Google yine de sizi cezalandıracaktır.
Bu makalede, FCP’nin ne olduğunu ve neden önemli olduğunu öğreneceksiniz. Daha sonra, WordPress sitenizdeki FCP’yi artırmak için çeşitli yollara döneceğiz. Kulağa ilginç geliyor mu? Bölünelim! İlk İçerik Boya (FCP) nedir? İlk İçerik Boya (FCP), hissedilen yükleme sayfasının hızını ölçmek için kullanıcıya odaklanan bir metriktir. FCP, kullanıcıların hız test aracı tarafından ölçülenleri değil, web sitesinin performansını nasıl görüntülediğini ölçer.
Web Sayfası Testi
Chrome geliştiricisi
Sayfa
Chrome Kullanıcı Deneyimi Raporu
Firebase Performans İzleme (Beta)
Google, mobil cihazlarda ve masaüstlerinde bölümlere ayrılmış, sitenizde sayfa yüklemesinin 75. yüzdelik dilimini ölçer. Bu, kullanıcının deneyiminin doğru bir temsili olmasını sağlar. Performans puanınızı nasıl artıracağınızla ilgili makalemizi okuyun (FCP değeri dahil)!
Google’a göre, FCP 1.8 saniye veya daha kısa sürede gerçekleşmelidir. Bu, sitenizi ziyaret edenler için iyi bir kullanıcı deneyimi sağlar. Siteniz FCP 3+ saniye sürerse, yavaş kabul edilir. Araştırmaya göre, hücresel kullanıcıların% 53’ünden fazlası yüklemek için 3+ saniyeye ihtiyaç duyarlarsa siteyi terk ediyor. Bu metriğe ciddiye alın.
WordPress’te İlk İçerik Kedi Süresini Nasıl Artırılır (FCP) Şimdi FCP’nin ne olduğunu ve neden önemli olduğunu tartıştık, işte saati azaltarak WordPress sitenizi FCP’nizi hızlandırmanın bazı yolları: 1. Sunucu yanıt süresini azaltın ( TTFB) Sunucunun Yanıt Süresi veya İlk Bayt Süresinin Süresi (TTFB), tarayıcının ilk bayt web sayfaları içeriğini almak için ihtiyaç duyduğu süredir. FCP TTFB denklemi sadece TTFB’ye bağlı değildir, aynı zamanda bu ilk adımdır. başarmak. FCP = TTFB + İçeriğin Yükleme Süresi + Oluşturma Süresi FCP TTFB’ye çok bağlı olduğundan, bu FCP’yi artırmak için optimize etmeniz gereken en önemli faktördür.
WordPress’te TTFB’yi azaltmanın birçok yolu vardır. Makalede açıklandığı gibi, TTFB’yi azaltmanın en kolay üç yolu şunlardır: Hızlı bir barındırma sağlayıcısı Seçin, iyi bir web barındırma çözümü seçmek için düşünmeniz gereken faktörleri bulmak için Web Hosting’deki WP roket makalelerine başvurabilirsiniz. İdeal olarak, kullanıcınıza yakın bir sunucuya sahip bir ana bilgisayar seçin. Kalite CDN CDN kalitesi, sitenizin resimler, videolar ve komut dosyaları gibi statik kaynaklarının teslimatını hızlandırmaya yardımcı olabilir. Bu, sunucunuz ve kullanıcınız arasındaki ağ gecikmesini önemli ölçüde azaltacaktır. Web siteniz için en iyi CDN’yi nasıl seçeceğiniz hakkında daha fazla bilgi için WP Roket CDN kılavuzuna bakın.
İlk satırda kritik kaynaklar, web sayfalarınızı FCP oluşturmak için gereken önemli komut dosyalarının ve stillerinin tanımlanması. Aşağıda, Google’ın önemli kaynakların nasıl tanımlanacağı konusunda basit bir rehber bulunmaktadır. Önemli bir komut dosyasını tanımladıktan sonra, oluşturma engellemesinin kaynağından silmeniz ve ardından ve etiketi ile HTML sayfanıza koymanız gerekir. Bunu yaparak, web sayfalarının yüklendiğinde temel işlevselliğini idare etmek için gereken her şeye sahip olmasını sağlayacaksınız. Kritik olmayan kaynakları geciktirir, önemsiz kaynaklar için URL’yi Async veya Defer’in özellikleriyle işaretlemeniz gerekir. Tarayıcıyı yalnızca HTML belgesi tamamen açıklandıktan sonra komut dosyasını yürütmeye yönlendirir. Bu komut dosyasını erteleyebilmenizdir: Kritik olmayan stil sayfaları için URL’ye async öznitelikleri eklemelisiniz. Bu, tarayıcıya asenkron stil yüklemesini söylerken, diğer sayfa öğeleri kesintisiz yüklenmeye devam eder. Styles sayfası etiketi ile yüklendiğinden, Async özniteliğini ona uygulamanın doğrudan bir yolu yoktur. Ancak bir çözüm var ve bunu uygulayabilmeniz bu şekilde:
Önemli kaynakları tanımlarken kullanılmayan her şeyi silin, web sayfalarında kullanılmayan bir kod bulabilirsiniz. Kullanılmayan kodları silmek – kullanılmayan JavaScript’i kaldırma gibi – web sayfalarınızı daha fazla optimize etmenize yardımcı olacaktır. Kodu idare etmekten rahatsızsanız, WP roket, sadece birkaç tıklamayla önemli olmayan JavaScript dosyalarını geciktirmenin en kolay yoludur. Mother JavaScript WP roketiyle kolayca WP roketiyle CSS nakliyesini, oluşturmayı engelleyen stil sayfasını silmek için optimize edebilirsiniz. . Bir sonraki nokta bu özelliği içerir. 3. CSS kritik ve satır içi BT yolları üretirse, CSS’yi eşzamansız yüklemek için ayarladıysanız, tarayıcı, gerekli kuvvet yüklenmeden önce stili kullanıcıya stil olmadan görüntüler. Bu davranış, Düzleşmemiş İçerik Flaşı (FoUC) olarak bilinir ve kullanıcılar için hoş olmayan bir deneyimdir. FOUC’u önlemek için, kritik bir yol oluşturmanız ve doğrudan HTML dosyanıza koymanız gerekir.
Render Engelleme CSS (Top) Vs.CRSS Kritik (aşağıda) (kaynak: Google) ama CSS kritik yolu tam olarak nedir?Kritik yol CSS, web sayfasının ilk bölümünü (üst paro) kullanıcıya görüntülemek için gereken minimum CSS’dir.Önemli oluşturma yolu tarayıcısının manuel olarak analiz edilmesi ve ardından kritik yol CSS üretmek sıkıcı bir süreçtir.Bu makalenin kapsamı dışında.Ancak, kritik yol CSS üretmek için makyaj gibi ücretsiz çevrimiçi araçları kullanabilirsiniz.Çoğu kullanım vakası için mükemmel çalışır.Daha fazla bilgi için Google analiz eden kritik oluşturma yolunun performansına bakın.Kritik bir yol yaptıktan sonra, HTML belgesine koymanız gerekir.Tarayıcı artık stil sayfasını beklemeden Web sayfasının ilk kısmını hemen oluşturabilir CSS asenkron yüklenir.Bu FCP’yi önemli ölçüde artırır.Veya bu işlemi otomatikleştirmek için WP roketini kullanabilirsiniz.
WP roket, WP roketinde CSS teslimat ayarlarını kolayca etkinleştiren CSS’yi ortadan kaldırır. Ayarlar yaparsanız veya temanızı değiştirirseniz, CSS’nin kritik yolu da otomatik olarak güncellenir. Daha fazla ayrıntı için, WP roketinin kritik CSS’yi nasıl ele aldığını okuyabilirsiniz. 4. JavaScript’i ne kadar iyi optimize ederseniz edin, komut dosyası tabanlı öğelerden kaçının, sıradan HTML’yi işlemekten daha yavaştır. JS gerektiren her şeyin FCP üzerinde olumsuz bir etkisi olabilir. Önemli bir komut dosyası girebilseniz de, komut dosyasının hala yüklenmesi ve parçalanması gerekir. FCP’nin artması açısından, her milisaniye önemlidir. FCP puanınıza zarar veren değerli bir yükleme süresidir. Komut dosyalarına dayalı birçok öğe bile FCP’ye zarar verir. Birçok tema, üst yarısında birçok komut dosyası kullanan lüks unsurları içerir. Aynı şey, birçok gereksiz stil ve komut dosyası ekleyen bir sayfa üreticisi kullanmak için de geçerlidir. Bu nedenle, site temanızı akıllıca seçin. GeneratePress veya Astra gibi düzgün kodlanmış hızlı temalar kullanmak FCP’yi önemli ölçüde azaltmaya yardımcı olabilir. Genel bir kural olarak, bu öğeleri Paro’da web sitenizde kullanmaktan kaçınmaya çalışın:
Herhangi bir biçimde ağır animasyon
Değişme eklentisi Sosyal medya veya paylaşım eklentileri Mega menü eklentisi Google Reklamları Gibi İzle 5. Katlanır yükleme görüntülerinin üzerindeki tembel görüntüleri yüklemekten kaçının, özellikle çok fazla görüntüsü olan bir siteniz varsa, web sitenizi hızlandırmanın en kolay yollarından biridir. Teknik olarak, tembel yükleme, ViewPort tarayıcısında görülmeyen görüntülerin ve çerçevelerin yüklenmesini geciktiren bir komut dosyasıdır. Kullanıcı geri döndüğünde, görünüm görünür olduğunda yüklenir. WP Roket, görüntüler için yavaş yüklemeyi kolayca etkinleştirmenize yardımcı olur, çünkü yavaş yükleme tarayıcı herhangi bir görüntüyü oluşturmadan önce JavaScript kullanımını gerektirir, bu FCP’nizi geciktirebilir. Bu nedenle, yavaş yüklemenin üst yarısındaki görüntüleri hariç tutmanız gerekir. En popüler tembel yükleme eklentileri bu özelliği içermiştir. İdeal olarak, görüntüleri yalnızca dosya adlarına değil, aynı zamanda sınıf, kimlik, öznitelikler veya belirli alanların görüntüleri gibi diğer etiketleri de hariç tutmanıza olanak tanıyan yavaş bir yükleme eklentisi arayın. WP roket, belirli görüntülerde yavaş yükleme devre dışı bırakma desteğini destekler. Görüntü kaynaklarına ve hatta avatarlara göre görüntüler, görüntüler için devre dışı bırakabilirsiniz. Not: WordPress Core’a yavaş yükleme görüntüleri eklendi ve WordPress 5.5’in orijinal özelliği olacak. Ayrıca tembel yükleme davranışını ayarlamak için filtreleri destekler. 6. HTML ve CSS satırındaki önemli görüntüler, Base64 veya SVG biçimini kullanarak görüntüleri hizalamanız için bir yol sağlar. Buna veri Uri denir. Tüm üst gaga görüntülerini hizalayarak, tarayıcının indirmek için ek bir HTTP isteği yapması gerekmez. Bu, FCP’nin artırılmasına yardımcı olabilir.
FCP’yi artırmak için üst yarısında oluşturmayı engelleyen kaynakları kaldırın, satır içe geçebileceğiniz en yaygın yarı yarıya görüntülerden bazıları: logo
Simgeler (arama, sosyal medya vb.)
Banner görüntüleri
Arka fon
Base64 ve SVG resimleri nedir?Base64, görüntüler de dahil olmak üzere her türlü veriyi metne değiştiren bir kodlama algoritmasıdır.Base64 tarafından doğrudan HTML veya CSS dosyasına teşvik edilen görüntüleri gömebilirsiniz.Bu, daha küçük görüntüler için yükleme süresini hızlandırmanın iyi bir yoludur.Base64 Görüntü Kodlayıcı, herhangi bir görüntü formatını Base64’e dönüştürmek için olağanüstü bir ücretsiz araçtır.JPEG, PNG, WebP, SVG ve BMP’nin görüntü formatlarını destekler.
Base64 kodlama yardımına uygun kritik görüntüler HTML’de Base64 tarafından teşvik edilen görüntüleri ekleyin:
CSS’de Base64 tarafından teşvik edilen görüntüyü de kullanabilirsiniz: .Custom-Sınıfı {Background: URL (‘Veri: Image/JPEG; Base64,/9J /… [içerik] … ‘); } Ölçeklenebilir Vektör Grafikleri (SVG), vektör grafikleri için bir görüntü biçimidir. SVG görüntüleri daha küçük dosya boyutlarına sahiptir, kaliteyi kaybetmeden herhangi bir boyuta ölçeklendirilir ve tüm cihazlarda iyi görünür. Görüntünüzde basit şekiller, eğriler ve çizgiler varsa (örneğin, logolar ve simgeler), görüntü neredeyse kesinlikle SVG olarak saklanabilir. Not: SVG görüntülerini etiketinde bir kaynak olarak kullanmak, SVG görüntülerini doğrudan etiketi üzerinden eklemekten farklıdır. HTML: <circle cx = ' Bir satır içi oluşturmadan önce görüntünüzü sıkıştırmak veya daha küçük (SVG ise) daha iyidir. Görüntünüz raster formatındaysa (JPEG veya PNG) Base64 kullanın. Vektör biçimine dönüştürülebilirlerse, SVG kullanın. URL'yi bir görüntü kaynağı olarak nerede kullanabileceğiniz her yerde, oradaki Base64 tarafından teşvik edilen görüntüyü ekleyebilirsiniz. Temanız veya eklentinizde HaardCode olan görüntüler veya simgeler varsa, onu manuel olarak bulmanız ve kaynak URL'yi bir görüntü satırıyla değiştirmeniz gerekir. Search &
Değiştir, kolayca çözmenize yardımcı olabilir. İçerme görüntünün birkaç zayıflığı vardır: bu, görüntünün boyutunu arttırır (genellikle%30 oranında).
Bu, sayfa boyutunu ve dolayısıyla TTFB’yi arttırır.
Toplamda 1.500’den fazla düğüm
Düğümün 32’den fazla derinliği
60+ alt düğümlü bir ana düğüm
DOM boyutu nasıl azalır? Genel olarak, yalnızca gerektiğinde bir DOM düğümü oluşturmanız ve gereksiz düğümleri yok etmeniz gerekir. Bununla birlikte, bu ipucu çoğu WordPress sitesi için geçerli değildir, çünkü DOM genellikle temalar, eklentiler, sayfa yapımcıları ve WordPress’in çekirdeği tarafından işlenir. İşte DOM boyutunu azaltmanıza yardımcı olacak bazı ipuçları:
Büyük sayfaları daha küçük sayfalara ayırın. Lazy sadece görüntüler değil, mümkün olduğunca çok HTML öğesi içerir.
Yorumlar, yayınlar, ürünler vb.
Ana sayfanızda ve arşiv sayfanızda görüntülenen yayın sayısını sınırlayın.
CSS kullanarak istenmeyen içeriği gizlemeyin. Tersine, tamamen silin. Gereksiz
etiketleri ekleyen şişmiş bir sayfa yapımcısı kullanmaktan kaçının.
Kuyu optimize edilmiş bir tema seçin (örneğin, GeneratePress veya Astra).
Çok fazla
etiketi ekleyen bir eklenti kullanmayın (örneğin, mega menü eklentisi). 8. Webfont yazı tipi yükleme sırasında metnin görünür olduğundan emin olun, genellikle büyük dosyalar ve yüklemek için çok zaman gerektirir. Deniz Feneri’nde böyle bir hata bulabilirsiniz:
Deniz Feneri, görünmez metnin (kaynak: google) flaşına yol açan yazı tipi URL’sini işaretler. Bazı tarayıcılar tüm yazı tipleri yüklenene kadar metni oluşturmaz. Bu, görünmez metin (FOIT) flaşı olarak bilinen şeye neden olur. Özel yazı tipi yüklendiğinde tarayıcıyı sistem yazı tipini geçici olarak görüntülemeye zorlayarak düzeltebilirsiniz. Neredeyse tüm modern tarayıcılarda FOIT’den kaçınmak için yazı tipi ekranını ekleyin: @font-face stilinizi değiştirin. İşte bunu nasıl uygulayabileceğinize bir örnek: @font-face {font-family: ‘Pacifico’; yazı tipi tarzı: normal; yazı tipi-ağırlık: 400; SRC: Local (‘Pacifico Normal’), yerel (‘Pacifico-Regular’), URL (https://fonts.sample.com/pacifico.woff2) biçimi (‘woff2’); Font-Display: Swap; } Yazı tiplerini doğrudan CDN’den (örn. Google yazı tipi) içe aktarırsanız, Parametreler & Display = URL’nin sonuna takas ekleyerek aynı şeyi başarabilirsiniz. <link href = "https://fonts.googleisi.com/cs
9. Kaynak Talimatlarını Kullanın Kullanıcılar web sitesini ziyaret ettiğinde, tarayıcı sunucudan HTML belgeleri ister, ayrıştırır, diğer referans kaynakları için ayrı istekler gönderir ve her şeyi yükledikten ve açıkladıktan sonra bir web sayfası oluşturur. Bir geliştirici olarak, siteniz için hangi kaynakların en önemli olduğunu biliyorsunuz. Bu bilgi ile, daha önce yayınlanacak bu önemli kaynakları düzenleyebilir ve sayfaların yüklenmesini hızlandırabilirsiniz. Tarayıcı Kaynak Talimatları, bunu nasıl başarabileceğinizdir. Bazı kaynak talimatları geçerli sayfadaki kaynaklar için geçerlidir, diğerleri ise gelecekteki sayfalar olasılığı için geçerlidir. Tüm kaynak talimatları, etkinleştirmek için etiketinden demiryolu özelliklerini kullanır. İlk DNS harici bir web sitesinden herhangi bir varlık yüklerseniz, DNS-Prefetch parametreleri eklemek, tarayıcıya DNS URL’sini mümkün olduğunca çabuk tamamlamasını söyler. Bu, DNS prefetlerini kaynaklara eklemenizdir: WP roket, tüm harici alanları önceden yazılı olarak eklemeyi kolaylaştırır.
Üçüncü bir taraftan çok fazla kod kullanırsanız, DNS Rocket’te DNS isteğini alın, DNS-Prefetch parametreleri eklemek, sayfanın yüklenmesini hızlandırmak için çok yardımcı olur. ÜCRETSİZ önsöz kullanabilirsiniz! Ön plana hangi harici alan adlarını ekleyebileceğinizi öğrenmek için çevrimiçi araçlar. Önbükleme uygulamaları, sadece DNS’nin yerleşiminde durmadığı sürece DNS önsezleri gibi çalışır. Bu aynı zamanda TCP ve TLS el sıkışma müzakerelerini (varsa) devam ettirecek ve devam edecektir. Bu şöyle kullanılabilir: Uygulamanın, özellikle güvenli bağlantılar için değerli işlem süresi harcayabileceğini unutmayın. Gelecekte kaynakların kullanılacağından eminseniz, hemen alıp tarayıcıya kaydetmek için bir tarayıcı önerebilirsiniz. DNS’nin ön bildiriminden farklı olarak, burada tarayıcıya kaynakları hemen yüklemeye başlamasını söylersiniz. Tarayıcıyı ilk önce kaynağı almaya nasıl yönlendireceğiniz aşağıda açıklanmıştır:
Talep edilen dosya çok büyükse veya ağ hızı yavaşsa, tarayıcı tarafından nasıl ön prefetsching (kaynak: Keycdn) prefetingching göz ardı edilebilir. Örneğin, Firefox kaynakları yalnızca tarayıcı kullanılmadığında alır. Bu prarender en güçlü rehberdir. Kaynaklara Prarender Parametreleri Ekleme Tarayıcıyı tüm varlıklarını yüklemeye zorlar, tanımlayın, Dom ağaçları oluşturun, stil uygulayın, komut dosyalarını çalıştırın, web sayfaları oluşturun ve sunulmaya hazır kalmasını sağlayın. Daha sonra REF’de belirtilen URL’yi ziyaret ederseniz, sayfa anında yüklenecektir. Önceden oluşturma kaynakları bu şekilde yaparsınız: Önceden hazırlama ana yön sayfanızı dönüştürmeyi artırmak için iyi bir yoldur. Pramuang, tarayıcıya daha çok bir öneri gibi hareket eden prefetler gibi değildir, Pramurt’un kaynak talimatları tarayıcıyı ne düşündüğüne bakılmaksızın varlıkları yüklemeye yönlendirir. Tarayıcı ön yükleme yönünü göz ardı edemez. … …
Tarayıcı, önceden ayarlanmış bir pramuad bağlantısı istemeye ne kadar erken gelmeye başlarsa, sayfanız o kadar hızlı yüklenebilir. Kaynak talimatları, kullanıcılar web sitenizi ilk kez ziyaret ettiğinde çok yardımcı olmaz. Ancak ziyaret ettikleri her sayfa önemli ölçüde daha hızlı gösterilecek. Google, web sitesi hızının sıralamasını değerlendirmek için gerçek kullanım verilerini kullandığından, kaynak talimatları sitenizin FCP’sini artırmaya yardımcı olacaktır. WP Rocket ile, web sayfanızdaki herhangi bir kaynağa oldukça kolay kolay yükleme ve DNS prefetsching uygulayabilirsiniz. Veya, WordPress sitenizdeki kaynak talimatlarını manuel olarak etkinleştirmek için Pre -Party Kaynak Talimatları gibi ücretsiz bir eklenti de kullanabilirsiniz. 10. Sayfaların bir kısmından kaçının Başka bir URL’ye aktarılan URL’yi ziyaret ettiğinizde sunucu, HTTP 301’in aktarılması için durum kodunun yanıtını döndürecektir. Bu, tarayıcı konsolunuzda böyle görünecektir: HTTP /1.1 301 Kalıcı olarak taşındı Konum:/url/to/to/yeni/konum yanıt aktarımı tarayıcıyı yeni bir konuma başka bir HTTP isteği yapmaya zorlamak için. Genellikle bu, web sayfalarının yüklenmesini yüzlerce milisaniyeye kadar geciktirir. Sayfanızın birden fazla aktarımı varsa, bu FCP’nizi yavaşça yavaşlatabilir. Bazı sayfalardan kaçının (Kaynak: Google) Deniz Feneri, iki veya daha fazla aktarımı olan bir sayfayı işaretler. Bazı transferlerden kaçınmak için, doğrudan nihai hedefe işaretlenmiş doğrudan kaynaklar. Ayrıca, kaynak sayfanızın kritik oluşturma yolunun bir parçasıysa, ondan gelen tüm aktarımı tamamen kaldırın.
CDN üzerinden bir görüntü satırı gönderilemez.
Deneyimlerime göre, sayfanın boyutunu 100 KB’nin altına koruyabiliyorsanız, bir görüntü çizgisi çok fazla bir sorun değildir. Bunun ötesinde ne olursa olsun, TTFB’nizi etkileyebilir ve böylece FCP’nize artırmaktan ziyade zarar verebilir. Ayrıca, web sitenize hizmet etmek için Cloudflare gibi bir şey kullanıyorsanız, HTML Kaynak Önbelleğine yapılandırabilirsiniz. Bu özelliğin etkinleştirilmesi, yalnızca site içeriğiniz çoğunlukla statikse önerilir. 7. Sitenizin boyutunu optimize edin DOM Belge Nesne Modeli (DOM), web sayfalarını oluşturan tüm nesnelerin bir temsilidir. Grafiksel olarak, bu düğümlü ve dallanma nesnesine sahip bir ağaç olarak temsil edilir. Dom’un yapılandırılmış gösterimi, öğelerini JavaScript gibi senaryo dili ile değiştirmeyi kolaylaştırır.
HTML DOM Ağacı Nesneleri ile Dom ağacındaki tüm HTML öğelerine düğüm denir. Düğüm, hepsi daha fazla dallanabilen çeşitli öğelerle dallanabilir. Düğümün derinliği ne kadar derin olarak adlandırılır. Tüm Dom ağaçlarının düğümünün derinliğine ağacın derinliği denir. Bir düğümün tüm doğrudan dal elemanlarına alt öğeler denir. Büyük bir dom ağacına sahip olmak, çeşitli nedenlerle FCP’niz üzerinde olumsuz bir etkiye sahip olabilir:
Optimize edilmeyen DOM ağaçları, sayfanın yüklenmesinin ilk aşamalarında kullanıcı tarafından görülemeyen birçok düğümü içerir.
DOM’un büyük boyutu, her ikisi de oluşturmayı yavaşlatabilen tüm düğümleri hesaplamak ve organize etmek için gereken daha fazla işlem süresi anlamına gelir. Büyük DOM ağaçları, kullanıcınızın cihazının bellek performansını da yükleyebilir.
Toplamda 1.500’den fazla düğüm
Düğümün 32’den fazla derinliği
60+ alt düğümlü bir ana düğüm
DOM boyutu nasıl azalır? Genel olarak, yalnızca gerektiğinde bir DOM düğümü oluşturmanız ve gereksiz düğümleri yok etmeniz gerekir. Bununla birlikte, bu ipucu çoğu WordPress sitesi için geçerli değildir, çünkü DOM genellikle temalar, eklentiler, sayfa yapımcıları ve WordPress’in çekirdeği tarafından işlenir. İşte DOM boyutunu azaltmanıza yardımcı olacak bazı ipuçları:
Büyük sayfaları daha küçük sayfalara ayırın. Lazy sadece görüntüler değil, mümkün olduğunca çok HTML öğesi içerir.
Yorumlar, yayınlar, ürünler vb.
Ana sayfanızda ve arşiv sayfanızda görüntülenen yayın sayısını sınırlayın.
CSS kullanarak istenmeyen içeriği gizlemeyin. Tersine, tamamen silin. Gereksiz
etiketleri ekleyen şişmiş bir sayfa yapımcısı kullanmaktan kaçının.
Kuyu optimize edilmiş bir tema seçin (örneğin, GeneratePress veya Astra).
Çok fazla
etiketi ekleyen bir eklenti kullanmayın (örneğin, mega menü eklentisi). 8. Webfont yazı tipi yükleme sırasında metnin görünür olduğundan emin olun, genellikle büyük dosyalar ve yüklemek için çok zaman gerektirir. Deniz Feneri’nde böyle bir hata bulabilirsiniz:
Deniz Feneri, görünmez metnin (kaynak: google) flaşına yol açan yazı tipi URL’sini işaretler. Bazı tarayıcılar tüm yazı tipleri yüklenene kadar metni oluşturmaz. Bu, görünmez metin (FOIT) flaşı olarak bilinen şeye neden olur. Özel yazı tipi yüklendiğinde tarayıcıyı sistem yazı tipini geçici olarak görüntülemeye zorlayarak düzeltebilirsiniz. Neredeyse tüm modern tarayıcılarda FOIT’den kaçınmak için yazı tipi ekranını ekleyin: @font-face stilinizi değiştirin. İşte bunu nasıl uygulayabileceğinize bir örnek: @font-face {font-family: ‘Pacifico’; yazı tipi tarzı: normal; yazı tipi-ağırlık: 400; SRC: Local (‘Pacifico Normal’), yerel (‘Pacifico-Regular’), URL (https://fonts.sample.com/pacifico.woff2) biçimi (‘woff2’); Font-Display: Swap; } Yazı tiplerini doğrudan CDN’den (örn. Google yazı tipi) içe aktarırsanız, Parametreler & Display = URL’nin sonuna takas ekleyerek aynı şeyi başarabilirsiniz. <link href = "https://fonts.googleisi.com/cs
9. Kaynak Talimatlarını Kullanın Kullanıcılar web sitesini ziyaret ettiğinde, tarayıcı sunucudan HTML belgeleri ister, ayrıştırır, diğer referans kaynakları için ayrı istekler gönderir ve her şeyi yükledikten ve açıkladıktan sonra bir web sayfası oluşturur. Bir geliştirici olarak, siteniz için hangi kaynakların en önemli olduğunu biliyorsunuz. Bu bilgi ile, daha önce yayınlanacak bu önemli kaynakları düzenleyebilir ve sayfaların yüklenmesini hızlandırabilirsiniz. Tarayıcı Kaynak Talimatları, bunu nasıl başarabileceğinizdir. Bazı kaynak talimatları geçerli sayfadaki kaynaklar için geçerlidir, diğerleri ise gelecekteki sayfalar olasılığı için geçerlidir. Tüm kaynak talimatları, etkinleştirmek için etiketinden demiryolu özelliklerini kullanır. İlk DNS harici bir web sitesinden herhangi bir varlık yüklerseniz, DNS-Prefetch parametreleri eklemek, tarayıcıya DNS URL’sini mümkün olduğunca çabuk tamamlamasını söyler. Bu, DNS prefetlerini kaynaklara eklemenizdir: WP roket, tüm harici alanları önceden yazılı olarak eklemeyi kolaylaştırır.
Üçüncü bir taraftan çok fazla kod kullanırsanız, DNS Rocket’te DNS isteğini alın, DNS-Prefetch parametreleri eklemek, sayfanın yüklenmesini hızlandırmak için çok yardımcı olur. ÜCRETSİZ önsöz kullanabilirsiniz! Ön plana hangi harici alan adlarını ekleyebileceğinizi öğrenmek için çevrimiçi araçlar. Önbükleme uygulamaları, sadece DNS’nin yerleşiminde durmadığı sürece DNS önsezleri gibi çalışır. Bu aynı zamanda TCP ve TLS el sıkışma müzakerelerini (varsa) devam ettirecek ve devam edecektir. Bu şöyle kullanılabilir: Uygulamanın, özellikle güvenli bağlantılar için değerli işlem süresi harcayabileceğini unutmayın. Gelecekte kaynakların kullanılacağından eminseniz, hemen alıp tarayıcıya kaydetmek için bir tarayıcı önerebilirsiniz. DNS’nin ön bildiriminden farklı olarak, burada tarayıcıya kaynakları hemen yüklemeye başlamasını söylersiniz. Tarayıcıyı ilk önce kaynağı almaya nasıl yönlendireceğiniz aşağıda açıklanmıştır:
Talep edilen dosya çok büyükse veya ağ hızı yavaşsa, tarayıcı tarafından nasıl ön prefetsching (kaynak: Keycdn) prefetingching göz ardı edilebilir. Örneğin, Firefox kaynakları yalnızca tarayıcı kullanılmadığında alır. Bu prarender en güçlü rehberdir. Kaynaklara Prarender Parametreleri Ekleme Tarayıcıyı tüm varlıklarını yüklemeye zorlar, tanımlayın, Dom ağaçları oluşturun, stil uygulayın, komut dosyalarını çalıştırın, web sayfaları oluşturun ve sunulmaya hazır kalmasını sağlayın. Daha sonra REF’de belirtilen URL’yi ziyaret ederseniz, sayfa anında yüklenecektir. Önceden oluşturma kaynakları bu şekilde yaparsınız: Önceden hazırlama ana yön sayfanızı dönüştürmeyi artırmak için iyi bir yoldur. Pramuang, tarayıcıya daha çok bir öneri gibi hareket eden prefetler gibi değildir, Pramurt’un kaynak talimatları tarayıcıyı ne düşündüğüne bakılmaksızın varlıkları yüklemeye yönlendirir. Tarayıcı ön yükleme yönünü göz ardı edemez. … …
Tarayıcı, önceden ayarlanmış bir pramuad bağlantısı istemeye ne kadar erken gelmeye başlarsa, sayfanız o kadar hızlı yüklenebilir. Kaynak talimatları, kullanıcılar web sitenizi ilk kez ziyaret ettiğinde çok yardımcı olmaz. Ancak ziyaret ettikleri her sayfa önemli ölçüde daha hızlı gösterilecek. Google, web sitesi hızının sıralamasını değerlendirmek için gerçek kullanım verilerini kullandığından, kaynak talimatları sitenizin FCP’sini artırmaya yardımcı olacaktır. WP Rocket ile, web sayfanızdaki herhangi bir kaynağa oldukça kolay kolay yükleme ve DNS prefetsching uygulayabilirsiniz. Veya, WordPress sitenizdeki kaynak talimatlarını manuel olarak etkinleştirmek için Pre -Party Kaynak Talimatları gibi ücretsiz bir eklenti de kullanabilirsiniz. 10. Sayfaların bir kısmından kaçının Başka bir URL’ye aktarılan URL’yi ziyaret ettiğinizde sunucu, HTTP 301’in aktarılması için durum kodunun yanıtını döndürecektir. Bu, tarayıcı konsolunuzda böyle görünecektir: HTTP /1.1 301 Kalıcı olarak taşındı Konum:/url/to/to/yeni/konum yanıt aktarımı tarayıcıyı yeni bir konuma başka bir HTTP isteği yapmaya zorlamak için. Genellikle bu, web sayfalarının yüklenmesini yüzlerce milisaniyeye kadar geciktirir. Sayfanızın birden fazla aktarımı varsa, bu FCP’nizi yavaşça yavaşlatabilir. Bazı sayfalardan kaçının (Kaynak: Google) Deniz Feneri, iki veya daha fazla aktarımı olan bir sayfayı işaretler. Bazı transferlerden kaçınmak için, doğrudan nihai hedefe işaretlenmiş doğrudan kaynaklar. Ayrıca, kaynak sayfanızın kritik oluşturma yolunun bir parçasıysa, ondan gelen tüm aktarımı tamamen kaldırın.
