Web siteniz için performans ipuçları

Bir web sitesinin sunduğu kullanıcı deneyimi ilk aşamada sitenin hızına ve performansına bağlıdır. Bitmek bilmeyen “yükleniyor…” animasyonu kullanıcıların görmek isteyeceği en son şey. Bu şekilde kaybedilen her saniye, sonrasında sunulan deneyimi de olumsuz yönde etkiliyor. Web sitelerinde performans iyileştirmeye yardımcı olacak birkaç önemli ipucu bu yazıda.

Yazılım sürecinde optimizasyon işlemleri yazılan ilk kodla başlar. Süreç boyunca bu bilinçle hareket etmek, projenin son adımında yapılacak birkaç basit düzenlemeyle çok daha hızlı ve etkili sonuç almayı sağlar. Çoğumuzun jQuery‘nin mottosu olarak bildiği “Write less, do more.” aslında bütün yazılım süreçlerinin temel prensibidir. Proje başında yapılacak planlamalar, kullanılacak araçların önceden belirlenmesi her zaman daha az kod yazılmasını ve böylece daha hızlı sistemlerin hayata geçirilmesini sağlar. Dosya ve klasör hiyerarşisi ve imaj kullanım kuralları gibi önceden belirlenecek kurallar, daha işin başında sunucu isteklerini en aza indirerek önemli birkaç sorunu ortaya çıkmadan önleyecektir.

Tüm bunların yanında; Google‘ın web sayfalarının performanslarını arama sonuçları listelemesini etkileyen faktörler arasına dahil etmesiyle optimizasyon süreçlerinin öneminin bir kat daha arttığının farkında olmak gerekiyor.

Bir web sitesinin performansı nasıl ölçülür?

Performans ölçümü için birçok online araç var. Bu araçların en sık kullanılanı da PageSpeed Insight. Google’ın bu aracı hangi noktaların eksik olduğunu ve hangi dosyaların optimize edilmesi gerektiğini, desktop ve mobil için ayrı ayrı gösteriyor.

Google PageSpeed Insight’tan sonra en sık kullanılan araçlar ise Gmetrix ve Pingdom. Bu araçların ücretsiz versiyonları olduğu gibi, PageSpeed Insight’tan daha detaylı bilgi veren ücretli versiyonları da bulunuyor. Bu araçlarda test yaparken kayıt olmak gerekmiyor. Ancak örneğin; Gmetrix’te test yaparken çeşitli filtreler ve lokasyon gibi farklı parametreleri kullanabilmek için kayıt olmak gerekiyor.

Peki, performansı iyileştirmek için neler yapılmalı?

1- Tarayıcı önbellekleme özelliğinden yararlanın.

Ön belleğe almanın aktifleştirilmesi, siteyi birden fazla kez ziyaret eden kullanıcılar için bu dosyaların ön bellekte tutulmasına izin vererek sitenin daha hızlı erişilebilir olmasını sağlar. Burada önemli olan, ön belleğe alınması istenen dosyaların statik olmasıdır. Ayrıca, dosyaların ön bellekte tutulma süreleri de Expires özelliği ile sınırlanabilir. Bu, HTML gibi sık güncellenen dosyalar için ön bellekleme süresinin 1 gün gibi daha kısa sürelerde tutulmasını sağlar.

2- Sunucu yanıt süresini kısaltın.

Sunucu yanıt süresi, web sitesinin barındığı sunucudan kaynaklanan yavaşlıkları belirten uyarı ifadesidir. Bu sürenin yaklaşık 200ms altında olduğu durumlarda performans araçları bu uyarıyı gösterir. Sunucu yanıt süresindeki gecikmenin birden çok sebebi olabilir: Veri tabanı sorguları, yönlendirmeler, işlemci ve bellek yetersizlikleri gibi… Bu nedenleri doğru şekilde tespit ettikten sonra yapılacak düzenlemelerle sunucu yanıt süresi iyileştirilebilir.

3- Görünür içeriğe öncelik verin.

Görünen içerik, bir kullanıcının web sitesine geldiği ilk an gördüğü ilk ekrandır. Sitedeki görseller, CSS ve JS dosyaları yapılan isteğe göre sırasıyla yüklenirken bu sürecin tamamlanması gerektiğini belirten bir “yükleniyor” animasyonu gösterilir. Bu animasyonun süresini kısaltmak ve kullanıcıya istediği içeriği bir an önce göstermek için critical CSS yöntemi kullanılabilir. Bu yöntemle, kullanıcının ekranındaki görünür alana ait CSS özellikleri diğer CSS dosyalarından daha önce yükletilerek, açılış ekranının hızlı yüklenmesi sağlanır. Bu sayede kullanıcı, “yükleniyor” animasyonu ekranıyla bekletilmek yerine, ilk açılış ekranından itibaren yönlendirilir.

4- Oluşturmayı önleyen JS ve CSS’leri kaldırın.

Site, hazırlanan tasarıma göre birçok CSS ve JS dosyasına ihtiyaç duyabilir. Ancak bu dosyaların HTML içindeki yerleşimi hem performans hem de sayfa yükleme hızı açısından önemlidir. Bu tip ikincil öneme sahip dosyaları — dosyalardaki hiyerarşisine göre — sayfanın en altında toplamak, bu dosyaların, sayfa içeriği yüklendikten sonra yüklenmesini sağlayacağı için kullanıcıyı bekletmenin önüne geçer.

5- JS, CSS ve HTML dosyalarının küçültün.

Dosya boyutlarının küçültülmesi hız ve performans açısından çok önemli. Sitedeki bütün dosyalar mümkün olduğunca küçültülmüş halde tutulmalı. Bütün dosyaları küçültmek ve bunların sürekli kontrolünü sağlamak çok can sıkıcı olabilir. Bunun yerine, bir iş akışı oluşturularak bu küçültme işlemlerini otomatize edecek bir sistem kurulabilir. İş akışları için JS otomasyon araçları kullanılabilir. Bu, kodun düzenli ve anlamlı bir kod yapısında olmasını sağlarken diğer yandan da yayındaki sitenin sürekli optimize edilmiş halde kalmasını sağlar.

6- Görselleri optimize edin.

Görsellerin hem boyut hem de içerik olarak iki farklı şekilde optimize edilmesi gerekir. Bu nedenle birçok web sitesi için görsellerin optimizasyonu en büyük sorun haline gelebilmektedir. Öncellikle hangi tip görseller için hangi dosya türünün kullanılması gerektiğine dikkat edilmeli. Örneğin; fotoğraflar PNG olarak kaydedildiğinde JPG’e göre çok daha büyük boyutlarda yer kaplayabiliyorken vektörel şekiller veya çizimlerden oluşan görseller PNG olarak kaydedildiğinde JPG’e göre çok daha az boyutlarda yer kaplar. Dolayısıyla öncelikle, hangi dosya türlerinin hangi özellikteki dosyalar için oluşturulduğunu araştırmak faydalı olacaktır. Ayrıca vektörel objeleri doğrudan SVG formatında kullanmak, farklı boyutlarda ve farklı renklerdeki kullanımlar için tek bir SVG dosyası kullanılmasını sağlar. Yine bu tip görseller, SVG olarak kaydedilip sonrasında bir font ailesi halinde projeye dahil edilebilir veya birden fazla SVG birleştirilip SVG sprite olarak kullanılabilir. Bu sunucu istek sayısının azaltılmasını da sağlar.

Görsellerin optimize edilmesi için Tinypng gibi araçlar kullanılabileceği gibi, javascript otomasyon araçları da kullanılabilir. Ayrıca comppress.io gibi araçlar sayesinde, JPG ve PNG formatındaki görsellerle birlikte SVG’lerin de daha küçük boyutlara sıkıştırılması sağlanabilir. Bu tip araçlar, görsellerin kalitesini bozmadan %60–80 arasında bir sıkıştırma yapabilmektedir.

Görsellerle ilgili bir başka problem ise görsellerin ölçüleridir. Örneğin; 100x100px’lik bir alan içine 200x200px’lik bir görsel eklemek, performans ölçen araçların “optimize edilmemiş görsel” uyarısı vermesine neden olur. Bu nedenle, görsellerin eklendikleri alana uygun boyutlandırılmış olması dikkat edilmesi gereken diğer noktadır.

7- Sıkıştırmayı etkinleştirin.

Sunucular, dosyaları istemci tarafına daha hızlı gönderebilmek için gzip formatına dönüştürebilir. Sıkıştırma işlemleriyle ilgili düzenlemeler, .htaccess gibi sunucu ayar yapılandırmalarının yapıldığı dosyalar üzerinden etkinleştirilebilir. Bu dosyalar üzerinden hangi dosya tiplerinin sıkıştırmaya dahil edilebileceğini seçebilirsiniz.

Originally published at sherpa.blog on March 29, 2017.