Site Hızlandırma Yöntemleri

Söz konusu SEO ve kullanıcı deneyimi olunca en kritik konulardan bir tanesi de sayfa hızınızdır. 

Bir saniyelik bir gecikmenin bile kullanıcı deneyimi üzerindeki olumsuz etkilerini düşündüğümüz zaman web sitelerinin hız optimizasyonuna ayrı bir sayfa açması gerektiği sonucu ortaya çıkmaktadır.

Peki SEO nedir?: SEO, Arama motoru optimizasyonu anlamına gelir. Search engine optimization kelimesinin bir kısaltmasıdır. Daha fazla bilgi için tavsiye edeceğimiz, bilinir en iyi SEO kaynağına göz atabilirsiniz.

Bu yazımızda sayfa hızı analiz araçlarından Google Pagespeed Insights hata ve çözümlerini ele aldık. Bu içerik uyarı veren hataların neler olduğu ve nasıl çözülmesi gerektiği konusunda sizlere rehber olacaktır. 

Şimdi sırasıyla Pagespeed hatalarının neler olduğu ve nasıl çözülmesi gerektiğine değinelim.

 

1-Kullanılmayan Javascript’i ve CSS’i Kaldırın.

Sorun: Web sitelerinin hızlı açılmasının önemine giriş kısmında özetle değinmiştik. Hiçbir web site ziyaretçisi kullanıcı olduğu bir web sitesinin yavaş açılmasından hoşlanmaz. 

Web sitelerinin yavaş açılmasının nedenlerinden bir tanesi de gereksiz Javascript ve CSS dosyalarıdır. 

Web siteleri tasarlarınken kullanılan temel dil HTML dilidir. Aslında HTML bir programlama dili değiş, işaretleme dilidir. 

HTML ile oluşturulan web site iskeleti temel olarak web sitelerinin içerik yapısı, sayfa ve bölümlerini oluşturur. CSS ise web sitelerini daha opsiyonel hale getirmek için HTML dosyalarının biçimlendirilmesidir diyebilir. Yani omurgaya kasları bağlamak, deriyi geçirmek gibi. 

Javascript ise bu oluşan yapıyı harekete geçirecek olan programlama dilidir. 

Web site tasarımcıları ne kadar gereksiz ve uzun uzadıya Javascript kodu ve CSS kullanırsa web sitesinin yükü o kadar artar ve sayfa hızı düşer. Bu durumda da kullanıcı memnuniyeti istenilen düzeyde olmaz. 

Çözüm: İster özel yazılım kullanın ister wordpress gibi oluşturucular kullanın, bu uyarıyı alıyorsanız yapmanız gerekenler aslında çok da karmaşık değildir. Öncelikle kullanılmayan Javascript ve CSS’leri tespit etmelisiniz. Daha sonra da bunları kaynak dosyalarından silerek gereksiz yükü ortadan kaldırırsınız. 

Kullanılmayan bu dosyaları tespit etmek için kullanabileceğiniz araçlar ise;

• Unused-CSS
• PurgeCSS
• PurifyCSS
• ChromeDevTools

2-Resimleri Yeni Nesil Biçimde Yayınlayın

Sorun: Google Pagespeed test aracı ile resimleri yeni nesil biçimde yayınlayın uyarısı verebilmektedir. Pagespeed aracının önerdiği formatlar ise webp, JPEG XR ve JPEG 2000 resim biçimleridir. 

Google’ın bu konudaki açıklaması şu şekildedir; “JPEG 2000, Webp ve JPEGXR tipi dosya biçimleri genellikle daha iyi sıkıştırma sağlar” Böylece download işlemleri hızlı tamamlanır ve veri tüketimi düşer”

Google’ın bu açıklamasına bakıldığı zaman PNG ve JPEG formatındaki resimler sayfa hızına olumsuz etki ediyor? Peki gerçekten öyle mi?

Google’ın önerdiği formatlara bakıldığı zaman JPEG 2000 ve wep henüz evrensel olarak kullanılmamaktadır. Ayrıca bu formatlarda tarayıcı desteği PNG ve JPEG uzantılarına göre çok düşüktür. Bu durumda sorunun üstesinden nasıl gelmeliyiz?

Çözüm: Öncelikle belirtmek isteriz ki formatlardan ziyade görsellerin optimizasyonuna ağırlık verirseniz sayfa hızınız artacak ve bu uyarıyı almayacaksınız. Yani içinde bulunduğumuz şu aşamada önerim JPEG ve PNG kullanmaya devam edebilirsiniz. Ancak bu formatları kullaıyorsanız mutlaka görsel optimizasyonu yapmalısınız. 

