Web Sitesi Açılış Hızını Arttırma

Web Sitesi Açılış Hızını Arttırma

Web Sitesi Açılış Hızını Arttırma

Bir web sitesinin SEO'sunda en önemli faktörlerden biri site açılış hızıdır. Arama motorları arama sonuçlarını listelerken sitelerin açılış hızlarına da dikkat etmekte ve buna göre sıralama yapmaktadır.
Site açılış hızı hem SEO yani arama motorları için önemliyken aynı zamanda ziyaretçi içinde önemlidir. Siteniz ne kadar geç açılırsa ziyaretçi aradığı bilgiye o kadar geç ulaşır ve bu da ziyaretçi tarafında siteniz için olumsuz düşünceler beslemesine sebep olabilir.
SEO açısından web sitenizin ilk açılış hızı 2 saniye altında olmalıdır. Genel olarak 7 saniyeye kadar açılan web sitelerine hızlı web sitesi derler fakat ziyaretçi tarafından bakacak olursak 7 saniye baya uzun bir süre demektir.
Açılış hızınızı 2 saniye altına düşürdüğünüzde zamanla arama sonuçlarında üst sıralara doğru tırmandığınızı fark edeceksinizdir.

Şimdi öncelikle açılış hızınızı nasıl düşürmek için izleyeceğiniz yolları şöyle bir listeleyelim. Sonrasında teker teker detaylı açıklamalar yaparım.

  1. Hızlı ve Güvenli Bi Hosting Kullanın
  2. CDN Kullanın
  3. Resim Optimizasyonu Yapın
  4. Javascript ve CSS Dosyalarını Sıkıştırın
  5. GZIP Sıkıştırmayı Etkinleştirin
  6. Sunucu Çerezlerini Aktif Edin

Hızlı ve Güvenli Hosting Kullanımı
Sitenizin hızı doğrudan kullandığınız hostingin hızına bağlıdır. Web siteniz ne kadar hızlı olursa olsun, istediğiniz kadar optimizasyon yapın hostinginiz yavaş ise siteniz de normalden yavaş olacaktır.
Web sitenizde yaptığınız her değişiklik hosting üzerinde etkili olduğu için bi nevi hosting hızınız web sitenizin hızını gösterir.

Sitenize giren ziyaretçi sitenizde herhangi bir açık görürse sitenizde ne kadar kalite içerik olursa olsun sitenizi anında terkeder. Hostinginizde bulunan bir açık doğrudan ziyaretçi yada üyelerinizi de etkileyebileceği için hosting ve web sitesi kodlamasının güvenliğine çok dikkat etmeniz gerekmekte.
"Çok büyük bi web sitesi açıcam, Facebook gibi bişey olacak ama ondan da büyük olacak" diye planlar yapıp sql injection açığı bırakırsanız yüzünüze karşı gülerler sonuçta :)


CDN Kullanımı
Content Delivery Network yani İçerik Dağıtım Ağı kullanımı son zamanlarda önem arz etmeye başladı. Hatta Google gibi arama motorları bile dikkat etmeye başladı. Google'ın Page Speed İnsight adlı web site hız test aracı CDN kullanımına bakmakta ve hatta artık CDN kullanımı SEO kriterlerinden biri hâline bile gelebilir.
CDN'nin genel olarak bi hostingden farkı yok. Örneğin PHP kodlarınız kendi sunucunuzda tutulurken, Javascript, CSS, resim, ses, video dosyaları gibi tasarımsal ve yüksek dosya boyutlu şeyler CDN'de tutulur ve orada çerez olarak tutulur.
Sizin belirlediğiniz sürelerde bir CDN'deki çerez olarak tutulan dosyalar sitenizde tekrardan derlenmek zorunda kalınmayacağı için web sitenizi ciddi oranda hızlandıracaktır.
Tabi CDN'yi kendi hostinginizin lokasyonuna yakın lokasyonlu almanız daha olumlu olacaktır. Çünkü her ne kadar çerezden çekip tekrardan derlemese de sonuçta web sitenizin CDN'ye istek göndermesi gerekecek ve ikisi arasındaki mesafe ne kadar uzaksa isteğin gönderilip geri gelmesi daha uzun sürecektir.

Ücretli veya ücretsiz olarak alacağınız CDN sayesinde hostinginize yardımcı ikinci bir hosting alarak sitenizin açılış ve genel hızını çok ciddi oranda arttırabilirsiniz.


Resim Optimizasyonu

