Eyl.26

Web Programlamada Optimizasyon Basamakları

Web sayfamızı optimize etmek için izlememiz gereken belli başlı yöntemler vardır. Bunların bir kısmı arayüz geliştiricisi tarafından yapılırken bazısı grafikleri hazırlayan tasarımcı, bazısı da web sitesinin yayınlanmasından sorumlu olan operasyon sorumlusu tarafından yapılması gereken görevlerdir.

Websitesi Optimizasyonu Neden Gereklidir

Günümüz artık hız çağı. Her ne kadar internet hızı çok fazla artmış olsa da, web sayfalarının içerik kalitesi de bu hızla paralel olarak artıyor. Sadece içeriklerin dosya boyutu olarak yüksek olması, web sayfalarının geç yüklenmesine neden olan etkenlerden sadece biridir. Ziyaretçilerin görmüş olduğu metin, resim ve video gibi görsel öğeler dışında, arkaplanda yer alan HTML, CSS ve JAVASCRIPT kodlarının da dosya boyutları kontrol altına alınmalıdır. Gereksiz olan hiçbir kod sayfa içinde boş yere tutulmamalıdır. İşte bunun gibi faktörler, web sayfalarının geç yüklenmesine neden olabilir. Geç yüklenen bir web sayfası hem SEO analizlerinde kötü puan alır ve geriye itilir, hem de kullanıcılar geç yüklenen sayfalara katlanamayacak bir haldedir. Eskiden bir web sayfasının yüklenmesini izlemek bile bize keyif verirken, yeni kuşak web kullanıcılarının bekleme süreleri milisaniyelerle ölçülüyor. Hatta bir web sayfası en fazla 3 saniye içinde yüklenmiş olmalıdır. Bakalım biz de çözüm olarak ne gibi yollar izleyeceğiz…

Performans Analizi

İlk olarak yapmamız gereken iş, yayında olan web sayfamızı bir analiz etmek olacaktır. Analiz edebilmek için bir takım online araçlar bulunmaktadır. Analiz için Google’ın ücretsiz olarak geliştiricilere sunduğu PageSpeed Insights aracını kullanacağız. Aşağıdaki adrese girin.

https://developers.google.com/speed/pagespeed/insights/

Girdiğiniz sayfada, test etmek istediğiniz web sayfasının URL’ini girin ve ANALİZ ET butonuna tıklayın. Örnek olması amacıyla kendi web sayfamı girdim ve durum biraz kötü çıktı (WordPress kullandığım için sonuç kötü, yoksa kötü kodlamam…).

Analiz işlemi bittiğinde hem Mobil hem de Masaüstü için 100% üzerinden bir puan verir. Ayrıca Olası Optimizasyonlar kısmı çok kritik ve önemli bilgiler içerir. Burada web sayfanızı yavaşlatan nedenleri görebilir ve nasıl düzelteceğinizi de anlayabilirsiniz. Bana, genellikle minify ile ilgili düzeltmeler yapmam gerekliliği ile ilgili önerilerde bulunmuş.

Kodların Doğruluğunu Kontrol Etmek

Dosyalarınızı her ne kadar düşük boyuta getirseniz de bazen web sayfanızın açılması çok uzun zaman alabilir, hatta kullanıcının tarayıcısını kilitleyebilir, işlemcisini tavana çıkarabilir. Bu gibi sorunlar genellikle JavaScript kodlarının hatalı çalışması, bazen de sonsuz döngüye girmesiyle oluşur. Kodlarınızı her ne kadar doğru yazdığınızı düşünseniz de mutlaka bir test aracından geçirmeniz faydalı olacaktır (Eğer öğrenebilirseniz Sonar aracını kullanmanızı öneririm, araştırın). Kodlarınızı basit bir şekilde test etmek için yine online bir araç kullanabilirsiniz.

Aslında kodlarınızı yazarken SublimeText veya Brackets gibi gelişmiş metin editörleri, zaten hata yaptığınız noktalarda sizi uyaracaktır. Ancak yine gözden kaçan veya programların göremedi hataları son bir kez test araçlarından geçirmekte fayda var.

HTML5 kodlarımızı test edeceğimiz aracımız; W3C tarafından ücretsiz olarak sunulan Validator (Doğrulama) aracıdır. Aşağıdaki adrese girin.

https://validator.w3.org/

Açılan sayfada URL kısmına yine kendi adresimi yazıp Check butonuna tıklıyorum. Veya isterseniz direkt olarak kodunuzu Validate by Direct Input’taki metin kutusuna girebilir veya dosyanızı Validate by File Upload ile yükleyerek de test edebilirsiniz.

JavaScript kodlarınızı da test etmek için aşağıdaki adresi kullanabilirsiniz.

http://beautifytools.com/javascript-validator.php

Sol taraftaki kısma JavaScript kodlarınızı girin ve Validate butonuna tıklayın (Eğer editörde yazıyorsanız kendisi otomatik validate yapacaktır). Eğer bir hata bulursa sağ tarafta gösterecektir. Örneğimizde ufak bir hata yaptık ve sonucunu gördük.

Hata sonucumuza göre 2. satır 26. karakterde ) kullanmam gerekirken ] kullanmışım. Yani parantezi yanlış kapatmışım.

CSS kodlarımızı da JavaScript kodlarımız gibi online test edebiliriz. Aşağıdaki adrese girin.

http://beautifytools.com/css-validator.php