WordPress kullanıyorsanız bunun için ücretsiz birçok eklenti mevcuttur. Özel yazılımda ise böyle bir özellik yoksa yazılımcı ya da yazılım firması ile görüşerek bunun üstesinden gelebilirsiniz. 

3-Ekran Dışı Resimleri Ertele

Sorun: Web sitesi açılırken sunucu tarafında tüm görseller yüklenmeye çalışıldığı için sayfa hızını düşürür. Örnek verecek olursak kullanıcı sizin bir içeriğinize tıkladığı zaman ilk olarak sayfanın başlangıç kısmı karşına çıkar, sayfanın devamındaki görseller karşısına çıkmaz. Ancak sayfanın alt kısmında bulunan ve ilk etapta kullanıcının görmediği resimlerin yüklenmesi sayfa hızını oldukça düşürebilir. 

Çözüm: Ekran dışından bulunan bu resimlerin kullanıcı sayfayı aşağıya kaydırdıkça yüklenmesi sayfa hızınıza olumlu katkı sağlar. Bunun için ise tembel yükleme dediğimiz Lazy Load özelliğinden faydalanmalısınız. 

Lazy Load Nedir? Ekranda henüz yer almayan görsellerin yüklenmesinin ertelenmesini sağlayarak internet sitelerinin daha hızlı açılmasını sağlayan özel bir tekniktir.

Lazy Load ile ekran dışındaki resimlerin ertelenmesi sorunu ve sayfa hızının düşük olması gibi sorunları ortadan kaldırmanız mümkündür. 

Lazy load özelliğini kullanmanız halinde, sitenizde sayfalarınıza gönül rahatlığı ile istediğiniz kadar görsel ekleyebilirsiniz.

4-Sunucu Yanıt Sürelerini Azaltın

Sorun: Web sunucusunun tarayıcı isteklerine yavaş yanıt vermesi site hızını oldukça düşürebilir. 

Sunucu Yanıt Süresi Nedir? (TTFB): Bir internet tarayıcısının sunucuya gönderdiği istek ile sunucunun gönderilen isteği yanıtlaması arasında geçen süreyi belirtir. Kısaltması olan TTFB, “Time to First Byte” kelimelerinin baş harflerinden oluşmaktadır.

Sunucu yanıt süresi sitenin mevcut trafiğine, kaynak kullanımına, kod yapısına, kullandığı sunucuya bağlı olarak değişebilir.  Araştırmalar 3 saniyeyi geçen sunucu yanıt sürelerinin sayfa terk etme oranını %40’a kadar çıkardığını ortaya koymuştur. 

Eğer siz de pagespeed aracında bu uyarıyı alıyorsanız aşağıdaki maddeleri gözden geçirmelisiniz. 

Çözüm:

• Web Sitenizin Sunucusu: Sunucunuz SEO uyumlu ve hızlı olmalıdır. 
• Web Site Trafiği: Web site trafiğiniz sunucunun kaldıramayacağı bir oranda ise siteniz yavaşlar. Bu durumda sunucunuzu değiştirmeniz gerekir. 
• Css / Js / Images Kaynakları: Sitenizde yer alan Css, Js ve Görsel dosyalarını sıkıştırma işlemi ile minimum boyuta getirmeniz gerekmektedir. 
• Güncellemeler: cPanel, Apache, Mysql vb. tabanlarını güncellemeyi ve veritabanınızı gereksiz dosyalardan temizlemeyi unutmayın.  Eğer siteniz WordPress alt yapısı kullanıyorsa mevcut güncellemeleri gerçekleştirmenizde ve kullanmadığınız eklentileri kaldırmanızda fayda vardır.  
• Önbellek: Web site trafik yoğunluğuna göre sitenizi önbelleğiniz belirli aralıklarla temizlemenizde de fayda vardır. 
• CDN: Content Delivery Network yani içerik dağıtım ağı demektir. Sitenize gelen ziyaretçilerin içeriklere daha hızlı ve yakın bölgeden ulaşması için kullanılan bir teknolojidir. 
• Dış Sorgu Miktarını Azaltın (SQL): Dış sorgular sitenin olduğu sunucunun başka bir siteden veya başka bir sunucudan bilgi almak için yaptığı ek sorgulamalara denir. Bu sorguların sayısının artması sunucu yanıt süresini de artırır.  Sorunun çözümü için ise sitedeki harici sorgu sayısını arttıran unsurları azaltın (RSS beslemeleri, sosyal medya gönderileri, gömülü içerikler vb) ve önbellek kullanın. 
• Kullanılan Eklenti Sayısını Azaltın: WordPress tabanlı web sitelerinde mümkün olduğu kadar gereksiz eklenti kurmayın. Eğer kullanmadığınız ya da işinize yarayan eklentiler var ise bunları kaldırmalısınız. Bu sayede sunucu kaynağını daha az tüketmiş olursunuz. 
• Veritabanı Optimizasyonu Yapın: Veritabanınızı belirli periyotlarla temizlemeniz sunucu yükünü de azaltır. 