Resimler bi web sitesinde olmazsa olmazlardan biri. Hem tasarımın daha güzel görünmesi hem de içeriği zenginleştirmek ve deskteklemek için resimler kullanmaktayız.
Fakat resimler yazılardan daha çok yer kapladığı için ve dolayısıyla sunucunuz tarafından yorumlanması daha uzun sürecektir. Bu da sizin açılış hızınıza olumsuz etki edecektir.
Tabi bunun da bir çözümü var :) Yani resimlerin çözünürlük ve kalitesini bozmadan küçültmek ve daha küçük dosya boyutlarına düşürerek daha hızlı yorumlanmasını sağlayabilirsiniz.
Bunu sağlamanın bir çok yolu bulunmakta. Örneğin PHP ile siz kendiniz de yapabilirsiniz veya çok daha derin küçültme yapmak için farklı servisler kullanabilirsiniz.
PHP ile resim dosyası sıkıştırmaya şöyle bi kod örneği verebiliriz:

$filename = 'resim.jpg'; $img = imagecreatefromjpeg($filename); $kayit = 'yeniResim.jpg'; imagejpeg($img, $kayit, 100);

Bu 4 satırlık kod sayesinde resmi jpg olarak tekrardan oluşturulmasını sağlayabilirsiniz, tabi yeniden resim oluşturulurken aynı zamanda sıkıştırma işlemi de yapılmakta.
PNG dosyaları için ise imagecreatefromjpeg yerine imagecreatefrompng ve imagejpeg yerine imagepng fonksiyonlarını kullanmanız gerekmekte.

Daha derin bir sıkıştırma yapmak istiyorsanız o zaman kendim de kullandığım Tinify'yi önerebilirim. PHP API'si sayesinde siz uğraşmadan direk olarak Tinify sunucusu üzerinden resimleri sıkıştırabilirsiniz.
Tinify Web Sitesine Gitmek İçin Buraya Tıklayabilirsiniz.

Elbette resim optimizasyonu sadece bununla da sınırlı değil.
Resim sıkıştırmaya ek olarak şunları da resim optimizasyonu için yapmanız gerek:
- Mümkünse PNG yada JPG formatını kullanın, TIFF, BMP gibi formatlardan uzak durun. Çünkü PNG ve JPEG formatı sıkıştırılmış, TIFF ve BMP ise sıkıştırılmamış resim formatıdır. Dolayısıyla PNG ve JPG formatını kullanmak daha küçük resim boyutu demek olacaktır. Bu da resim optimizasyonuna olumlu etki edecektir.
- Resimlerdeki gereksiz alanları kırpıp, resmi küçültün. Yani mesela elinizde ortasında "SEO" yazan bi resim var ve SEO yazısı resme oranla küçük görünüyor, geri kalan yerler de beyaz renkli duruyor.
Böyle bir resmi kullanmak gereksiz pixel demek olacağı için resim boyutu da fazla olacaktır. Doğru resim optimizasyonu için gereğinden büyük resimler kullanmamalısınız.
- İhtiyacınız olan resimler kullanın. Yani mesela ana sayfanızdaki içerik sıralamasında sabit boyut resim kullanın. Örneğin her yazının resmini 300x270 boyutunda ayarlayın.
Size 500 piksellik resim yetiyorken gidipte 1000 piksellik resim kullanmak hem web sitenizin geri kalan pikselleri boşuna yorumlaması, hem de resim boyutunun fazla olması anlamına gelir.
Hem SEO için hemde web sitenizin hızlı açılması için resim optimizasyonunu göz ardı etmeyin, hatta ilk olarak mobil uyumluluk sorunu varsa onu halledin ve sonrasında resim optimizasyonunu halledin.



Javascript ve CSS Dosyalarını Sıkıştırma
Javascript ve CSS dosyaları, resim dosyaları kadar olmasa da web sitenizin temel yapı taşlarından biri olduğu için normalden fazla alan kaplayabilirler. Web sitenizde CSS ve Javascript sık sık kullandıysanız, bu dosyalar tam bi dert haline gelebiliyor. Hâliyle sitenizin hızına da etki ediyor.
Javascript ve CSS dosyalarının web site hızına çok fazla etki etmesini istemiyorsanız, tıpkı resim dosyalarında olduğu gibi onları da sıkıştırabilir ve dosya boyutunu küçülterek sunucunuz tarafından daha hızlı yorumlanmasına ve daha az yer kaplamasını sağlayabilirsiniz.

