WordPress site hızlandırma için neler yapılması gerekir? Öncelikle, Kritik Oluşturma Yolu (Critical Rendering Path) kavramına göz atalım. Tarayıcı bir sayfayı ekranda ilk kez render ederken, yani HTML,CSS ve JavaScript kodlarını işleyerek gerçek piksellere dönüştürdüğü ve ekran görüntüsünü oluşturduğu görevlerin sıralamasına denir.

Kritik Oluşturma Yolu Optimizasyonu, mevcut kullanıcının yaptığı eyleme bağlı olarak gösterilecek içeriğin sınıflandırılması ve önceliklendirilmesi gerekir. Tarayıcı tarafından gerçekleştirilen bu adımlar için harcanan zamanın en aza indirilmesi işlemine optimizasyon diyoruz.

Optimizasyon işleminin çoğu tarayıcı penceresini aşağı doğru kaydırmadan görüntülenen sayfa ile ilgilidir. Bu bölüme “kullanıcıya sayfanın görünen ilk bölümü” (Above the Fold) denir. Buna kısaca ATF diyelim.

ATF nin en kısa zamanda oluşturulabilmesi için network ağı üzerindeki gezinme sayısı minimuma indirilmeli ve harcanan sistem kaynakları optimize edilerek azaltılmalıdır.

Bu yazıda, Kritik Oluşturma Yolu Optimizasyonunu inceleyeceğiz.

• Birincisi, tarayıcının bir sayfanın içeriğini oluşturmak için gerçekleştirdiği görevlere genel bir bakış sunacağız.
• Devamında, Kritik İşleme Yolunu optimize etmek için gereken adımları inceleyeceğiz.
• Son olarak, bazı faydalı (ve popüler) WordPress optimizasyon eklentileri listelenecek.

Tarayıcının bir sayfayı oluşturması için gerçekleştirdiği adımların sırası şöyledir:

• İlk olarak, tarayıcı HTML işaretlemesini ayrıştırır ve DOM’u oluşturur.
• Sonra CSS işaretlemeyi indirir ve işlemeye başlar ve CSS Nesne Modelini yapılandırır.
• Tarayıcının sayfayı oluşturabilmesi için DOM ve CSSOM ağaçlarını birleştirir.
• Sayfadaki her nesnenin boyutlarını ve konumunu hesaplar
• En sonunda ekrandaki pikselleri yaratır ve ekranı kaplar.

Google’ın Kritik Oluşturma Yolu Rehberinde açıklandığı gibi tarayıcı Nesne Modelini Oluşturmak için 4 adım uygulamaktadır.

• İlk olarak tarayıcı HTML’nin işlenmemiş baytlarını okur ve bağımsız karakterlere çevirir.
• Ardından, Tarayıcı karakter dizilerini belirteçlere dönüştürür.
• Bu belirteçler, kendi özelliklerini ve kurallarını tanımlayan nesnelere dönüştürülür
• Son olarak, HTML biçimlendirmesi farklı etiketler arasındaki ilişkileri tanımladığından oluşturulan nesneler bir ağaç veri yapısına bağlanır.Bu yapıya Döküman Nesne Modeli (DOM) denir.

Burada dikkat edilmesi gereken nokta tarayıcının DOM’u kademeli olarak oluşturmasıdır. Bu, verimli DOM yapıları oluşturarak sayfanın oluşturulmasını hızlandırma olanağı sağlar.

Ayrıştırıcı, harici bir CSS stil dosyanı işaret eden bir bağlantı etiketiyle karşılaştığında, ayrıştırmayı durdurur ve bu kaynak için bir istek gönderir. CSS dosyası alındıktan sonra tarayıcı CSS’in ağaç veri yapısını oluşturmaya başlar.

• İlk olarak tarayıcı .css dosyasının işlenmemiş baytlarını okur ve bağımsız karakterlere çevirir.
• Ardından, Tarayıcı karakter dizilerini belirteçlere dönüştürür.
• Bu belirteçler, kendi özelliklerini tanımlayan nesnelere dönüştürülür
• Son olarak, bu nesneler her nesnenin CSS özelliklerini ve nesneler arası ilişkileri tanımlayan bir ağaç veri yapısına bağlanır. Bu yapıya CSS Nesne Modeli (CSSOM) denir.