5-Web Yazı Tipi Yüklemesi Sırasında Metnin Görünür Halde Kalmasını Sağlayın.

Sorun: PageSpeed Insights hız testi aracında test ederken alınan hatalardan biri de budur. Alt açıklamasında ise “Web yazı tipleri yüklenirken kullanıcının metni görebilmesini sağlamak için yazı tipi görüntüleme CSS özelliğinden yararlanın.” Uyarısı çıkmaktadır. 

Peki metnin görünür halde kalmasını sağlamak nedir? 

Tarayıcılar varsayılan olarak yazı tiplerinin yüklenmesini bekler ve yükleme sonrasında metin görünür hale gelir. Sayfada font yüklenene kadar beyaz ve boş bir alan vardır. 

Metnin geç yüklenmesi öncelikle CPU harcanmasına ve işlem gecikmesine neden olur. Bu da sitenin yüklenme hızını düşürür. Kullanıcı açısından da boş bir sayfa olumsuz etkiler doğurur.  

Çözüm:

Bu sorunun çözümü için ilk olarak font.css dosyanızda ilgili bölümüne font-display: swap ekleyin.

Örneğin fontawesome kullanmak istiyorsanız;

<link rel=”preload” as=”font” crossorigin href=”//www.siteadi.com/fonts/fontawesome-webfont.woff?v=4.6.3″ onload=”this.onload=null;this.rel=’font/woff2′”>

<link rel=”preload” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css” as=”style” onload=”this.onload=null;this.rel=’stylesheet'”>

<noscript>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css”>
</noscript>

şeklinde etiketlerinizin arasına ekleme yapın.

6-Üçüncü Taraf Kodun Etkisini Azaltın

Sorun: Üçüncü taraf kod, internet sitelerinin kök dizininde bulunan fakat dosyaları sitelerin kendi sunucularında bulunmayan kodlara verilen isimdir. (Google Analytics, Search Console vb) 

Burada kullanıcılar bir tarafı, sunucu bir tarafı, bunların dışında kalanlar ise üçüncü tarafı oluşturur. 

Örneğin internet sitesinin stil dosyaları üçüncü taraf kod değilken, site ile doğrudan bağlantılı olmayan sosyal medya paylaşım butonları üçüncü taraf kod örneğidir

Üçüncü taraf kodlar kullanım amaçlarına ve kod yapılarına göre değişir. Bu kodlar optimize olmayan satırlar içerdikleri zaman site hızında ciddi düşüşe sebep olabilir. 

Çözüm: Burada en önemli tavsiyemiz bir etiket yöneticisi kullanmanız olacaktır. Google Tag Manager ile web sitenize sadece bir adet kod ekleyerek istediğiniz tüm etiketleri (Analytics, Facebook Piksel, Search Console vb) yönetebilirsiniz. 

Bunun haricinde kullanmadığınız üçüncü taraf kodları kaldırabilirsiniz. Zaten Google Tag Manager kullanmaya başlamadan önce üçüncü taraf kodlarının tamamını sitenizden kaldırmalısınız. 

7-Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor.

Bu sorun mobil kullanıcıların sayfa kaydıra kolaylık ölçüsünü belirten bir metriktir. Kullanıcılar kaydırma performansı olan yüksek sayfalarda en alt kısma daha az zahmetle ulaşabilirler. 

Mobil cihazlarda bir sayfayı kaydırdığınızda normalde sayfanın parmağınız ile senkronize şekilde hareket etmesi gerekir. Fakat bazı mobil sayfalarda sayfa parmak ile beraber hareket etmez ve gecikme olur.

Çözüm: Mobil cihazlarda internet tarayıcıları kaydırma işlemini gerçekleştirmek için “dinleyicileri” kullanır. Olay dinleyicileri kullanılmadığı zaman işlem gecikmektedir. 

Pasif olay dinleyicileri, addEventListener ayarlarından ({passive: true}) olarak değiştirdiğiniz zaman bu sorun da ortadan kalkar.  

8-Statik Ögeleri Verimli Bir Önbellek Politikasıyla Yayınlayın

Sorun: Web sitenizde bulunan statik ögelerin siteyi ziyaret eden kullanıcılara tekrar tekrar yeniden yüklemek hız sorununu da beraberinde getirir. 

Çözüm: Sitenizde bulunan statik ögelerin (görsel, css vb) kullanıcıların bilgisayarlarında belirli bir süre saklanmasını sağlayarak tekraren yüklenme işleminin önüne geçmiş olursunuz. Yani tarayıcı ön bellekleme ile siteniz normalden daha hızlı çalışır. 