Sıkıştırma işlemi gereksiz boşlukların silinmesi ve değişken isimlerinin olabildiğince kısa hâle getirilmesiyle yapılmakta.
CSS'te değişkenler kullanılmadığı için sadece boşlukları silerek sıkıştırma yapılabilir, yani CSS dosyalarını elle bile sıkıştırabilirsiniz.
Fakat Javascript'te fonksiyon ve değişken yapısı olduğu için elle sıkıştırma işlemi yapmak çok zor olacaktır.
Elle sıkıştırmak yerine bu işlemi yapan web sitelerini kullanabilirsiniz.
Benimde kullandığım ve tam anlamıyla sıkıştırma yapabildiği için https://www.minifier.org/ sitesini tavsiye edebilirim.
Hem CSS hem de Javascript sıkıştırması yapabildiği için birbirinden farklı siteler kullanmanıza gerek kalmıyor. Ayrıca kendi API'sini indirip kendi sunucunuz üzerinde bile sıkıştırma yapabilirsiniz.
Fakat sıkıştırma işlemi tek seferlik yapılacak bir işlem olduğu için sunucu üzerinde yapmanıza gerek yok, web sitesini kullansanız yeterli olacaktır.

Javascript ve CSS dosyalarının yanı sıra HTML, PHP gibi diğer dilleri de sıkıştırabilirsiniz fakat bu işlemi sunucu üzerinde farklı bir şekilde yapacağımız için pek gerek yok. Fakat ben illa PHP kodlarımı da sıkıştırmak istiyorum derseniz, PHP sıkıştırma yapmanız elbette site açılış hızına olumlu etki edecektir.



GZIP Sıkıştırmayı Etkinleştirme
Sıkıştırma işlemleri hem kod ile yapılabiliyorken hemde sunucu üzerinden de yapılabiliyor. Üstelik sunucu üzerinden yapılan sıkıştırma kod ile yapılandan çok daha büyük ve derin bir sıkıştırma oluyor.
Ayrıca kod ile sıkıştırma yapmanız için dosya uzantısı, fonksiyon veya değişken adı gibi kriterleri ayrı ayrı düşünmeniz gerekiyorken sunucu üzerinde yapılan sıkıştırmada bu gibi şeyleri pek düşünmeniz gerekmiyor. Sunucu üzerinde sıkıştırma yapmakta arka planda kod çalıştırıyor fakat siz sadece gerekli özelliği aktif ediyorsunuz.

Sunucu üzerinden sıkıştırma yapmanın iki yolu var;
- htaccess İle Sıkıştırma: Sunucunuzdaki yönlendirme, url değiştirme gibi işlemleri yapabildiğimiz htaccess dosyasına sıkıştırma özelliği de eklenebiliyor.
Bunun için PHP kullanan kişiler htaccess dosyasına aşağıdaki kod bloğunu RewriteEngine On satırından hemen önceye eklemesi gerekiyor.
Kod:

<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>

Bu kod bloğundan da anlaşılacağı üzere sunucu üzerinde çalışmakta olan javascript, xml, vnd, font, html, svg, css, html gibi dosya uzantısı ve HTML tagına sahip kodları otomatik olarak sıkıştırarak hem dosya boyutunu küçültüyor hemde sunucu üzerindeki yükü küçülterek daha hızlı yorumlanmasını ve dolayısıyla sitenizin daha hızlı açılmasını sağlıyor.

- cPanel Üzerinden Sıkıştırma: Sunucu üzerinden sıkıştırmayı aktifleştirmek hem htaccess ile hemde kod ile yapılan sıkıştırmadan daha etkili oluyor.
Bunun için cpanel'e giriş yaptıktan sonra MultiPHP INI Düzenleyici Bölümüne girmeniz ve zlib.output_compression bölümünü aktif etmeniz gerekmektedir.
Bu sayede sunucunuz üzerinden sıkıştırmayı aktif edebilir ve site hızınızı ciddi oranda arttırabilirsiniz.



Sunucu Çerezlerini Aktif Etme
Varsayalım ki web sitesi açacaksınız, "yarım yamalak açayım da sonra yeni sayfalar ekledikçe veya sayfaları güncelledikçe siteyi tamamlarım" düşüncesinde olmamanız gerekiyor.
Yani sitenizi tamamen bitirdikten sonra açmanız gerekiyor. Siteyi tamamlamadan açmak ve sonrasında defalarca sayfa ekleyip değiştirmek arama motorları için olumsuz etki etmektedir. Web sitesi açarken ki amacımız zaten arama motorlarının dikkatini olumlu yönde çekmek ve arama sonuçlarında üst sıralarda görünmek olduğu için öncelikle sitenizi tamamen bitirdikten sonra açmanız en doğru olandır.

Web sitenizi açtıktan sonra da CSS, Javascript, resim, font gibi dosyalarınız sabit kalacağı yani bir daha kolay kolay değiştirmeyeceğiniz için bu dosyaları sunucu üzerinde çerezleterek her sayfa açılışında tekrardan yorumlatmak zorunda bırakmayabilir ve bu sayede sunucunuzu asıl işlevi olan veritabanı işlemlerine yönlendirebilirsiniz.
Peki sunucu çerezlemeyi nasıl aktif edeceğiz diye soracak olursanız da, htaccess dosyası üzerinden yapabilirsiniz.

Aşağıda bulunan kod bloğunu htaccess dosyanızda RewriteEngine On satırından hemen önce ekleyerek sunucu çerezlemeyi aktif edebilirsiniz.
Kod:

<ifmodule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 2678400 seconds" ExpiresByType text/html "access plus 7200 seconds" ExpiresByType image/gif "access plus 2678400 seconds" ExpiresByType image/jpeg "access plus 2678400 seconds" ExpiresByType image/png "access plus 2678400 seconds" ExpiresByType text/css "access plus 750000 seconds" ExpiresByType text/javascript "access plus 2678400 seconds" ExpiresByType application/x-javascript "access plus 2678400 seconds" ExpiresByType image/svg+xml "access plus 2678400 seconds" </ifmodule> <ifmodule mod_headers.c> <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$"> Header set Cache-Control "max-age=2678400, public" </filesmatch> <filesmatch "\.(html|htm)$"> Header set Cache-Control "max-age=7200, private, must-revalidate" </filesmatch> <filesmatch "\.(pdf)$"> Header set Cache-Control "max-age=86400, public" </filesmatch> <filesmatch "\.(js)$"> Header set Cache-Control "max-age=2678400, private" </filesmatch> </ifmodule>

Yukarıdaki kod sayesinde html dosyalarını 7200 saniye (2 saat), resim, javascript ve xml dosyalarını 2678400 saniye (1 ay) boyunca sunucunuz üzerinde çerezlenmesini sağlayabilirsiniz.
Yani bir ziyaretçi sitenize girdiğinde kodlarınız bir kere yorumlanır ve sonrasında sunucu üzerinde çerezlenir yani depolanır. Ve yukarıdaki belirttiğim süreler içinde aynı ziyaretçi sitenize bir daha giriş yaparsa siteniz tekrardan derlenmek yerine direk çerez dosyaları üzerinden açılır.
Mesela ziyaretçi bir sayfadan diğer bir sayfaya geçiş yaptığında kodlar tekrardan derlenmek yerine direk çerezler üzerinden açılacağı için hem kullanıcı sayfayı çok daha hızlı açar, hemde sunucunuza çok fazla iş düşmez.
Bahsettiğim çerezler ziyaretçinin tarayıcısında tutulur, yani sunucunuz üzerinde herhangi bi yerde depolanmaz.
Sitenizdeki dosyalarda değişiklik yaptığınızda ve kullanıcının son girişinden bu yana çerez süresi bitmedi ise tarayıcısı üzerinden çerezleri silerse sunucu dosyaları tekrardan derler ve sitenizin son hali kullanıcıya görünür.

Evet bu yazımda bu kadar. Yazımı bitirmeden önce sizlere site açılış hızınızı test edebileceğiniz ve bulunan sorunları düzeltmenizde size en güzel tavsiyelerden birini veren https://gtmetrix.com sitesini tavsiye ederim.
Bu yazımda bahsettiğim ve bunlardan hariç daha birçok şeyi test edip size açılış hızınız ile alakalı rapor veren bu siteyi kullanmanız ve sitenizi bu rapora göre optimize etmeniz siteniz için büyük önem arz etmektedir.
GtMetrix sitesini nasıl kullanacağınızı ve rapor İngilizce olduğu için hangi satırın ne anlama geldiğini anlayamadıysanız sizi GtMetrix kullanımını anlattığım bu yazıma davet ediyorum.

Herkese hayırlı günler...



141
  • İçeriği Paylaş:

İÇERİĞİ DEĞERLENDİR

Toplam Değerlendirme Sayısı: 2
Toplam Değerlendirme: 2.5 / 5

Cevap Yaz