Üst kısımdaki alana CSS kodlarınızı yazın ve aşağıdaki alanda sonuçlara bakın.

Sonuçlara göre baya hata yapmışım. Öncelikle 2. satırda nümerik değer tanımlarken ondalıklı kısımda , (virgül) kullanamazsın demiş. 3. satırda ise paddiing diye bir özelliğin olamayacağından bahsetmiş (normali padding olmalı). Son olarak da 4. satırda kritik bir uyarı vermiş; bu kritik uyarı CSS kodunun o noktada kopmasına sebep olacaktır. Dediğine göre } işaretinden sonra , (virgül) kullanamazsın diyor.

HTML, CSS ve JS Dosyalarını Minimize Etmek

Doğruluğundan emin olduğumuz HTML, CSS ve JS dosyalarımızı minify (minimize, küçültme) etmemiz lazım. Bunun anlamı, dosya boyutu olarak küçültülmesidir. Peki bunu nasıl yaparız? Aşağıdaki iki kodu inceleyin…

function merhaba(){
	console.log(“merhaba”);
}
merhaba();
function merhaba(){console.log(“merhaba”);}merhaba();

Her iki kod bloğu da aynıdır. Ancak üst taraftaki kodun dosya boyutu 64 Byte iken, aşağıdakinin ise 53 Byte’tır. Sebebi de; görünmeyen TAB ve ENTER karakterleridir. Burada görünmeyen 3 adet ENTER, 1 adet TAB karakteri vardır. Kodlarınızın çok fazla olduğunu düşünürseniz, minify ettiğiniz dosyalarınızda ne kadar büyük bir byte tasarrufu yapabileceğinizi hesaplayın.

Eğer kodlarınız bu kadar kısa ise (kısa olacağını sanmıyorum) bu şekilde kendiniz elinizle de gereksiz karakterleri silebilirsiniz. Fakat kodlarınız uzunsa ve çok sayıda dosyanız varsa kesinlikle el ile yapmamalısınız, yapsanız da çok fazla vaktinizi alır. Bunun için bir takım minify araçları geliştirilmiştir. Bu tür angarya işi Gulp ile nasıl çok basit bir şekilde yapacağımızı sonraki makalelerimizde.

Resimleri Optimize Etmek

Kodların yer aldığı dosyaları minify edebildiğimiz gibi resim dosyalarını da (JPG, PNG, GIF) optimize edebiliriz. Bunun için en doğru yöntem, grafiklerin hazırlanırken 72 dpi ile hazırlanmış olması gerekliliğidir. Bazı web sayfalarında 300dpi grafikler ile de karşılaştım; ki bunlar matbaalarda baskı kalitesi için kullanılır.

Bazı web sayfalarında da çok büyük olan bir resmin (2048x800px gibi) küçültülerek 400x200px’lik bir alanda gösteriliyor olmasıdır. Normalde göstermeniz gereken ölçü ne ise o ölçü ile grafik hazırlanmalıdır, kesinlikle büyük olan resim CSS ile küçültülmemeli veya büyütülmemelidir (büyütülürse de görüntü bozukluğu olur). Yapılan bu işlem genellikle geliştiricinin grafiği düzenleme yeteneğinin olmaması veya yeteneği olsa bile üşengeçliğinden kaynaklanır.

Eğer bir geliştirici olarak elinizde böyle düzenlenmesi gereken grafikler varsa, basit bir grafik editörü veya image resizer (resim yeniden ölçülendirme) programları ile istediğiniz boyutlara getirebilirsiniz. Eğer çok fazla grafiğiniz varsa yine bunu da elle yapmak sorun olacaktır. Bölüm sonuna doğru Gulp ile grafikleri nasıl minify edeceğimizi çok basit bir şekilde yapacağımızı göreceğiz. Ancak resimleri istenilen boyutlara getirme işini yine grafikleri hazırlayan kişinin hazırlaması en doğru yöntemdir.

CDN’lerden Faydalanmak

Hatırlarsanız jQuery ve Bootstrap konularını işlerken harici kaynaklardan framework’leri yükleyebileceğimizi görmüştük. Eğer sunucunuzun dosya indirme hızı yavaşsa veya sunucunuzda size ayrılan alan çok küçük ise, bazı kaynakları dışarıdan kullanmanız daha faydalı olabilir. CDN, Content Delivery Network, yani İçerik Paylaşım Ağı’nın kısaltılmıştır. Sadece bir adet CND bulunmaz. Mesela maxcdn.com, cndjs.com gibi adresler olabilir.

Eğer Google Library kullanacaksanız:

https://developers.google.com/speed/libraries/

Eğer Microsoft AJAX Library kullanacaksanız:

https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview

Eğer Genel olarak bütün Library ve Framework’leri kullanacaksanız:

https://cdnjs.com/libraries

… adreslerinde yer alan URL’leri kullanabilirsiniz.

Cache Kullanmak

Cache demek; verilerin bir kez yüklendikten sonra, eğer daha sonra tekrar okunması gerekiyorsa ilk olarak kayıtlı mı diye bakılıp eğer varsa kayıttan yüklenmesi anlamına gelir. Daha önceki makalelerimizden, Offline Çalıştırma ve Cache Mekanizması başlığı altında bir manifesto oluşturmuş, bazı dosyaları cache’den okumuştuk. Yapılan bu cache işlemi web sayfası için oldukça performans sağlamaktadır.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum