Site hızının hem Google sıralama algoritmalarında onemli bir etken olduğunu hem de muşteri memnuniyetini onemli olcude etkilediğini daha onceki “Site Hızının SEO uzerinde etkisi” yazımızda bahsetmiştik. Bu yazımızda ise site hızını nasıl arttırabileceğimiz hakkında bilgi vermek istiyoruz.
Web Sitenizin Sıkıştırılması
Sitenizde yer alan HTML ve CSS ve Javascript dosyalarınızı sıkıştırabilirsiniz. Bu sıkıştırma sayesinde sitenizin yuklenme suresini buyuk olcude hızlandırırken kullanılan bant genişliğini buyuk oranda duşurebilirsiniz.
Gzip sıkıştırması
Sitemizi sıkıştırmak ve icin kullanacağımız yontemin adı Gzip. Gzip sayesinde bant genişliğinden ne kadar tasarruf edebileceğimizi bu ornekle gorelim:
Check Gzip Compression bir Gzip testi sitesi. Bu site sayesinde bir sitede Gzip sıkıştırması uygulanıp uygulanmadığını ve uygulanmışsa veriden ne kadar tasarruf sağlandığı gibi bilgileri gorebiliyoruz.
Yukarıdaki orneği incelediğimizde Ebay.com sitesinin Gzip sıkıştırma yontemi sayesinde bu siteye giren kullanıcılara %84 oranından daha az veri gonderildiğini tespit ediyoruz. 161 kilobayt olan site, Gzip sıkıştırması sayesinde 25 kilobayta kadar duşurulmuş.
Gzip sıkıştırması nasıl calışır?
Tarayıcılar, sunucudan istekte bulunduğunda Gzip okuyabildiklerini sunucuya bildirirler. Sunucu da istemciye yani tarayıcıya Gzip ile sıkıştırılmış bilgiyi gonderir. Modern tarayıcılar Gzip ile sıkıştırılmış dosyayı anlayabilmektedir.
Gzip sıkıştırmasını sitemde nasıl kullanabilirim?
Gzip sıkıştırması kolay bir şekilde sitelerde kullanılabilir. Tek yapmamız gereken web sitemizin bulunduğu sunucuda .htaccess dosyasına birkac kod eklemektir. Bu kodlar:
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
2. Kaynak Kodlarının Kucultulmesi
Html, CSS ve Javascript gibi dillerin sadeleştirilmesi de site hızına olumlu katkıda bulunacaktır. İlk maddede bahsettiğimiz sıkıştırma, verilerin sunucudan tarayıcıya yuklenme suresini hızlandıracaktır. Ancak bu madde de bahsedeceğimiz kaynak kodlarının kucultulmesi, bilgiler tarayıcımıza indirildikten sonra tarayıcımızın kodları derleme suresini hızlandıracaktır.
Bu kodların kucultulmesi icin ileri duzey yazılım bilgisine sahip olmak şart değildir. Zaten bu kodları kucultmek kodların mantığında değişik yapılmasını gerektirmemektedir. Yapılması gereken bu kodların arasında gereksiz olarak bulunan boşlukların, virgullerin ve yorumların silinmesidir.
Bir ornekle incelersek:
Basit bir Javascript kodunu kuculttuğumuzde 245 bayt olan kodumuzu 175 bayta kadar duşurebiliyoruz. Html kodlarını kucultmek icin www.willpeavy.com/minifier adresindeki online aracı kullanabilirsiniz.
CSS ve JavaScript kodları kucultmek icinse yui.github.io/yuicompressor/ aracını kullanabilirsiniz.
Genellikle web sitelerinde CSS ve JavaScript kodları kucultulur ancak Html kodlarının kucultulmesine pek rastlanmaz. Bunun nedeni coğu web sitesinde CSS ve JavaScript kodlarının statik olmasıdır ve pek değişmez. Ancak Html kodları genellikle dinamik olmaktadır yani sık sık değişmektedir. Bu nedenle Html kodlarının kucultulmesi pek tercih edilmemektedir.
3. Yonlendirmelerin Kaldırılması
Yonlendirme Nedir?
Yonlendirmeler, kullanıcının bir internet sitesi sayfasına ulaşmaya calıştığında, bu sayfanın kapalı olduğu mesajı alması ve başka bir sayfaya yonlendirilmesidir.
Genellikle sunucu tarafında yapılan 301 (kalıcı yonlendirme) ve 302 (gecici yonlendirme) koduna sahip olan bu yonlendirmeler sayfanın acılış hızını oldukca yavaşlatmaktadır. İstemci tarafında yapılan Metatag veya JavaScript ile yapılan yonlendirmeler, sunucu tarafında yapılan yonlendirmelere gore daha yavaştır. Ayrıca bu yonlendirmeler cache ’lemenin sağladığı hız artışından da yararlanamamaktadır. Yonlendirmelerden Kacının
Sitede yonlendirmeler mumkun olduğunca kullanılmamaya calışılmalıdır. Kullanmanın zorunlu olduğu durumlarda ise site ici linklemelerinde yonlendirilen sayfa adresi yerine yonlendirilmiş sayfa adresi gecirilmelidir. Ayrıca site dışı alınan backlink ’ler de yonlendirmeye uğruyorsa, backlink aldığınız yerler ile iletişime gecip yonlendirilen sayfa ile backlink almak sağlıklı olacaktır.
Dikkat edilmesi gereken bir nokta da sitenin sadece HTML ’den oluşmadığıdır. Sayfanızda yonlendirme olmadığını duşunebilirsiniz ancak CSS dosyaları, resimler veya dışarı kaynaklardan gelen script ’ler yonlendirilme sonrası yuklenmekte olabilir.
Yonlendirmede Harcanan Zamanı Nasıl Tespit Edebilirim?
Ceşitli araclar ile yonlendirme esnasında harcanan sureyi oğrenebiliriz. Bunlardan biri de Serp-perception isimli aractır. Bu aracla Amazon.com uzerinden bir test gercekleştirelim.
Amazon.com ’un bizim sitemiz olduğunu varsayalım ve site ici linklemelerde www.amazon.com URL ’i yerine Amazon.com URL ’ine link verdiğimizi duşunelim.
Bu arac vasıtasıyla yonlendirmeler icin harcanan zamanları yukarıdaki resimdeki gibi ayrıntılı olarak gorebiliyoruz.
4. Tarayıcı Onbellekleme Kullanımı
Tarayıcı onbellekleme - browser caching nedir?
Tarayıcı onbellekleme (browser caching), ziyaret edilen web sitesinin bircok verisinin tarayıcıda kaydedilmesidir ve bu web sitesi tekrar ziyaret edildiğinde sitenin cok daha hızlı yuklenmesini sağlar.
Onbelleklenebilecek dosyalar;
Resimler, CSS dosyaları, JavaScript dosyaları veya butun site olabilir. Kullanıcı siteyi tekrar yuklediğinde, orneğin logonun verilerinin tekrar transfer edilmesi gerekmez ve tarayıcı bu resmi kendi hafızasından yukler.
Onbelleklemenin Yaratabileceği Sorunlar ve Cozumu
Eğer sitede bir değişim olursa onbellekleme ozelliği nedeniyle değişimler gorunmeyebilir. Sitemizi değiştirdiğimizde, bu değişimleri kullanıcıların gormemesini istemeyiz.
Bu sorunun cozumunun farklı yolları vardır. Bunları incelersek;
Last modified version: Tarayıcı, sunucudan orneğin logo.png dosyasını isterken, bu dosyanın en son ne zaman değiştirildiğini sorar. Bu yontem sayesinde eğer sunucudan gelen cevap yeni bir tarih ise tarayıcı onbellekteki dosyayı acmak yerine dosyayı tekrar yukler. Etag identifier: Bir onceki “Last Modified” metodu genellikle işe yaramakla birlikte bazı ekstrem durumlarda (sunucunun saatinin bozulması veya yaz saati uygulamasının yarattığı problemler gibi) hataya sebep olmaması icin Etag etiketleri kullanılır. Bunları dosyaların parmak izi gibi duşunebiliriz. Bu etiket sayesinde tarayıcı, sunucudaki dosyanın değiştirilip değiştirilmediğini anlayabilecektir. Buna gore onbellekteki dosyayı kullanıp kullanmamaya karar verebilir. Expiring Date: Onbellekteki dosyalara bir son kullanma tarihi belirlenir. Bu sayede son kullanma tarihi gecen dosyalar kendi kendine tarayıcı onbelleğinden silinir. Max-Age: Bu etiket aslında Expiring Date etiketine benzerdir. Son kullanma tarihi girmek yerine kullanma suresi girilir. Yani belirli bir tarih yerine orneğin bir hafta gibi bir zaman girilir. Bu dosya tarayıcıya yuklendikten bir hafta sonra tarayıcıdan silinecektir. Tarayıcı onbellekleme ozelliğini web sitemde nasıl aktif ederim?
Sunucuda yer alan .htaccess dosyasına ekleyeceğimiz kodlarla sitemizin, tarayıcıların onbellekleme ozelliğinden yararlanmasını sağlayabiliriz. Eklememiz gereken kod:
# EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
EXPIRES CACHING ##
Paylaştığımız kodu web siteniz icin ozelleştirerek web siteniz icin onbellekleme ozelliğini aktif edebilirsiniz.
Tarayıcı onbellekleme ozelliğini nasıl test edebilirim?
Tarayıcı onbellekleme ozelliğini Redbot isimli aracla test edebiliriz.
Nike.com.tr ’yi Redbot aracıyla test edelim.
Bu arac sayesinde sitedeki tarayıcı onbellekleme hakkında ayrıntılı bilgi alabiliyoruz.
5. CDN Kullanımı
CDN Nedir?
Acılımı Content Distrubution Network olan CDN ’i kısaca sunucuların network ’u olarak acıklayabiliriz.
Web sitesi coğrafi olarak farklı sunucularda bulunur ve bir kullanıcı bu web sitesine girdiği zaman, bilgiyi en yakın sunucudan ceker.
CDN ’e ihtiyac duyabilecek siteler:
Video yayını yapan siteler Fazla sayıda ve boyutta dosyalara sahip olan siteler Farklı ulkelerden fazla trafiği olan siteler CDN ’e gerek duymayacak siteler:
Yerel siteler (restoranlar, cafeler vs.) Trafiğinin buyuk bir bolumunu belli bir coğrafi yerden alan yerel siteler Google, site hızını sıralama faktorlerinden birisi haline getirdikten sonra web sitelerinin coğu site hızını arttırmanın yollarını aramaya başladı ve cozumu CDN kullanmakta buldu.
Bazı populer CDN servisleri:
Cloudflare Fastly Amazon CloudFront MaxCDN Akamai Cachefly Keycdn CDN Nasıl Kullanılır?
CDN kurulumu, CDN hizmeti veren şirketlerinin iddia ettiğinin aksine bazen kafa karışıtırıcı olabilmektedir. Şimdi CDN kurulumuna goz atalım.
En uygun CDN hizmetini secme ve kayıt olma Hangi dosyaların CDN taşınması gerektiğine karar verme Dosyaları CDN ’e yukleme URL isimlerinin belirlenmesi (CNAME) CDN ’i test etme En uygun CDN hizmetini secme ve kayıt olma: Bircok CDN şirketi ve bu şirketlere ait farklı paketler bulunmaktadır. Web sitesinin trafiğine, hizmet verdiği bolgelere, CDN ’de tutulmak istenilen dosya turune gore gibi bircok farklı isteğe uygun CDN firması ve paketi bulunabilir. Ucretsiz seceneklerden ayda binlerce dolara kadar cok geniş fiyat yelpazesi vardır.
Hangi dosyaların CDN ’e taşınması gerektiğine karar verme: Genellikle uzak lokasyondan yuklenmesi yavaş olan video, resim gibi buyuk boyutlu dosyalar ile JavaScript ve CSS dosyaları gibi dosyalar CDN ’lerde saklanır. Sitenin HTML hali genelde orijinal sunucuda saklanmaya devam eder.
Dosyaları CDN ’ yukleme: CDN ’e yuklenmek istenen dosyaların bir sunucuda bulunması gerekir. Bu sunucudan da CDN sunucuna dosyalar yuklenir. Bu dosyaların diğer CDN ’lere dağıtılma işlemi CDN şirketi tarafından otomatik olarak yapılır. Ayrıca dosyaları yukleme işlemi de otomatik olarak yapılabilir. Wordpress gibi CMS ’ler kullanılıyorsa dosyaları CDN ’e yukleme işi cok daha kolay gercekleştirilir.
URL isimlerinin belirlenmesi (CNAME): Dosyaları CDN ’e yuklediğimizde URL ’ler onceki URL ’den farklı olmaktadır. Ornek verirsek ornek.com/css/main.css dosyasını CDN ’yuklediğimizde bu dosyanın URL ’i random bir şekilde jdksnj432/main.css gibi bir random bir URL almaktadır. Bu tarz URL ’ler kullanıcı dostu olmadığı icin dolaylı yoldan SEO dostu da olmamaktadır. Bu sorunu CNAME ile cozebiliriz. CNAME; bir kullanıcının, web sayfalarınızı nerede bulacağını belirleyen, Alan Adı Sistemi ’ndeki (DNS) bir giriştir. CNAME kullanarak bu CSS dosyasının URL ’ini cdn.ornek.com/main.css gibi kullanıcı dostu bir URL haline getirebiliriz.
CDN ’i test etme: Coğu CDN zaten gosterge paneline sahiptir ve bu panel sayesinde dosyaların kullanımları hakkında bilgi sahibi olabilirsiniz. Ayrıca Webpagetest aracını kullanarak CDN ’inizi test edebilirsiniz.
Ayrıca bu aracla web sitesinin performansı farklı lokasyonlardan test edilebilir.
6. Resimleri Optimize Edilmesi
Site hızını iyileştirme konusunda dikkat edilmesi gereken en onemli noktalardan birisi de resim dosyalarının boyutudur. Formatı uygun olmayan veya kucultulmemiş resimler site hızını cok yavaşlatabilir.
Resimleri sıkıştırın
Resimlerin sıkıştırılması site hızına olumlu katkıda bulunacaktır. Gorselin kalitesinde cok az kayıpla gorsel boyutunda onemli olcude azalma sağlanabilir. Eğer fotoğrafcılık veya resim konusunda profesyonel muşterilere hitap etmiyorsanız, ortalama kullanıcılar resimlerdeki kalite değişimini ayırt edemeyeceklerdir.
Hangi resim formatını tercih etmeliyim?
Resmin formatını tercih etmek onemli bir konudur ve web sitesi sahiplerinin kafasını en cok karıştıran noktalardan birisidir. İnternet dunyasında kullanımı fazla olan 3 resim formatı vardır. Bunlar JPEG, PNG ve GIF ’tir. Bunların 3 ’u de fazla boyut kullanmadan yuksek kalitede resim gosterebilirler ve sıkıştırılmaya musait resim formatlarıdır. Ancak bazı noktalarda birbirlerinden farklı performans gosterirler. Bunları incelersek;
JPEG:
Fotoğraflar icin tercih edilen resim formatıdır. Kucuk boyut - yuksek kalite performans sunar. Logolar ve cizimler icin kotu performans sunar. Kayıpsız sıkıştırma desteği vermez. GIF:
Transparan resim desteği vardır. Animasyonlar yapılabilir. Fazla renk kullanılmamış resimlerde iyi performans sunar. Kayıpsız sıkıştırma desteği vardır. Sadece 256 renk desteği vardır. Dosya boyutu yuksek olabilir. Fotoğraflarda iyi performans gostermez. PNG:
Logolar icin iyi performans verir. Kayıpsızdır. Transparan resim desteği sunar. Yazı iceren resimler icin iyi performans sunar. Buyuk boyutlu resimlerin boyutu cok yuksektir. (JPEG ile kıyaslandığında) Animasyon desteği yoktur. Butun tarayıcılar tarafından desteklenmez. Sitede yer alacak gorselin ozelliğine gore yukarıda teknik ozellikleri verilmiş dosya formatlarından biri secilmelidir.
Gorseller Nasıl Sıkıştırılır?
Gorsel dosyalarımızı sıkıştırmak icin farklı yontemler bulunmaktadır.
Photoshop:
Adobe Photoshop kullanarak resim dosyalarımızı kolay bir şekilde sıkıştırabiliriz. “Save for the web” ozelliğini kullanarak dosyalarımızı boyutunu kucultup internet sitelerinde kullanıma uygun hale getirebiliriz.
Eğer Photoshop ’a sahip değilsek Photoshop ’un online resim duzenleme uygulamasını kullanabiliriz.
PicMonkey, Pixlr, FotoFlexer ve GIMP gibi online araclar kullanarak gorsel dosyalarımızın boyutunu kucultebiliriz.
Web icin resim dosyalarının ideal boyutu kesin olarak soylenememekle birlikte 70 kb ’dan az olması tavsiye edilmektedir.
Siz sitenizdeki sayfaların hızını artırmak icin hangi yontemleri kullanıyorsunuz? Yorum alanından bizimle paylaşın!
kaynak : https://zeo.org/tr/blog/web-sitemi-n...andirabilirim/