“Eliminate render-blocking Javascript and CSS in above-the fold content” Çözümü

Giriş

Web sitesi hızı, ziyaretçilerin ilgisini çekmekte ve ziyaretçileri sitede tutmada en önemli faktörlerden biridir. Diğer her şey eşit olduğunda, daha hızlı bir web sitesinin kullanıcıları çekmesi çok daha muhtemeldir. Bunun nedeni, arama motorlarının sonuçları sıralarken site hızını dikkate alınmasıdır. Yani, SEO puanınızı yükseltmek istiyorsanız, site hızını bir öncelik haline getirin.

Tabii ki, sitenizin hızına bakmak bir sorun olabilir. Test metodolojinizi etkileyebilecek bir ton değişken vardır – İnternet bağlantı hızı, coğrafi konum vb. Google’ın PageSpeed Insights‘ı da işte tam burada devreye girer. Bu, Google tarafından sunulan, web sitelerine yükleme hızlarına dayalı olarak bir puan atayan ücretsiz bir hizmettir. Doğal olarak, PageSpeed’de mümkün olduğunca yüksek puan almak istersiniz. Ayrıca, bu online aracı zaten çalıştırdıysanız, Eliminate render-blocking javascript and css in above-the fold content önerisini görmüş olabilirsiniz.

Eliminate render-blocking javascript and css in above-the fold content ne anlama gelir?

Bu öneriyi anlamak için Google’ın PageSpeed Insights’da nasıl puan verdiğini belirleyen kriterlere bakmalıyız. Google’ın belirlediği on hız kuralı vardır. Bu kurallardan herhangi biri sağlanmadığında PageSpeed puanınız düşecektir.

Render-blocking javascript and css in above-the fold content bu kurallardan biridir. Genellikle, JS ve CSS dosyaları web tarayıcısının HTML sayfasını yüklemeyi geciktirmeye zorlar. Elbette, bu bir sorun değildir. Aslında, yapmak istediğimiz tam da CSS ve JS dosyaları yüklenmeden HTML sayfasının yüklenmemesidir. Hiç kimse stillendirilmemiş içeriğe bakmayı istemez.

Render-blocking JS ve CSS’de tam olarak bu yüklenmeyi geciktiren ama web sitesi yüklenmeden bir etkisi olmayan kodlara işaret eder. Above-the-fold (ATF), yalnızca sayfa yüklendiğinde görünür olan web sitesinin kısımlarına verilen addır. Kaydırma çubuğunu veya mouse kaydırma tekerleğini kullanarak ulaştığınız web sayfası kısımları ATF değildir. Bu öneride Google, Sayfanın üst kısımlarında hiçbir etkisi olmayan CSS ve JS dosyalarının sayfa yüklendikten sonra yüklenebileceği konusunda sizi uyarıyor.

Bu WordPress rehberinde, sayfa yüklenmesini geciktiren kodları bulmak için Google PageSpeed Insights kullanacağız. Ardından WordPress sitenizde bu sorunu çözmek için kullanabileceğiniz 3 farklı yöntem göstereceğiz. Bu rehbere ek olarak, kullanıcı deneyimini geliştirecek WordPress sitenizi hızlandırmanıza yardımcı olacak diğer önerilere de göz atmalısınız.

Nelere ihtiyacınız olacak?

Bu rehbere başlamadan önce aşağıdakilere ihtiyacınız vardır:

• WordPress yönetici alanına erişim

Eliminate render-blocking javascript and css in above-the fold content Hatası Çözümü

JS ve CSS, herhangi bir modern web sitesinin hem yüksek düzeyde işlevsel olması hem de güzel görünmesi için önemli bir parçadır. Güzelliğe karşılık olarak vazgeçtiğimiz de peformanstır. Sitenizi daha hızlı hale getirmek için yapabileceğiniz birkaç önlem vardır. Örneğin JavaScript’in ayrıştırılmasını ertelemek gibi. Ancak bazen bu da yeterli olmayabilir. Tabii ki, yüklenmeyi geciktiren JavaScript ve CSS’den bahsediyoruz. Bu konuyla ilgilenmek için öncelikle sorunun varolduğundan emin olmalıyız. Yüklenmenin gecikmesine sebep olan CSS ve JS dosyalarının olduğunu doğruladıktan sonra olası çözümlere geçebiliriz.

Adım 1 – Render-blocking JS ve CSS Dosyalarını Bulmak için Google PageSpeed Insights Kullanmak

Render-blocking JS ve CSS sorununu çözmenin ilk adımı Google PageSpeed Insights ile sitenizin hızını test etmektir. Sayfayı ziyaret edin ve metin alanına sitenizin URL’sini yazın. Sitenizin hız raporunu almak için Analyze butonuna tıklayın. Çoğu site genellikle 50-70 arasında bir puan alır. Bun bilgiyi puanınızı diğer sitelerle karşılaştırmak için kullanabilirsiniz. Puanınızın yanı sıra, Google sitenizin performansını nasıl geliştirebileceğiniz konusunda size öneriler de sunacaktır.

Render blocking hatasının çözümünü göstermek için gerçek bir site kullanacağız. Yukarıdaki ekran görüntüsünde görebileceğiniz gibi site birkaç render-blocking JS ve CSS dosyasına sahip.

Eğer siz de testi çalıştırdıktan sonra Eliminate render-blocking Javascript and CSS in above-the fold content hatasını aldıysanız bu rehberi takip etmeye devam edin. Tarayıcınızın bir sekmesinde bu testi açık bırakın. Problemi çözerken test sonuçlarına ihtiyacınız oalcaktır.

Adım 2- Render-blocking JavaScript ve CSS Çözümü

Seçenek 1 – W3 Total Cache Kullanmak

Render-blocking kodların ne olduğunu öğrendiğinize göre artık çözüm yollarınızı inceleyebilirsiniz. Bu problemi çözmek için hayat kolaylaştıran bir eklenti yüklemenizi öneririz. Favorilerimizden biri W3 Total Cache eklentisidir. Eklentiyi kurun ve etkinleştirin. Kurulumu tamamladığınızda şu adımları takip edin:

1. Performance > General Settings kısmına girin. Sayfada Minify başlığını bulun.
2. Bu başlığın altında birkaç ayar bulacaksınız. Bizim aradığımız Minify. Yanındaki Enable kutusunu işaretleyin.
3. Minify mode seçeneğinde Manual‘ı seçin ve ardından Save all settings butonuna tıklayın.
   
4. Bu noktada yüklenmeyi geciktiren tüm JS ve CSS dosyalarına ihtiyacınız vardır. Bu dosyaların listesine Google PageSpeed Insights aracılığıyla ulaşabilirsiniz. Adım 1’de önerildiği gibi test sonuçlarını açık bıraktıysanız Show how to fix tıklanabilir metnini render-blocking önerisinin altında bulabilirsiniz. Üzerine tıklayın. Burada yüklenmeyi geciktiren tüm render-blocking dosyaların listesini bulabilirsiniz.
5. WordPress’e geri gidin. Performance > Minify kısmına girin. JS ve CSS dosyalarını ayrı ayrı küçültmeniz gerekir.
6. Öncelikle JS dosyalarının çaresine bakalım. Bu sayfada JS başlığını bulun. Ardından Operations in areas kısmını bulacaksınız. Burada, <head> etiketinden önceki embed type ayarını (ilk satır) Non-blocking using defer olarak seçin.
7. Ardından JS file management alt başlığında aktif temanızı seçin ve Add Script butonuna tıklayın. Şimdi basitçe PageSpeed test sonuçlarından JS kodlarının URL’lerini kopyalayın ve buraya birer birer yapıştırın. Böylece JS dosyaları için çözüm tamamlanmış olur.
8. CSS’e geçelim. CSS kısmını bulmak için aynı sayfada aşağılara inin. CSS file management alt başlığının altında aktif temanızı seçin ve Add a stylesheet butonuna tıklayın. JS kodlarına benzer olarak, PageSpeed Insights kısmından buraya CSS stil dosyalarının adreslerini kopyalayın.
9. Son olarak Save settings and purge cache butonuna tıklayın.

Şimdi render-blocking önerisinin hala durup durmadığını kontrol etmek için Google PageSpeed Insights’a geri dönmelisiniz. Aşağıdaki ekran görüntüsünden görebileceğiniz gibi W3 Total Cache eklentisinde yaptığımız ayarlar bizim test sitemizde eliminate render-blocking javascript and css in above-the fold content sorununu çözdü.

Eğer above-the-fold içeriği üzerinde daha fazla kontrole sahip olmak isterseniz, Above The Fold eklentisine göz atın. Bu eklenti özel olarak STF içeriği için tasarlanmıştır  ve W3 Total Cache ve Autoptimize gibi diğer popüler eklentilerle düzgün çalışır.

Seçenek 2 – Autoptimize Kullanmak

Render-blocking problemininin çözümü için biraz daha kolay olan bir yol Auptomize adı verilen bir eklenti kullanmaktır. Eklentiyi indirin ve kurun. Kurulumu tamamladığınızda Ayarlar > Auptimize kısmına girin. Burada basitçe Optimize JavaScript Code? ve Optimize CSS Code? yazan kutuları işaretleyin ve Save Changes and Empty Cache butonuna tıklayın.

Çoğu durumda render-blocking problemini çözmek için yeterlidir. (Temanıza ve aktif eklentilerinize göre değişiklik gösterebilir.) Bu eklentinin sizin için yeterli olup olmadığını görmek için PageSpeed Insights testini tekrar çalıştırın.

Yukarıdaki ekran görüntüsünden görebileceğiniz gibi Autoptimize 1 JS dosyasını ve 1 CSS dosyasını bıraktı.

Eğer optimizasyonu daha da öteye taşımak isterseniz Ayarlar >Autoptimize kısmına girin. Show Advanced Settings butonuna tıklayın. Burada, Also aggregate inline JS ve Also aggregate inline CSS seçeneklerini işaretleyin. Save changes and Empty Cache butonuna tıklayarak işlemi tamamlayın. Bunun yardımcı olup olmadığını kontrol etmek için PageSpeed Insights testini tekrar çalıştırın.

Seçenek 3 – Speed Booster Pack Kullanımı

WordPress sitenizde render-blocking sorununu çözmek için faydalı bulabileceğiniz bir diğer popüler eklenti de Speed Booster Pack‘dir. Eklentiyi indirin ve aktifleştirin. Eklentinin ayarlarına WordPress yönetici panelinizde Ayarlar > Speed Booster Pack kısmından girebilirsiniz.

JS dosyaları için Move scripts to the footer ve Defer parsing of JavaScript files kutularını işaretlemelisiniz.

CSS render-blocking için Still need more speed? menüsüne gidin. Burada CSS optimizasyonu, CSS küçültme, inline CSS stillerini footer’a taşıma ve CSS’i eşzamanlı olmadan yükleme gibi ek ayarları bulabilrisiniz.

Sitenizi mutlu olduğunuz bir oranda tutmaya ulaşana kadar bu ayarlarla oynayabilirsiniz. Hepsini aktifleştirmek elbette sitenizi daha hızlı yükleyecektir. Fakat aynı zamanda çok kısa bir süreliğine de olsa istenmeyen içeriğin görünmesine neden olabilir. Bu tarayıcının stil dosyalarının yüklenmesini beklemeden web sayfasını yüklemesi durumunda olur. Render-blocking sorununun hala bulunup bulunmadığını kontrol etmek için Google PageSpeed Insights’ı tekrar kontrol edin.

Sonuç

Render-blocking WordPress sitenizin hızını ve performansını derinden etkileyebilir. Bu WordPress rehberinde eliminate render-blocking javascript and css in above-the fold content problemini çözmeyi öğrendik. Hâlâ sitenizde birkaç gerekli render-blocking dosya bulunuyor olsa da umarız ki bu rehberin en azından problemin bir kısmını çözmenize yardımcı olduğunu umarız.

Eğer yukarıdaki çözümlerden biri sitenizin işlevselliğini bir şekilde bozduysa, render-blocknig kodu takip etmeyi unutmayın. Unutmayın, site hızı yalnızca şimdiye kadar web sitenizi geliştirirken önemlidir; temel işlevsellikten ödün vermek zorunda kalmamalısınız. Dolayısıyla, hala bazı render-blocking kodlar sitenizde sarkma yaratabilir, bu konuda endişelenmeyin. Bu rehberi kullanışlı buldunuz mu? Hostinger.web.tr/rehberler/wordpress adresinde sizin için çok daha fazlasına sahibiz.