Bu çözüm, sitenizin performansını arttıracak ve Önemli Web Verileri durumunuzu iyileştirmenize yardımcı olacaktır.
Sonrasında gelsin binlerce ziyaretçi, yükselsin Google sıralamaları!
İşte bu operasyonun nasıl yapıldığı
İLK AŞAMA
1- Sitenizdeyken F12 tuşuna basın.
2- Network sekmesine tıklayın. CSS kısmına gelin. F5 yapıp yenileyin.
3- Sitenizin öncelikli css dosyalarının yolunu bir yere kopyalayın.
4- Bir sonraki aşamaya geçin.
İKİNCİ AŞAMA
1- Sitenize kurduğumuz Perfmatters eklentisinde Preloading kısmına gelin.
2- Kopyaladığınız css dosyalarının yolunu işaretli alana yapıştırın.
3- Select Type yazan kısmını Style olarak seçin.
4- Preload Critical Images kısmını 2-4 arası bir değer seçin.
5- Sitenizin tasarımının hızla oluşturulması adımı tamamlandı. Bir sonraki aşamaya geçin.
ÜÇÜNCÜ ve SON AŞAMA
1- Bu videodan ilhamla diğer ayarlarınızı yapılandırın.
https://www.youtube.com/watch?v=NJtK7xK0Gzo
SONUÇ
İLK AŞAMADA... Sitenizin kritik öneme sahip css dosyalarını tespit ettik.
Bunun anlamı, sitenizin görüntüsü oluşurken aslında hangi dosyaların önemli olduğunu tespit etmekti.
Fark ettiyseniz, footer.css gibi dosyalar bu duruma dahil değil.
Kritik olanlar style, header ve bazı durumlarda content ile global css dosyaları.
Bu dosya isimleri sizin temanızda farklı olabilir.
İlgili site Kadence kullanıyor. Ve DOM organizasyonu kusursuz.
Yine de sizin tasarımınızda dosyalar farklı isimlerde olsalar da, öncelik sırası style.css ve header.css kesindir.
--------------------
İKİNCİ AŞAMADA... Tespit ettiğimiz css dosyalarına preload ile açılma önceliği verdik.
Bunun anlamı şudur. Tarayıcı sitenizin yapısını okumaya başladığında bu dosyaları her şeyden önce okumaya başlayacaktır.
Böylece ziyaretçi, sitenin hıphızlı açıldığını algılayacaktır. Çünkü tasarımın iskeletini ve üst kısımlarını erkenden oluşturmaya başladık.
Bunu yapmadığınızda bütün css dosyaları birlikte yüklenmeye çalışır. Sonuç? Daha yavaş açılan bir site ve Önemli Web Verileri = BAŞARISIZ.
Düşünün, footer kısmına kaydırmadığı halde neden üst kısımda bunun css dosyaları çağırılsın ki? Gereksiz yük!
Durumu kavradığınızı tahmin ediyorum. Her şeyin bir anda yüklenmesi yerine, önemli olanlara öncelik veriyoruz. Bu kadar basit.
Daha sonra...
Ziyaretçiye "hoş geldin" diyen üst görselleri erkenden çağırıyoruz.
Bir sitenin algılanan hızını arttıran şeylerden birisi de, üstteki görsellerin yüklenme hızıdır.
Evinize gelmiş misafiri görür görmez hoşgeldin demek gibi, üst kısımdaki görsellerin de erkenden yüklenmesini istersiniz.
Alttakiler daha sonra yüklenmesini sürdürse de olur. Bu aynı zamanda Google dilinde LCP yasası olarak yerini almıştır.
Unutmamanız gereken diğer nokta, üstteki görsellerin aynı zamanda lazy load işleminden hariç bırakılmasıdır.
--------------------
ÜÇÜNCÜ AŞAMADA... Geri kalan mükemmellik iksirini içiyoruz.
Bunu zaten videoda dilim döndüğünce anlattım.
Burada tekrar gevezelik etmeme gerek yok.
ÖZET
Bu işlemleri yapmıyorsanız, büyük bir fırsatı kaçırıyorsunuz demektir.
10-15 dakikanızı ayırmanız karşılığında devasa bir optimizasyon yapacağınızı temin ederim.
13 kişi bunu beğendi.