Ön bellekleme işlemini kodlar vasıtasıyla yapabileceğiniz gibi wordpress tabanlı sitelerde eklentiler aracılığı ile çok pratik bir şekilde de gerçekleştirebilirsiniz. 

9-Çok Büyük Ağ Yüklerinden Kaçının

Sorun: Genellikle uzun içerikler, yorum sayısı fazla olan sayfalar ve fazla görsel kullanmış sayfalarda bu hata ile karşılaşmak mümkündür. 

Çözüm: Google Pagespeed İnsights hata detaylarında hangi sorunu çözmeniz gerekiyorsa ona odaklanmalısınız. Yani görselleri optimize etmeniz gerekiyorsa gidip uzun içeriği sayfalara ayırmakla vakit kaybetmeyin. Bu sorunun ortadan kalkması için yapabileceğiniz belli başlı işlemler şunlardır;

• Görselleri optimize edin,
• Uzun içerikleri sayfalara ayırın,
• Lazy Load kullanın,
• Yorumların daha sonradan yüklenmesini sağlayın. 

10-Ana iş Parçacığı Çalışmasını En Aza İndir.

Sorun: Ana iş parçacığı sitedeki kodları kullanıcının etkileşime girebileceği bir internet sayfasına çeviren bir çeşit işlemcidir. Bu işlemci HTML’yi optimize ederek DOM’u oluşturur, CSS’i ayrıştırarak belirtilen stilleri uygular ve JavaScript’i ayrıştırıp yürütür ve kullanıcı etkinliklerini işler.

Kullanıcı bir işlemde bulunduğunda ana iş parçacığı işlemcisi herhangi bir işlem sırasında ise web sayfanız kullanıcılardan gelen yanıt taleplerine hemen karşılık vermeyebilir. Bu da karşımıza ana iş parçacığını en aza indir sorununu çıkarır. 

Ana iş parçacığı sorunun sebepleri;

• Web Site Tasarımı: Sitenizin penceresi olan CSS dosyalarının yeterince optimize olmaması
• Javascript Sorunu: Sitenizin dinamik yapısını oluşturan Javascript dosyalarının çıkardığı sorunlar
• Diğer Sorunlar 

Çözüm: 

• Kullanılmayan JavaScript vs CSS dosyalarını kaldırın
• Sitede bulunan satır içi ya da stil CSS dosyalarını küçültün ve birleştirin.

11-Javascript Yürütme Süresini Azaltın

Sorun: Javascript optimize edilmediği zaman web sitelerine büyük bir yük bindirebilir. Bu yük sitenin hantallaşmasına ve yavaş yüklenmesine neden olur. 

Çözüm: Bu hatayı düzeltebilmek için aşağıdaki düzenlemeleri gerçekleştirebilirsini;

• JavaScript kodunuzu küçültün ve sıkıştırın.
• Kullanılmayan JavaScript kodlarını temizleyin.
• JavaScript kodunuzu önbelleğe alın.
• Aşırı büyük bir DOM boyutundan kaçının

12-Kritik İsteklerin Sayısını En Aza İndirin

Sorun: Sunucu ya da kullanıcı tarafında oluşan isteklerin derinliği ne kadar az ise sayfa hızı o kadar yüksek olur. Örneğin dahili link stratejisinde bir bağlantı başka bir bağlantıyı açıyorsa buna bağlantı zinciri denir ve SEO’yu olumsuz etkiler. Aynı mantık kritik isteklerde de geçerlidir. 

İstek derinliği ne kadar az ise bu hatayı alma ihtimaliniz de o kadar azdır.

Çözüm: Bu hatayı düzeltebilmek için Page Speed tarafından size gösterilen zincir kullanımını minimum seviyeye çekmelisiniz. Zincir kullanımı sitenize dışarıdan çağrılan dosyaları listeler (js, css gibi). Kullanılmayan CSS ve Javascripti kaldırarak da bu sorunla karşılaşma oranınızı düşürebilirsiniz. 

13-Oluşturmayı engelleyen kaynakları ortadan kaldırın

Sorun: Web sayfası yüklenmesi esnasında özellikle Javascript ve CSS kodları görüntü oluşturmasını yavaşlatır. Bu da sayfanın kullanıcı açısından geç yüklenmesi anlamına gelir. 

Çözüm: Sayfanızın üst yani header kısmında bulunan JavaScript kodlarını alt kısma (footer) alarak bu sorunu düzeltebilirsiniz. Ancak Css dosyalarını alt kısma almak sitenin ilk yüklenmesinde anlık bir bozuk görünüme neden olabilir. Bunun önüne geçmek için ise satır içi CSS kullanımını tercih edebilirsiniz.