Web sitenizi hızlandıracak 8 optimizasyon önerisi

Hostinger

Bazı developerlar sıkıcı olduğu için front-end sayfa hızlandırma optimizasyonları ile uğraşmak istemezler. Ancak sitenizin Google arama sonuçlarında daha iyi bir konuma gelmesi için yapılması gereken bazı zorunlu işlemler vardır. Bu işlemlerden / optimizasyon önerilerinden web sitenizin yüklenme hızını arttıracak 8 tanesini sizler için derledik. Bunu yaparken Google’ın web sitenizden ne istediğini, hangi sorun veya sorunlarla karşılaştığımızı ve bu sorunların pratik çözümlerini ifade etmeye çalıştık.

1) Resim Boyutları

Google ne diyor: “Resimlerin çok büyük, sayfa yüklenme hızını düşürüyor.”

TinyPNG adresinde yer alan resim sıkıştırma hizmetini kullanarak png veya jpg uzantılı resimlerinizi sıkıştırabilir, veriden tasarruf edebilirsiniz. Sıkıştırılmış resimler çok daha hızlı yükleneceği için sayfalarınız da daha hızlı yüklenecektir.

2) Çok Fazla Resim Kullanımı

Google ne diyor: “Çok fazla resim var, yüklemesi uzun sürüyor.”

Viewport içerisinde yer almayan resimleri yüklemeyin, bunun için lazy image loading denilen bir teknik kullanabilirsiniz. Bu teknik ile resimler sayfa ile birlikte değil, kullanıcı ekranı kaydırdıkça, sıra o resmin bulunduğu alana gelince görüntülenecektir.

Web sitenize lazy loading özelliği kazandırabilmek için kullanabileceğiniz pek çok teknik var. Bizce en kolayı, bu işi bir jQuery eklentisi ile gerçekleştirmek. Web sitenizde jQuery kütüphanesi kullanıyorsanız jQuery Lazy eklentisi ile kolayca lazy loading özelliğine sahip olabilirsiniz.

3) İsteklerin Önyüklenmesi

Google ne diyor: “Önyüklenilmesi gereken dosyaları hızlıca bildir.”

JS veya CSS dosyaları kendi içlerinde başka harici dosyalar yüklüyorsa bu dosyaların yüklenmesi zaman alacaktır. Bunun yerine head etiketi içierisinde link preload=”” özelliğini kullanabilir, böylece tarayıcının bu dosyayı daha hızlı bir şekilde yükleyecektir.

Örneğin, sitenizde bulunun main.css dosyası kendi içinden başka bir dosya olan ui.css ile stilleri dinamik olarak yüklüyorsa aşağıda yer alan kodu kullanarak bu dosyanın daha hızlı yüklenmesini sağlayabilirsiniz:

1
2
3
<head>
    <link rel="preload" href="ui.css" as="style">
</head>

Varsa web fontlarınızı önyüklemek de site hızınızı arttıracaktır:

1
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Daha fazla bilgi için Google geliştirici araçlarına gözatabilirsiniz.

4) Dosya Küçültme (Minification)

Google ne diyor: “Dosyalarını küçült! Nasıl göründükleri umrumda değil, ne kadar küçük ise o kadar hızlı yüklerim.”

Öyle veya böyle, günümüzde Google tarafından sevilen bir web sitesine sahip olabilmek için HTML, CSS, ve JavaScript gibi dosyaların küçültülmesi gerekmektedir. Böylece tarayıcı bu dosyaları çok daha kolay bir şekilde yüklüyor ve Google’da üst sıralara çıkma şansı daha da artıyor.

Küçültülmemiş bir HTML dosyası aşağıdaki şekilde görünmektedir:

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    <title>Sayfam</title>
</head>
<body>
   
    <h1>Başlık</h1>
    <p>İçerik</p>

</body>
</html>

Küçültülmüş bir HTML kodu ise şu şekilde görüntülenecektir:

1
<html><head><title>Sayfam</title></head><body><h1>Başlık</h1><p>İçerik</p></body></html>

HTML, CSS, ve JavaScript’in küçültülmesi, tıpkı resimlerde olduğu gibi sayfa yükleme hızınızı büyük ölçüde arttıracaktır. Tüm bu dosyaları küçültmek için MinifyCode gibi basit, ücretsiz, online araçları kullanabilirsiniz.

5) Tarayıcı Önbelleğini Kullanmak

Google ne diyor: “Tarayıcının kaydetmesi gereken verileri söyle ve her sayfa yüklemesinde bu veriler tekrar yüklenmesin.”

Tarayıcılar web sitelerinin statik verilerini depolarlar, böylece her sayfa yüklemesinde önbelleğe aldıkları bu verileri tekrar indirmek zorunda kalmazlar. Web sitenize yeni bir sayfa isteği gönderildiğinde tarayıcı önceki sayfadan kaydettiği, yani “önbelleğe aldığı” verileri kullanır. Tarayıcı önbelleğine alınacak dosyaları sunucu tarafında ayarlamanız gerekmektedir.

NOT: CloudFlare gibi 3. parti hizmetler kullanıyorsanız, bu hizmetlerin yönetici panelleri aracılığıyla tarayıcı önbelleği sona erme tarihini belirleyebilirsiniz.

Standart Linux altyapılı sunucularda (Apache, LiteSpeed vs.) .htaccess dosyanızı kullanarak önbellek başlıklarını belirleyebilirsiniz:

1
2
3
4
# statik dosyaların bir aylığına önbelleğe alınması
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Veya NGINX ile /etc/nginx/sites-enabled/default sanal host dosyasına şu kodu yazarak tarayıcı önbelleğini etkinleştirebilirsiniz:

1
2
3
location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
}

6) Çok Fazla Harici Kaynak Kullanımı

Google ne diyor: “Bu sayfanın yüklenmesi çok uzun sürüyor, neden bu kadar fazla harici kaynak kullanıyorsun?”

Web sitesi ne kadar az kaynak çağırırsa o kadar hızlı yüklenir. Bazen sitenizin yüklediği verileri azaltmanız, veya benzer kaynak verilerini birleştirmenin bir yolunu bulmanız gerekmektedir. CSS veya JS dosyalarınız küçük boyuttaysa bu dosyaları sayfaya enjekte etmeyi, yani harici bir dosya olarak çağırmak yerine inline olarak HTML içine gömmeyi düşünebilirsiniz. Bunu PHP kullanarak kolayca yapabilmek için aşağıdaki örneklerimizi inceleyebilirsiniz.

CSS dosyası örneği:

1
<style><?php readfile('/path/to/style.css'); ?></style>

JavaScript dosyası örneği:

1
<script><?php readfile('/path/to/script.js'); ?></script>

CSS/JS dosyalarını enjekte ettikten sonra sayfa yüklenme hızını test etmenizi, öncekine nazaran avantaj kazanıp kazanmadığınızı kontrol etmenizi öneririz.

7) Renderı Engelleyen Kaynaklar

Google ne diyor: “Sayfa tarayıcı tarafından render edilmesi gerekirken sık sık JS dosyalarını bekliyor. Neden bu dosyaları sayfayı tamamen yükledikten sonra çağırmıyorsun?”

Web sayfanıza scriptler eklerken, mümkünse async özelliğini kullanmanızı tavsiye ederiz. Script tagına async özelliğini ekleyerek scriptinizi renderı yani sayfa oluşturmayı engellemeyen bir hale getirebilirsiniz.

Render engelleyen script:

1
<script src="/path/to/script.js"></script>

Render engellemeyen script:

1
<script src="/path/to/script.js" async></script>

Alternatif bir çözüm olarak, alışkanlıkla </head> etiketi öncesine eklediğiniz <script src="dosya.js"></script> türü çağrıları, sayfanın en altına </body> etiketinin üstüne ekleyerek de bu sorunu çözebilirsiniz. Bu şekilde önce sayfanız render edilecek, harici JS dosyaları en son çağrılacaktır.

8) Çok Fazla DOM Öğesi Kullanımı

Google ne diyor: “HTML göstermeyi seviyorum fakat bu sayfa çok fazla DOM öğesi içeriyor.”

Derin DOM elemanları içeren sayfaların yüklenmesi daha uzun bir zaman alacaktır. HTML sayfanızın derinliğini minimum düzeyde tutmaya çalışın. Bir slider görüntülemek için 4 CSS, 5 JS, 10 JPEG dosyası yüklemek yerine sergilemek istediğiniz içeriği daha optimize bir eklenti kullanarak veya daha iyisi salt kodlar aracılığıyla görüntülemeye çalışın. Daha sade, daha anlaşılır içerikler organik ziyaretçileriniz gibi Google’ın da hoşuna gidecek, web siteniz hem daha hızlı çalışacak hem de rakiplerinizden bir adım önde olacaktır.


Yukarıda belirttiğimiz ipuçlarını kullanarak web sitenizin yüklenme hızını arttırabilirsiniz. Ayrıca bu ipuçları Organik SEO trafiğinizi de arttıracaktır. Tüm bu yönergeleri uyguladıktan sonra web sitenizin masaüstü ve mobil yüklenme hızlarını test etmek isterseniz Google PageSpeed Insights ve GTMetrix araçlarını kullanabilirsiniz.

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir