Web sitelerimiz onlarca sebepten yavaşlıyor olabilir her sebebin farklı çözümleri vardır ancak biz burada sitenin yavaşlama sebebini deil çözümüne bakacağız. Aslında yavaşlık sebebine de kısaca değinelim.
Tarayıcı sitenizi okurken uzaktan çağrılan dosyaların tamamını yüklenmesini bekler ve sonrasında siteyi son hali ile önümüze açardı. Biz buna farklı bir çözüm getirdik ismi Lazy Load (Yüklendikçe açılan sayfalar) çözüm aslında güzeldi ekranda görünen kısım kadarını yükleyecek geri kalan kısımlardaki resimler videolar yüklenmeyecekti bu oldukça iyi bir çözümdü.
Bu çözüm ile birlikte Js CSS to footer (bir önceki çözümümüz) yani js ve css dosyalarını sitenin başından sonuna taşımak bunu da askıya almış olduk footer yüklenmesi gerekiyordu çünki.
Ancak bir zaman sonra bu çözüm de bize Js ve Css dosyalarını beklememiz gerektiğini hatırlattı. Yani site açılacak evet lazy load işlemi gerçekleşmesi için de js ve css gerekli bize en azından açılmış kısım için gerekli bu nedenle de olsa o dosyalar bir şekilde çağırılacak.
Sonuç olarak şu anda bu sorunlara toplu olarak bir çözüm sunalım.
Sitemizin temel Html kodları tarayıcıda yorumlanana kadar Css kodlarını zaten tarayıcıya çoktan vemiş olsak nasıl olur ?
Vaay neden olmasın hatta süper olur dimi ?
İşte burada Critical CSS olayı devreye giriyor. yani Sitenizin başında siteye ait tüm Css kodlarınızı tarayıcıya verin tarayıcı gövde içinde html yorumlarken zaten elinde olan css ile harmanlayarak mümkün olan en kısa süre içinde siteyi bize sunsun.
Birde bu sisteme ek olarak Lazy Load yapalım ki sitemizin Url yazılmadan sitemiz açılmış olsun 🙂 🙂 şaka yapıyorum.
Evet lazy load kısmında ciddiyim bunu yapalım zaten. neyse konumuza dönecek olursak bu critical css nasıl yapılır hemen başlayalım.
Öncelikle sitede kullanılan temanın header.php dosyasını açın.
İlgili site: sitelocity
) )
yapamadığınız bir kısım olursa mutlaka yorum yazın elimden geldiği kadar yardımcı olmaya çalışırım.
İyi çalışmalar diliyorum,
Kaynak: Wordpress ipuçları