DOM inşasının aksine CSSOM inşası katlanarak ilerleyen bir durum değildir. stil sayfasının sadece bir bölümünü kullanarak ilerleyemez, tüm CSS’i alarak bunları ayrıştırana kadar işlemi bekletir. Bu Oluşturmayı Engelleyen CSS olarak bilinir.

Tarayıcı, DOM ve CSSOM’ı işleme ağaçında birleştirir, böylece sayfayı ekrana dönüştürmek için kullanılan tüm nesneler ve özellikleri içeren ana ağaç yapısı oluşturulmuş olur.

İşleme Ağacı yalnızca bir sayfayı oluşturmak için gereken nesneleri içerir. Sonuç olarak, görünmez nesneler es geçilir.

Tarayıcı, nesnelerin boyutları ve konumu, ekran görüntüsünü oluşturabilmek için hesaplarken “Oluşturma Ağacı”nı kullanır.

Düzen aşamasında tarayıcı, Oluşturma Ağacının her nesnesinin boyutlarını ve konumunu hesaplar. Bu aşamada, tarayıcı Oluşturma Ağacı’nın kökünden başlayarak bir kutu modeli üretir. Bu bilgi nesnelerin ekranda gerçek piksellere dönüştürülmesinde (boyama işlemi) için kullanılır.

Google’ın Oluşturma Ağacı Yapımı, Yer Paylaşımı ve Boyama ile ilgili makalesine buradan ulaşabilirsiniz.

Tüm bu süreç için gereken süre belge boyutu, istek sayısı, uygulanan stiller, kullanıcı cihazı vb. gibi birçok faktöre göre değişir.

En ideali Google’ın önerisi olan kullanıcıya sayfanın görünen ilk bölümü ATF‘yi mümkün olduğunca hızlı bir şekilde render edilmesinin sağlanmasıdır. Takip edilmesi gereken iki ana kural sunar:

• ATF’nin önce yüklenmesi için HTML’i yapılandırın.
• HTML, CSS ve JS kaynakları tarafından kullanılan veri miktarını azaltın.

Google’ın PageSpeed rehberinde açıklandığı gibi, ATF’yi oluşturmak için gereken veri miktarı, baştaki tıkanıklık aralığından (14.6 kb) fazla olursa, sunucunuzla kullanıcının tarayıcısısı arasında ek gidiş gelişler gerekecektir. Bu durum mobil ağlar gibi yüksek gecikmeye sahip ağlardaki kullanıcılarda sayfa yüklerken önemli gecikmelere neden olabilir.

Tarayıcı DOM’u katlamalı olarak inşa etmektedir. Bu, bize HTML’yi sayfanın üst kısmını ilk önce yüklemek ve sayfanın geri kalan kısmını ertelemek için yapılandırarak ATF’nin oluşturulması için gereken süreyi kısaltma olanağı sunmaktadır.

Fakat optimizasyon, etkili bir DOM yapısı oluşturulması ile bitmez. Aksine, bu, Kritik Oluşturma Yolunun tamamını içeren geliştirme ve  iyileştirmeleri ölçe sürecidir.

Neler yapabiliriz ona bakalım!

HTML, CSS ve JavaScript kaynaklarını küçültme, sıkıştırma ve ön belleğe alma işlemleri ile tarayıcının indireceği veri miktarını azaltabiliriz:

• Küçültme, kaynak kodundan yorumlar veya boşluk gibi gereksiz karakterleri kaldırma işlemidir. Bu karakterler kod geliştirirken son derece yararlıdır, ancak tarayıcı için sayfayı oluşturmakta gerekli olmazlar.
• Sıkıştırma, hız ve bant genişliği kullanımını artırmak için Web sunucularının ve istemcilerin ilettiği dosyaların boyutunu azaltma işlemidir
• Önbellekleme: her tarayıcı bir HTTP önbellek uygulaması ile birlikte gelir. Yapmanız gereken, sunucudan tarayıcıya her yanıt geldiğinde istenilen kaynakların ne zaman ve ne kadar süreyle ön-belleğe alınması gerektiğinin bildirilmesini sağlamaktadır.

Artık, tarayıcının sayfayı oluşturmadan önce CSS kodunu alıp işleyene kadar beklemesi gerektiğini biliyoruz (CSS render engelleme). Ancak tüm CSS kaynakları renderı engellemez.

CSS belirli koşullar ile sınırlandırılabilir, medya tipleri ve medya sorguları kullanarak optimize edebiliriz. Mesela medya tipi: baskı için tarayıcı bir istek gönderebilir ancak bu talep sonuçlanana kadar beklemeden web sayfasını ekranda görüntüleyebilir.
Aşağıdaki bağlantı link etiketine bakarsak

link rel= "stylesheet" href= "print.css" media= "print"/>

Tarayıcı print.css stil sayfasını indiriyor ama bu sırada render işlemini engellemiyor. Dahası CSS’yi bir den çok dosyaya bölebilir ve koşullu olarak yükleyebiliriz böylece hızlandırma sağlanabilir.

link rel= "stylesheet" href= "style.css" media= "screen"/>
link rel= "stylesheet" href= "portrait.css" media= "orientation:portrait"/>
link rel= "stylesheet" href= "widescreen.css" media= "(min-width: 42rem)"/>

Medya türleri ve sorguları sayfa oluşturma sürecini hızlandırmamıza yardımcı olabilir, ancak daha fazlasını yapabiliriz.

• CSS Küçülteme: Stil sayfasından yorum ve boşlukları kaldırarak bir CSS dosyasının bayt sayısını önemli ölçüde azaltabiliriz.
• Birden fazla CSS dosyasını birleştirme: Bu, HTTP isteklerinin sayısını azaltacaktır. Bu eylem, performansın yüksek gecikme süresinden etkilenen mobil bağlantılarda özellikle önemlidir.
• Inline (satır içi) CSS: Bazı stiller, sayfanın üst kısmında (ATF) görüntülenmesi gerektiği için kritiktir. Bu stiller ek HTTP isteklerini engellemek için direk HTML markup içerisine doğrudan eklenebilir. Ancak, büyük CSS dosyalardan kaçının bu ATF yi oluşturmak için ek turlar atılmasını sağlayabilir bunun sonucunda  “Sayfa Hızı” uyarısı alırsınız.

Tarayıcı tarafından sayfanın şablonunu oluşturmak için harcanan süre, düzenlenecek DOM öğelerinin sayısına ve bu şablonun karmaşıklığına bağladır.

• Çok sayıda DOM öğeniz varsa, bunların konumunu ve boyutlarının tarayıcı tarafından hesaplanması uzun zaman alabilir: mümkün olduğunca şablon yapısından kaçınmak gerekir.
• Yeni Flexbox modeli tercih edilmelidir.
• javaScript ile senkronize  şekilde çalışmaya zorlanmamalıdır.

Öğenin boyutunu ve konumunu hesaplamak zaman alır ve performansı düşürür. DOM’u olabildiğince basit hale getirmek, sayfa düzenini tahmin etmek için JavaScript’in kullanılmasını önlemek, tarayıcının sayfa oluşturma işlemini hızlandırmasına yardımcı olur.

“Kritik Oluşturma Yolu” sırasında en çok zaman harcayan aşama olan muhtemelen boyama işlemidir ve bu işlem sayfa düzenine bağlıdır; çünkü bir öğenin düzenini veya herhangi bir geometrik olmayan bir özelliği değiştirdiğinizde tarayıcı bir boyama işlemini tetiklemektedir. Bu aşamada her şeyi en basit hale getirmek, tarayıcının boyama sürecini hızlandırmasına yardımcı olabilir, Örneğin, bir çeşit hesaplama gerektiren bir “box-shadow” CSS özelliğini ele alalım. Bu box-shadow özelliği kutu-gölge yaratır ve diyelim ki düz bir kenarlık rengi yaratılmasından daha uzun süre boyama işlemi gerçekleşecektir.

Boyama işlemini optimize etmek o kadar kolay olmayabilir, tarayıcının her bir boyama işlemini tetiklemesi için geçen süreleri ölçmekte kullanılan tarayıcınızın geliştirici araçlarını deneyin. Bu konu ile ilgili daha fazla bilgi: Google’ın Render Performansı rehberinde anlatılmaktadır.

Tarayıcı bir script etiketi ile karşılaştığında,HTML kodunu ayrıştırma işlemini durdurmak zorundadır. satır içi JavaScript komut dosyaları dokümanın neresinde ise tam o noktada çalışmaya başlar ve JS motoru çalışması tamamlanıncaya kadar DOM inşasını durdurur. Başka bir deyişle, satır içi JavaScript komutları  sayfanın render edilmesini önemli ölçüde geciktirebilir. Ancak JavaScript, CSS özelliklerini yönete bilmektedir böylece CSSOM’u indirip inşası tamamlanana kadar tarayıcı bu komut dosyaların yürütülmesini duraklatabilir. Bunun anlamı JavaSript ayrıştırı engelleme özelliği bulunduğudur.

Harici JS dosyalarının olması durumunda, ayrıştırıcı, kaynakların önbellekten veya uzak sunucudan alınana kadar bekler, buda sayfanın ilk oluşturulması için gereken süreyi önemli ölçüde yavaşlatır.

Peki tarayıcı, JavaScript’i yüklemek ve çalıştırmak için harcadığı süreyi en aza indirmek için ne yapabiliriz?

• JavaScript’in asenkron olarak yüklenmesi: script etiketinin boolean async özelliği, tarayıcıya komut dosyasını mümkün olduğunca DOM yapılandırmasını engellemeden asenkron olarak yürütmesini bildirir. Tarayıcı, komut dosyası için HTTP isteğini gönderir ve DOM’u ayrıştırmaya devam eder. Ayrıca, komut dosyası CSSOM yapısını engeller böylece “kritik oluşturma yolu” engellenmez (Script etiketi nitelikleri hakkında daha fazla bilgi için MDN dökümanlarına bakın.
• JavaScript’i ertele: script etiketinin defer özelliği tarayıcıya doküman ayrıştırıldıktan sonra fakat DOMContentLoaded olayı tetiklenmeden önce script komut dosyasını yürütmesini söyler. Eğer src özelliği yoksa bu özellik kullanılmalıdır. ( Mozilla Hacks‘de daha fazla bilgi bulabilirsiniz)
• Satır içi JavaScript’i erteleyin: Birçok komut dizisi DOM’u veya CSSOM’u yönetmez, bu nedenle ayrıştırmayı durdurmak için bir nedende yoktur. Ne yazık ki, satır içi komut dosyaları için asyncveya defer özelliklerini kullanamıyoruz; bu nedenle belge yüklendikten sonra yüklenmelerini sağlamanın tek yolu bunları dokümanın el altına taşımaktır. Bunun avantajı satır içi komut dosyaları ek olarak HTTP isteklerinde bulunmaz, bununla birlikte birçok sayfada bu şekilde kullanılması gereksiz kod oluşturulmasına neden olacaktır.

Birçok şey yazdık ettik, Şimdiye kadar açıklanan optimizasyon işlemlerinin bir özetini çıkarırsak:

• HTML, CSS ve JavaScript kaynaklarını küçült, sıkıştır ve önbelleğe al.
• İşleme engelleme kaynaklarının kullanımını en aza indirin (özellikle CSS)
  • link etiketindeki medya sorgularını kullanın
  • Stil sayfalarını ve satır içi kritik CSS’i bölümlere ayırın
  • Birden fazla CSS dosyasını birleştirin
• Ayrıştırıcı engelleme kaynaklarının kullanımını en aza indirin (JavaScript)
  • Script komut etiketleri üzerinde defer özelliğini kullanın
  • Script komut etiketleri üzerinde async özelliğini kullanın
  • Satır içi JavaScript ve script komut dosyası etiketlerini dokümanın el altına taşıyın

Kritik Oluşturma Yolu Optimizasyon’un temel kavramları bildiğimize göre, WordPress popüler optimizasyon eklentilerine artık göz atabiliriz.

WordPress kullanıcıları, optimizasyon işleminin tüm yönlerini kapsayan bir dizi eklentiden yararlanabilir. Tam özellikli bir eklenti kurabilir veya her biri belirli bir optimizasyon özelliği sağlayan birçok eklenti kurabilirsiniz.

Bu tek eklenti “Kritik Oluşturma Yolu Optimizasyonu” sürecinin hemen hemen her aşamasını kapsar. İlk bakışta eklenti ayarları karmaşık gelebilir, ancak aşina olmaya başladığınızda güçlü bir performans aracından faydalanabilirsiniz.

Eklentinin bazı özelliklerinin listesi:

• HTML (yayınlar ve sayfalar), CSS ve JavaScript’in bellekte, diskte veya CDN üzerinde önbelleğe alınması
• Arama sonuçlarının,veritabanı nesnelerinin, geri bildirimlerin, WordPress nesnelerinin önbelleğe alınması
• HTML (yayınlar ve sayfalar) küçültme işlemi
• JavaScript ve CSS küçültme işlemi
• async and defer etiketleri ile JavaScript optimizasyonu
• Önbellek denetimi eve etiketler kullanarak tarayıcı önbelleği oluşturma
• HTTP (gzip) sıkıştırma işlemi
• WordPress panelinde Google PageSpeed test sonuçları

Bunlar, W3TC’nin birçok özelliğinden sadece birkaçı. WordPress.org’un eklentiler sayfasında daha fazla bilgi bulabilirsiniz.

WP Super Cache, site performansı için başka bir popüler eklentidir.

Çok sayıda optimizasyon özellikleri ile birlikte gelmektedir. Daha önce bahsettiğimiz W3 Total Cache’e nazaran daha az kapsamlıdır, acemi ve orta seviye kullanıcılara daha uygun olabilir.

Temel olarak, önbellekleme özellikleri ve HTTP sıkıştırma sunmaktadır.  Async ve defer etiket özellikleri ile kaynak küçültme ve JavaScript optimizasyonundan yoksundur.Bununla birlikte, bir milyondan fazla aktif kurulum ile denemeye değer bir eklenti olduğunu ispat etmiştir.

400.000’den fazla aktif yüklemeyle Autoptimize, küçültme için en popüler ücretsiz eklentilerden biridir.

HTML, CSS ve JavaScript’in farklı bölümlerde optimizasyonunun yapıldığı bir yapıda gelir.

Bağımsız Script komut etiketleri veya stil sayfalarını bir araya getirebilir ve belirli kaynaklar için istisnaları belirleyebilirsiniz. Dahası, Autoptimize, küçültülmüş kaynakları diskte veya CDN üzerinde önbelleğe almaya ve optimize edilmiş varlıkları statik dosyalar olarak kaydetmeye olanak tanır.

Bu eklenti sayfanın ilk görüntülenen kısmı ATF için kapsamlı bir araç setidir. Bu, Google PageSpeed testinde 100/100 puan almayı hedefleyen profesyoneller ve ileri düzey kullanıcılar için bir araçtır.

En ilginç özelliklerden bazıları:

Kritik CSS Araçları:

• Koşullu CSS yükleme
• Metin editörü ile kritik CSS yönetimi
• Gulp.js kritik CSS yaratıcısı
• Kritik CSS kalite testi

CSS yükleme optimizasyonu:

• Asinkron CSS yükleme
• HTML’den CSS’i çıkarma işlemi
• Harici stil sayfası önbelleği

JS load optimization:

• Asinkron JS yükleme
• localStorageönbelliği
• Koşullu JavaScript yüklemesi
• Harici stil sayfası önbelleği

Ayrıca, bu eklenti Google’ın Aşamalı Web Uygulaması ve Google Web Yazı Tipi optimizasyonu için destek sağlamaktadır. Denemek isteyebileceğiniz başka optimizasyon eklentiler şunlardır:

• Minify HTML Markup
• WP Super Minify
• Fast Velocity Minify
• JCH Optimize

Swift Performance, denemek isteyeceğiniz başka bir eklenti. Bu performans puanlarınızı arttırmanıza yardımcı olan ve 100/100 Google PageSpeed Insights puanları elde etmenize yardımcı olmak için özel olarak geliştirilmiş ücretli bir eklentidir.

Ana özelliklerinden bazıları şunlardır:

• CSS ve javascript dosyalarını yalnızca küçültmek ve birleştirmekle kalmaz, aynı zamanda sayfalarınız için anında kritik CSS oluşturabilir.
• Akıllı önbelleğe alma, aynı zamanda AJAX ve dinamik istek desteği.
• Dahili kayıpsız resim sıkıştırma.
• CDN desteği.

Kritik Oluşturma Yolu Optimizasyonu, kodun ekranda piksele dönüştürülmesi ve böylece ekranda bir sayfanın oluşturulması için tarayıcının yaptığı her bir görevin geliştirilmesi ve performansın ölçülmesi işlemidir. Bunla ilgili en güzel kaynak Google’ın optimizasyon rehberi

Web sitelerini optimize etmek ne kadar sürüyor? Ve size göre optimizasyon sürecinin hangi yönleri en zorlu adımlar? Aşağıda yorumlarınızı bekliyoruz.

The post WordPress site hızlandırma appeared first on Egezon.