WordPress site hızlandırmak için Critical CSS olayı nasıl yapılır

Merhabalar, WordPress site hızlandırmak için Critical CSS nasıl yapılır gelin sitenin yavaşlama ve hızlanma sebebini basitçe anlatayım.

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.Wordpress site hızlandırmak için Critical CSS olayı nasıl yapılır

Buna benzer bir kod bloğu çıkacaktır karşınıza şimdi aşağıdaki siteye girip sitenizin css dosyalarındaki tüm kodları tek bir kod satırında birleştin ve alın:

İlgili site: sitelocity

Wordpress site hızlandırmak için Critical CSS olayı nasıl yapılır

Site adresinizi yazın, Generate yapın ve altta çıkan tüm kodları kopyalayıp almak üzere bir köşeye kaydedin (Not defteri vs olabilir)

Şimdi header.php içini açıp aşağıdaki şekilde head içindekileri body etiketininn hemen altına alalım.

Wordpress site hızlandırmak için Critical CSS olayı nasıl yapılır

Yukarıda görüldüğü gibi head içi boş biz oraya deminki siteden aldığımız ve bir köşeye kaydettiğimiz kodları yapıştırıyoruz .

Son hali bunun gibi olacak (Sizin css kodlarınız fazla olacaktır şaşırmayın ben ekrana sığmadığı için sildim kodları siz silmeyin :)) )

 

Wordpress site hızlandırmak için Critical CSS olayı nasıl yapılır

Kaydedip çıkın.

İşlem bu kadar bundan sonrasında ister Cache yapın ister lazyload yapın gerisi size kalmış.

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,

Ali Çömez

Merhabalar, Ben Ali Çömez (Slaweally) Uzun yıllar internet sektöründe zaman geçirdikten sonra tecrübelerimi sizinle paylaşmak için bu bloğu açtım, umarım faydalı olur.

Bu yazı 74 Defa okundu, Beğendiyseniz alttaki benzer yazıları okumanızı öneririm, veya site içinde farklı içerikleri arama yapabilirsiniz.

You may also like...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir