Son yıllarda (özellikle 2018’deki core update sonrası) arama motoru optimizasyonu denildiğinde ilk akla gelen çalışma alanlarından biri hiç şüphesiz site hızı optimizasyonudur.
Web sayfalarının arama motoru botları tarafından sorunsuz bir şekilde taranıyor olması SEO’da optimum performans için yeterli değildir. Botların, web sayfalarını mümkün olan en hızlı şekilde taraması ve site hızındaki bu gelişim ile crawl budget’ın (tarama bütçesi) efektif kullanılması önemlidir.
Diğer taraftan site hızının kullanıcı deneyimi üzerindeki etkisine de bakmak gerekir. Özellikle e-ticaret sitelerinde kullanıcının görüntülemek istediği ürüne hızlı bir şekilde ulaşması ve web sayfalarının bu noktadaki kullanıcı beklentilerini karşılaması da önemlidir.
Arama motoru sıralama algoritmasının temelinde “kullanıcının aradığı bilgiye, ürüne ya da hizmete mümkün olan en kısa sürede en doğru şekilde ulaşması” mottosunun yattığını düşünürsek, site hızının hem arama motoru botları hem kullanıcılar açısından takip edilmesi gereken en önemli metriklerden biri olduğunu bir kez daha görebiliriz.
WordPress’te Site Hızı Nasıl Artırılır?
WordPress’te site hızının gelişimine katkı sağlayacak büyük ve küçük ölçekli birçok aksiyon olsa da bu aksiyonlar temelde aşağıdaki şekilde gruplandırabiliriz;
- Doğru Tema Seçimi
- Resim (Image) Optimizasyonu
- CSS ve JS Optimizasyonu
- Request (İstek) Sayısı Optimizasyonu
- Sunucu Optimizasyonu (İlk Yanıt Süresini Düşürmek)
Doğru Tema Seçimi
WordPress’te tema (şablon) seçimi, web sitenizin performansı ve hızı üzerinde önemli bir etkiye sahip olabilir. Tema, bir web sitesinin görünümünü ve işlevselliğini belirler ve site hızı üzerinde çeşitli şekillerde etkisi olabilir:
- Kod Yapısı: Temanın kod kalitesi ve yapısı, web sitenizin hızını doğrudan etkiler. İyi bir tema, optimize edilmiş ve temiz kod kullanırken, kötü bir tema gereksiz kod karmaşıklığına ve yavaş yüklemelere neden olabilir.
- JavaScript ve CSS’ler: Tema, kullanılan JavaScript ve CSS dosyalarının sayfa yüklemesi üzerinde etkisi olan bir rol oynar. Tema, çok sayıda veya büyük dosyaları çağırıyorsa, sayfa yüklemesi yavaşlayabilir. İyi bir tema, bu dosyaları minify eder veya asenkron olarak yüklemenizi sağlar.
- HTML Layout: Tema, sayfanın yapısını ve düzenini belirler. Karmaşık veya çoklu katmanlı bir düzen, sayfanın daha yavaş yüklenmesine neden olabilir.
- Cache Desteği: İyi bir tema, önbellekleme (caching) ve hız optimizasyonu için entegrasyon sağlayabilir. Bu, sayfa yüklemelerini hızlandırabilir.
- Responsive Tasarım: Mobil cihazlar için duyarlı (responsive) bir tema seçmek, mobil cihazlarda hızlı yükleme sağlar. Mobil kullanıcılar için iyi bir deneyim sunmak önemlidir.
- Eklenti Uyumluluğu: Temalar genellikle belirli eklentilere veya özelliklere odaklanır. Temanızın, kullanmak istediğiniz eklentilerle uyumlu olması önemlidir. Uyumsuzluk, sayfa yüklemelerini yavaşlatabilir.
En çok tercih edilen WordPress temaları;
WordPress için en çok tercih edilen temalar zaman içinde değişebilir ve kişisel ihtiyaçlara, projelere ve trendlere bağlı olarak farklılık gösterebilir.
Ücretsiz WordPress Temaları
- Astra: Astra, hızlı ve esnek bir tema olarak bilinir ve birçok farklı sektöre uyarlanabilir.
- GeneratePress: GeneratePress, hızlı ve hafif bir tema olup kullanıcıların tasarımı özelleştirmelerine olanak tanır.
- Neve: Neve, hızlı ve SEO dostu bir tema olarak öne çıkar ve WooCommerce uyumluluğu ile e-ticaret siteleri için de uygundur.
- OceanWP: OceanWP, esnek ve özelleştirilebilir bir tema olarak bilinir ve çeşitli eklentilere uyum sağlar.
- Hestia: Hestia, işletme web siteleri için popüler bir tema olup modern ve şık bir tasarıma sahiptir.
Premium WordPress Temaları
- Divi: Divi, özelleştirme seçenekleri ve sürükle ve bırak düzenleme araçları ile tanınır. Çeşitli sektörlere uyarlanabilir.
- Avada: Avada, çok amaçlı bir tema olarak öne çıkar ve yüzlerce özelleştirme seçeneği sunar.
- BeTheme: BeTheme, 600+ önceden tasarlanmış demo ve muffin builder ile kullanımı kolay bir tema olarak bilinir.
- Enfold: Enfold, görsel düzenleme araçları ile tasarımı kolaylaştırır ve işletme siteleri için uygundur.
- X Theme: X Theme, farklı tasarım stilleri sunar ve özelleştirme yetenekleri ile çok yönlü bir tema sunar.
Her bir tema, farklı gereksinimlere ve projelere uygun olabilir, bu nedenle tercihlerinizi ve ihtiyaçlarınızı göz önünde bulundurarak en iyi temayı seçmek önemlidir. Tema seçimi, web sitenizin görünümü, performansı ve işlevselliği üzerinde büyük bir etkiye sahip olacaktır, bu nedenle dikkatli bir şekilde değerlendirmeniz önemlidir. Ayrıca, tema seçerken güncellemelerin ve destek hizmetinin mevcut olup olmadığını da kontrol etmek önemlidir.
Resim (Image) Optimizasyonu
Web sayfalarını oluşturan önemli bileşenlerin başında hiç şüphesiz image’ler gelir. Page size’ın ve zaman zaman da request’in azımsanmayacak bölümünü işgal eden image’leri optimize etmek, page speed’i geliştirmemize yardımcı olan değerli bir aksiyondur.
Image optimizasyonu denildiğinde ilk akla gelen elbette ilgili dosyaların boyutlarının optimize edilmesidir. Jpeg ve png formatlarına kıyasla görsel kalitesinin korunduğu durumlarda boyutta önemli ölçüde tasarruf sağlayan webp ya da avif formatları kullanılarak web sayfalarının en önemli bileşenleri olan image’lerin size’ları optimize edilebilir.
Diğer taraftan görsellerin width ve height değerlerinin doğru belirlenmesi de görsel optimizasyon çalışmaları kapsamında değerlendirilmelidir. Bu kapsamda banner vb. Gibi görsel asset’lerin konumlandırılacağı div’lerin position’larının belirlenmesi, sayfadaki olası kaymaların (CLS – Cumulative Layout Shift) önüne geçecektir.
Son olarak; sayfa içerisindeki image’lerin arama motoru optimizasyonu çalışmaları çerçevesinde yalnızca page speed için değil arama motoru botlarının anlamlandırma düzeyini geliştirmek adına da optimize edilmesi gerekir.
Örneğin; structured data kullanımında ilgili field’lara image source’ların eklenmesi ya da OpenGraph yapılandırılmasında image property kullanılması vb. Aksiyonlar görsel optimizasyon kapsamında değerlendirilebilir. Page speed ve image arasındaki ilişkinin dışına çıkmamak adına burada bir önceki cümlede örneklendirdiğimiz aksiyonları detaylandırmayacağız.
CSS ve JS Optimizasyonu
Web sayfalarına dinamik bir yapı kazandıran CSS ve JS’ler içerisinde işlevsiz hale gelenlerin kaynak kodun akışından çıkartılması, dom’un render sürecinin minimum kesintiye uğramasını ve request’in optimize edilmesini sağlar.
CSS’ler ve JS’ler kapsamında alınabilecek bir diğer aksiyon da büyük dosya boyutlarına sahip kaynakları parçalamak (code splitting) ve ilgili sayfaların ihtiyaç duyacağı şekilde konumlandırmaktır. Böylelikle herhangi bir web sayfasının ihtiyaç duymayacağı büyük bir JS dosyasını render etmesini engelleyebilir ve page speed’de gelişim hedefleyebiliriz.
Yine CSS ve JS dosyalarını minify etmek boyutların küçültülmesine yardımcı olan bir diğer aksiyondur.
- Gereksiz boşlukların silinmesi,
- class ve/veya id isimlerinin kısaltılması,
- yorum satırlarının minimize edilmesi vb. iyileştirmeler bu çerçevede değerlendirilebilir.
Javascript özelinde alınabilecek önemli aksiyonlardan biri de “defer” tanımlamasıdır. Script tag’leri içerisine eklenecek defer tanımlaması ile, web sayfasının oluşturulması esnasında kaynak kodda yer alan JS’in es geçilmesi ve tüm sayfa oluşturulduktan sonra render edilmesi sağlanır.
Örnek: script src=”ornek.js” defer></script
Browser’dan gelen request sonrasında HTML pars edilirken bot JS dosya formatına rastladığında HTML’in render sürecini durdurur ve bu dosyalara geçiş yapar. Defer ile bu geçiş engellenir ve DOM oluşturma sürecinin devam eder.
Tabi defer kullanımında dikkatli olmak gerekir çünkü kullanıcının web sayfasının yüklenmesi esnasında ilk anda etkileşime girmesini sağlamasını sağlayan JS’lerin defer edilmemesi gerekir.
Javascript’lerin page speed’e negatif etkimesini engellemek adına async attribute kullanmak da değerli bir seçenektir. Asenkron yükleme, tarayıcı sayfayı yüklemeye devam ederken JS’ler için bu süreci durdurmasını engeller ve JS’lerin arka planda yüklenmesini sağlar. Dolayısıyla critical rendering path kesintiye uğramamış olur.
Örnek: script src=”demo_async.js” async></script
JS ve CSS’lerle ilgili son olarak preload ve dns-prefetch kullanımından bahsetmek gerekir. Her iki tekniğin de amacı elbette browser’ın sayfayı oluşturma sürecini hızlandırmak ve iyileştirmektir.
link rel=”preload” ile tarayıcıya html’in render edilmesi sürecinde öncelikle yüklenmesi gereken kaynaklar belirtilebilir. Böylelikle sayfa yapısını oluşturan öncül bileşenlerin sayfanın tamamından daha önce yüklenmesi sağlanır.
- link rel=”preload” href=”styles.css” as=”style”>
- link rel=”preload” href=”script.js” as=”script”>
link rel=”dns-prefetch” ise tarayıcının belirli DNS sunucularını önceden çözümlemesini (prefetch) sağlar. Bu, tarayıcının belirli kaynakları almak için hangi DNS sunucusunu kullanması gerektiğini önceden bilmesine yardımcı olabilir. Özellikle farklı kaynakları farklı alt alanlarda barındıran siteler için faydalıdır.
Örneğin; link rel=”dns-prefetch” href=”https://cdn.example.com”>
Buradaki kod parçası ile tarayıcı, cdn.example.com adresini önceden çözümleyerek buradaki kaynakları almaya başlar.
CSS’in optimize edilmesinde kullanılabilecek tekniklerden biri critical CSS’dir. En yalın haliyle critical css; html’in render sürecini aksatmamak ve kullanıcıya içeriği mümkün olduğunda hızlı bir şekilde sunabilmek adına ihtiyaç duyulan CSS’in inline bir şekildeiçerisine dahil edilmesi olarak tanımlanabilir.
Critical CSS ile ilgili unutulmaması gereken iki nokta vardır:
- Inline CSS’in miktarı büyüdükçe DOM’un upload olması gecikir.
- Inline CSS cache’e alınmaz. Özellikle FCP’nin zayıf olduğu durumlarda tercih edilebilir bir teknik olan critical css, aynı anda yüksek boyuta sahip CSS’lerin yüklenmesi ve dolayısıyla DOM’un gecikmesini engeller.
Daha fazla detay için; https://web.dev/extract-critical-css/
Request (İstek) Sayısı Optimizasyonu
Bir web sayfasının oluşturulma sürecinde çağrılması ve yüklenmesi gereken kaynak sayısı ne kadar fazlaysa bu web sayfasının upload süresinin uzaması da o kadar muhtemeldir. Dolayısıyla WordPress’te site hızını optimize ederken temas etmemiz gereken noktalardan biri de request sayısının optimize edilmesidir.
Request sayısını optimize ederken;
- CSS Sprites ile küçük resimleri birleştirerek birden fazla resim için request gelmesini engelleyebilir, tek bir request ile amacımıza ulaşabiliriz.
- Sayfanın yüklenmesi esnasında ihtiyacımız olmayan asset’leri lazy loading ile vererek ilk anda yüklemeyerek request sayısını düşürebiliriz.
- CSS ve JS’leri birleştirmeyi düşünebiliriz fakat burada bir önceki paragraflarda detaylı bir şekilde açıkladığımız CRP (critical rendering path) sürecinde JS ve CSS’lerin render-blocking kaynaklar olduğunu dikkate alarak hareket etmemiz gerekir.
Sunucu Optimizasyonu (İlk Yanıt Süresini Düşürmek)
Tarayıcı aracılığıyla bir web sayfasına erişmek isteyen kullanıcı, bu web sayfasının barındığı sunucuya erişim isteği gönderir. Bu erişim isteğinin gönderilmesi ile sunucudan isteğe gelen cevabın tarayıcıya ulaşması arasında geçen süre (sunucudan tarayıcıya gelen ilk byte) ise Time to First Byte olarak tanımlanır.Sunucudan response gelmeden tarayıcı web sayfasını render etmeye başlayamadığından dolayı ilk yanıt süresinin minimize edilmesi çok önemlidir.
Sunucu bant genişliğinin trafik talebini karşılayacak düzeye getirilmesi, veritabanındaki gereksiz tabloların kaldırılması, her bir oturum için tekrar tekrar upload’u engellemek adına HTML’in önbelleklenmesi ve sunucu işlemcisinin maksimize edilmesi ile sunucudan gelen request’in yanıt süresi optimize edilebilir.
Sunucu Yanıt Süresi Nasıl Ölçülür?
Sunucu yanıt süresini ölçebilen birçok teknik ve/veya araç vardır ve bu araçların bir kısmı yetkinlikleri itibariyle yaygın olarak kullanılır. Web sayfalarına gelen request’lere sunucunuzun verdiği yanıt süresi ve bu sürenin ortalama değerini takip etmek adına PageSpeed Insights, GTMetrix ve Search Console temelde yeterli olacaktır. Tabi TTFB Checker gibi eklentiler yahut webpagetest.org gibi platformlar da tercih edilebilir. Paragrafın başında belirtildiği gibi bu kapsamda tercih edilebilecek birçok araç vardır.
Search Console Crawl Stats
Sunucu yanıt süresinde ortalama değeri takip edebileceğiniz first party verilerle takip edebileceğiniz alan Search Console’da crawl stats çıktılarıdır. Search Console, Average Response Time metriğini şu şekilde tanımlar;
“Tarama isteğinin sayfa içeriğini alması için geçen ortalama sayfa yanıt süresi. Sayfa kaynaklarını (komut dosyaları, resimler ve diğer bağlı veya yerleştirilmiş içerik) ya da sayfa oluşturma süresini içermez.”
Kaynak: https://web.dev/ttfb/
Google’a göre; 800 ms’den düşük bir Time To First Byte değeri idealdir. TTFB’nin 1800 ms’den yüksek olması halinde ise “poor” olarak nitelendirilir.
Özellikle SPA (Single Page Application) yapılar için TTFB çok daha önemlidir çünkü içerik JS ile oluşturulur ve bu durum, sunucu tarafında oluşturulan (Server Side Rendering) web sayfalarına kıyasla TTFB metriğini SPA’lar için çok daha önemli hale getirir.
PageSpeed Insights
PageSpeed Insights çıktılarına bakarak sunucu yanıt süresinde geliştirilmesi gereken bir nokta varsa tespit etmeniz mümkündür. Yine Lighthouse çalıştırarak da doğrudan anlık veri üzerinden TTFB’ı ölçümleyebilirsiniz.
Tool URL: https://pagespeed.web.dev/
GTMetrix
GTMetrix de PageSpeed Insights ile benzer şekilde Time to First Byte kırılımını döndürür.
Birçok farklı tool ve extension da kullanılabilir.
Tool URL: https://gtmetrix.com
İlk Yanıt Süresini Düşürmek Adına Alınabilecek Aksiyonlar
HTTP/3.0’a Geçiş
Tarayıcı ve sunucu arasındaki iletişimi hızlandıran bir protokol olan http 3.0, request’lere gelen yanıtın kısalmasını dolayısıyla TTFB (Time to First Byte) ve FCP (First Contentful Paint) segmentlerinin belirgin bir şekilde iyileşmesini sağlar.
CDN Kullanmak
Özellikle birçok farklı lokasyondan trafik çekmeyi hedefleyen web siteleri için üzerinde durulması gereken sistemlerin başında gelen CDN (Content Delivery Network – İçerik Dağıtım Ağı), web sayfasına erişmek isteyen kullanıcıdan gelen request’e, o kullanıcının konumuna en yakın sunucudan yanıt verilmesini sağlar ve böylelikle temelde ilk yanıt süresini kısaltarak kullanıcının aradığı içeriğe, ürüne ya da hizmete mümkün olan en hızlı şekilde ulaşması amacını destekler.
Sunucudan request’e yanıt gelmeden web sayfası yüklenmeye başlamadığından dolayı bu sürenin minimize edilmesine yardımcı olan CDN, site hızını geliştiren önemli tekniklerin başında gelir.
CDN’nın bir diğer avantajı ise sunucudaki trafik yükünün dengelenmesidir. Farklı coğrafi konumlardan gelen trafiğin ara sunucularla karşılanması, buradaki yükün dağılmasına yardımcı olur. Diğer taraftan CDN, DDoS saldırılarına karşı koruma sağlayarak web sitenizin down olmasını engellerken içerik güvenliğini artırabilir.
Veritabanı Optimizasyonu
Uygulamadaki ihtiyaçlara bağlı olarak organizasyonu değişkenlik gösterse de en yalın haliyle veritabanı, içerisinde web sitelerinin ihtiyaç duyduğu değişkenlerin değerlerini saklayan, depolayan ve güncelleyen satır ve sütunların oluşturduğu tablolar olarak tanımlanabilir.
Web sitesi önyüzünde yer alan verilerin veritabanında bir karşılığı vardır ve kullanıcı bu verileri görüntülemek yani web sayfasına erişmek istediğinde, ilgili alanlara karşılık gelen değerleri alabilmek adına veritabanına istek gider.
Veritabanının optimize bir yapıda olması, bu isteklerin yanıtlanma süresinin kısalmasına yani sayfanın yüklenme hızının optimize edilmesine yardımcı olur.
Veritabanını optimize etmenin en basit adımlarından biri kullanılmayan yani artık işe yaramayan veri gruplarının silinmesidir. Örneğin; bir dönem ihtiyacınız olan fakat artık işinize yaramayan ve kullanmadığınız eklentileri veritabanından tümüyle silmek yerinde bir optimizasyon çalışması olacaktır.
WordPress için bu noktada farklı geliştiriciler tarafından hazırlanan eklentilerden yararlanabileceğiniz gibi birkaç saatlik araştırma sonucunda doğrudan wp-config.php dosyası üzerinde uygulayacağınız komutlarla veritabanını kendiniz de temizleyebilirsiniz. Tabi unutulmaması gereken nokta; bu işlemler yapılmadan önce veritabanının mutlaka yedeğinin alınması gerektiğidir.
- Yavaş sorguları tanımlamak ve düzeltmek,
- İyi bir veri modeli ile gereksiz tekrarları ve karmaşıklığı azaltmak,
- Sütun ve tablolara uygun indeksler eklemek,
- Rutin veritabanı bakımlarını ihmal etmemek,
- Büyük veri tabanları için veriyi sıkıştırmak ve/veya veriyi mantıklı parçalara bölmek
- Veritabanı sorgularının sonuçlarını önbelleklemek
Veritabanı optimizasyonu kapsamında alabileceğimiz diğer aksiyonlardır. Tabi buradaki ileri seviye optimizasyon çalışmalarının veritabanı uzmanı tarafından yapılması daha doğru olacaktır.
Önbellekleme (Cache)
Önbellekleme (Cache); kullanıcının, daha önce ziyaret ettiği bir web sayfasını tekrar ziyaret ederken (elbette önbelleklemenin belirli bir süresi vardır) bu web sayfasının tüm dosyaları yeniden yüklememesi ve böylelikle kullanıcıya web sayfasını çok daha hızlı bir şekilde sunmasını sağlayan sistemdir.
Kullanıcı bir web sayfasını ilk kez ziyaret ettikten sonra eğer bu web sayfası önbellekleme sistemi kullanıyorsa, kullanıcının ziyareti esnasında önbelleğe alınmaya uygun olan kaynaklar geçici bir depolama alanına kaydedilir. Tabi bu geçici kaydın ne kadar tutulacağının belirlenmesi gerekir. Kullanıcı kayıtların tutulmaya devam ettiği zaman aralığında web sayfasını tekrar ziyaret ederse, tarayıcı tüm kaynakları tekrar sunucudan indirmek yerine önbellekten doğrudan alır ve kullanıcı çok daha hızlı bir şekilde web sayfasına erişebilir.
Wordress altyapısındaki web sitelerinde önbellekleme entegrasyonu için birçok farklı seçenek vardır.
WordPress’in en işlevsel önbellekleme eklentileri olarak dikkat çeker. En iyi WordPress cache eklentilerini hemen inceleyebilirsiniz.
