Site Hızı İyileştirme Rehberi

Site hızı, web sitenizin hızlı yüklenmesini ve kullanıcılarınızın daha iyi bir deneyim yaşamasını etkiler. Web sayfalarınızda açılış hızlarınızı yükselterek Google ve diğer arama motorlarının en çok önem verdiği konulardan biri olan kullanıcı deneyiminizi maksimize edebilirsiniz. Bu sayede sayfalarınız Mayıs 2020 tarihinden itibaren etkisini göstermekte olan core web vitals güncellemelerine uygun yapıya da sahip olur.

Biz de bu rehber içeriğimizde 9 adımda site hızlarınızı nasıl iyileştirebileceğinizden bahsedeceğiz. Site hızınızı yükseltmek için uygulamanız gereken adımlar;

• Görsel boyutlarınızı küçültün,
• Webp görsel formatlarını deneyin,
• Lazy load yapısını kullanın,
• Uyumlu bir tema kullanın,
• Uyumlu bir sunucu tercih edin,
• CDN kullanın,
• CSS, HTML, JS dosyalarınızı optimize edin,
• GIF ve iFrame sayısını azaltın,
• Cache(Ön Bellek) yapısı kurgulayın

Site hızlarımızı iyileştirmeden hemen önce Google Page Speed Insight aracını kullanarak son durumumuzu kontrol edelim. Daha sonra rehberimizde uyguladığınız her adım için sayfalarınızı tekrar analiz edebilir ve farkı görebilirsiniz;

https://pagespeed.web.dev/

Görsel Boyutlarınızı Küçültün

Web sayfalarınız ne kadar fazla bileşene sahip olur ise o kadar geç yüklenecektir. Bir web sayfasının en büyük bileşenleri ise genellikle videolar ve görseller olabilmektedir. Bu nedenle görselleriniz ne kadar az yer kaplar ise sayfalarınız o kadar hızlı açılır.

Görsellerinizi, kalitesinden ödün vermeden sıkıştırmaya ve boyutlarını küçültmeye gayret edin. Sayfanızdan eksilteceğiniz her 1 KB, daha hızlı yüklenme süresi ve daha iyi bir kullanıcı deneyimi anlamına gelecektir. Bu nedenle görsel boyutları çok büyük önem arz eder.

WEBP Görsel Formatını Kullanın

Zaman ilerledikçe kullandığımız web teknolojileri de gelişmeye devam ediyor. JPG, JPEG2000, PNG formatlarına sahip görsellerden sonra web teknolojisinin hayatımıza kazandırdığı yeni bir resim formatı daha var; WEBP! WEBP formatı, web sayfalarının genel olarak kullandığı PNG formatına sahip resimlerden (aynı kalitede) daha düşük boyutlar ile oluşturulabildiği için site hızı yükseltme rehberimizde kendisine yer edinmiştir.

Görsellerinizin kalitesinden ödün vermeden, PNG ya da JPG formatlarından vazgeçin ve WEBP formatlarını kullanmayı deneyin.

Lazy Load Yapısı Kullanın

Lazy load, bant genişliğini azaltmak ve site hızlarını yükseltmek amacı ile dosyaların eşzamanız olarak yüklenmesini sağlayan bir metottur. HTML, CSS ya da JavaScript dosyaları için kullanılabilir. Lazy load metodu kullanılarak sayfa içerisinde bulunan görseller geç yüklenebilir ve bu sayede kullanıcıların ilk etapta görmedikleri görsel içeriklerin yüklemesi ertelenir. Bu erteleme ve eşzamanız yükleme sayesinde kullanıcılar sayfanın alt kısımlarında kalan görsellerin indirilmesini beklemez ve sayfa etkileşim süresi kısalır. Bu da site hızına direkt olarak etki eder.

Görsellerin lazy load kullanarak geç yüklenmesi ve site hızlarının iyileştirilmesi için kullanılması gereken yapı;

<img class="lazy" data-src"gorsel.png"/>

Bu yapı sayesinde, yani <img> yapısının içerisinde class olarak lazy eklemesi yapılarak görsellerin geç yüklenmesi sağlanabilir. Bu sayede sayfa hızı iyileştirilebilir.

Uyumlu Bir Tema Kullanın

Web sitenizin teması hem görsel hem de teknik açıdan oldukça önemlidir. Site temanızın responsive yapıda olmaması, kod yapısının temiz olmaması ve güncel kriterler göz önünde bulundurulmadan tasarlanması/yazılması bu temayı seçmemeniz için birer işarettir. Eğer sayfalarınızın hızlı açılmasını ve kullanıcı deneyimlerinizin maksimum seviyeye çıkmasını istiyorsanız temalarınızı iyi seçmelisiniz, Tema seçerken dikkat etmeniz gerekenler;

• CSS ve JavaScript dosyaların temiz yazıldığından ve gereksiz kod yığını barındırmadığından emin olmalısınız,
• Tema DOM yapısının fazla derin olmamasına dikkat etin,
• Menü yapısının JavaScript olmadığına emin olun,
• Her cihaz için aynı tepkiyi verdiğine ve responsive olduğuna emin olun.
• Temalarınızın güncel kalacağından ve destek imkanı olduğundan emin olunuz.

Tema satın almadan önce mümkünse demo görünümleri site hızı testlerine tabi tutun. Her türlü farklı cihaz görünümünde demo temayı deneyiniz ve emin olmadan yeni bir temaya geçiş yapmayınız.

Uyumlu Bir Sunucu Tercih Edin

Site hızı kriterlerinden biri ve belki de en önemlisi sunucu yanıt süreleridir. Web sitenizin bulunduğu sunucuların hızlı tepki vermesi ve bu sayede kullanıcılarınız ile hızlı bir etkileşimde bulunması gerekir. Eğer sunucularınız yavaş ise Google core web vitals kriterlerinden biri olarak kabul edilebilecek olan Time to Interactive (Tepki süreleri) süreleri konusunda sıkıntı yaşayabilirsiniz.

Web sitelerinin çalışma mantığı, kullanıcıların siteye istek yollaması ve gerekli dosyaların indirilerek kullanıcıya sunulmasıdır. Bu nedenle kullanıcı tarafından gelecek olan isteklerin hızlı bir şekilde işlenmesi ve sayfaların gösterilmesi gerekir.

Siteleriniz için uygun bir sunucu bulamadığınız taktide, projeniz büyüdükçe site hızı konusunda daha fazla sıkıntı yaşamaya başlayacak, SEO konusunda zarar göreceksiniz. Eğer sunucu konusunda zaaf vermek istemiyorsanız, üst düzey hosting sağlayıcıları ile anlaşmalar yapmanızı tavsiye ederiz. Ayrıca AWS, GCP, OVH gibi dünya çapında sunucu hizmetlerini de gözden geçirebilirsiniz.

CDN ( Content Delivery Network) Kullanın

CDN (Content Delivery Network), sitelerinizde yer alan dosyalarınızın (özellikle medya) başka bir sunucuda tutularak kullanıcılara sunulması metodudur. CDN üzerinde yer alacak görseller ya da diğer dosyalar, kullanıcı istekleri doğrultusunda, sitenin barındığı sunucudan eş zamansız olarak yüklenecek ve bu sayede ana sunucudan talep edilen yük azalacaktır. Bu durumda sayfa tepki süreleri kısalacak ve site hızı iyileştirmeleri konusunda olumlu adımlar atılacaktır.

Özellikle global hizmet sunan ve hedef kitlelerine sahip web siteleri, farklı lokasyonlarda sunucular seçerek ve hedef kitlelerine yakın konumlarda CDN kullanımı yaparak sayfa tepki sürelerini azaltabilecektir. İçerik dağıtım ağı (CDN) özellikle büyük projeler için hayati önem taşır. Sizlerde CDN yapılarını tercih ederek site hızlarınızı artırabilirsiniz.

Not: Projenizin büyüklüğüne bağlı olarak CDN kullanıp/kullanmayacağınız konusunda aksiyon almanızı tavsiye ederiz.

CSS, HTML, JS Dosyalarınızı Optimize Edin

CSS, HTML ve JavaScript yapısı bir web sitesinin kemik kadrosudur. Her türlü yükleme, etkileşim ve gösterim adımlarında var olmaktadırlar. Bu sebeplerden ötürü temiz bir yapı ile yazılmış olmaları site hızları açısından önem arz eder.

CSS Optimizasyonları

Web sitenizde yer alan CSS dosyalarınızın her sayfa için yüklenmesi bazı durumlarda anlamsız olabilir. Örneğin Ana sayfanızda kullandığınız CSS yapısını yazı sayfalarınızda kullanmıyor olabilirsiniz. Bu nedenle CSS dosyalarınızı ayırarak, her sayfanın ihtiyacı doğrultusunda kullanabilirsiniz. Ya da temel CSS ihtiyaçlarınızı ve yapınızı her sayfa için belirledikten sonra bu CSS dosyalarının haricinde kalan yapılarınızı ek olarak sunmayı düşünebilirsiniz. Bu sayede gereksiz kaynak kullanımından kaçınabileceksiniz.

Inline CSS yapılarını kullanmak da bazen karşımıza çıkabilmektedir. Eğer inline CSS kod kullanımına ihtiyacınız var ise yukarıda bahsettiğimiz gibi sadece temel CSS dosyalarınızı link olarak sayfalarınıza bağlayın ve inline yapılar ile sayfanızı özelleştirin. Bu sayede kullanılmayan CSS yapılarından kurtulabilirsiniz.

CSS dosyalarınızın kimi zaman eş zamansız olarak yüklenmesi gerekebilir. Ya da tam tersi olarak erken yükleme (pre-load) aşamasına tabi tutulması gerekebilir. Bu gibi durumları netleştirmeli ve dosyalarınızı bu metrikler çerçevesinde çağırmalısınız. Sadece Footer yapınızda yer alan ya da sayfanızı alt kısımlarında sunulan bir CSS özelliği var ise bunu eş zamansız olarak yüklemek mantıklı olabilir. Ayrıca web fontlarınızı erken yüklemeye tabi tutarak site hızlarınızı iyileştirebilirsiniz.

HTML Optimizasyonları

HTML yapınızın temiz olmaması, gereksiz kod satıları içermesi sayfalarınızın fazla yük sahibi olmasına ve fazla kaynak kullanmasına sebep olacaktır. Özellikle boş satır kodlarının kullanılması, içi bol olarak gelen <p>, <h> elementlerinin bulunması sizlere eksi yazacaktır. Her sayfalarınızın anlamsal olarak kusursuz olması hem de site hızlarınızın istenilen seviyeye gelmesi adına bu kodlardan kurtulmalısınız. Bu tarz yük oluşturan durumlara düşmemek adına minify işlemlerinden yararlanın ve kodlarınızı minimize edin.

JavaScript Optimizasyonları

Javascipt dosyaları veya kodları, sayfalarınızda yer alan her türlü aksiyon işlemi için kullanılmakta olan kaçınılmaz bir yapıdır. Ancak gereksiz yerlerde gereksiz Javascipt kodlarının bulunması ekstra yüklere ve sayfa yüklenme sürelerinin uzamasına sebep olabilir. Bu nedenle sayfalarınız için hangi JS dosyalarının gerekli olduğunu belirleyin ve gereksiz olan JS dosyalarını o sayfa için yüklemekten vazgeçin. Ayrıca aynı Javascript dosyasını iki kez yüklemediğinizden emin olun. Örneğin Google Analytics ya da Tag manager için kullanılan JS kodları kimi zaman birden fazla kez yüklenebilir. Bu yapıdan kurtularak fazla yükten de kurtulabilirsiniz.

JavaScript dosyalarınızı kimi zaman Asynchronously yani eş zamansız olarak yüklemeniz, defer etmeniz gerekebilir. Bu da şu anlama gelmektedir, Sayfanızın ilk yükleme esnasında bu JS dosyalarına ihtiyacı olmayabilir. Eğer böyle bir durum söz konusu ise ve bu dosyaların eş zamansız olarak yüklenmesi herhangi bir problem teşkil etmeyecek ise bu dosyaları geç yükleyin. Örneği sadece Footer yapınızda yer alan bir JS yapısını geç yüklemeniz sayfa hızı açısından sizlere fayda sunabilir.

GIF ve iFrame Sayısını Azaltın

GIF ve iFrame medya yapıları, boyutları ve sunumları itibari ile sitenizin yüküne yük katabilirler. Bu nedenle kullanımları çok önerilmez. Ancak çok gerekli olan durumlar olur ise yine optimize bir şekilde kullanmakta fayda vardır.

• GIF yüklemeleri sırasında dosya boyutlarınızı küçültmeye dikkat edin.
• GIF dosyalarınızı mümkünse sayfaların alt kısımlarında ve lazy bir şekilde sunun,
• iFrame dosyalarınızı lazy-load olarak sunduğunuzdan emin olun,
• Embed durumları dışında iFrame kullanmaktan kaçının

iFrame lazy-load işlemleri için;

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Cache (Ön Bellek) Yapısı Kurgulayın

Cache yapısı, dosyaların ön bellek alınmasına müsaade eden ve kullanıcıların sitenize tekrar geldikleri sırada önceden belleğe atılmış olan dosyalarını kullanarak daha hızlı etkileşime girmesini sağlayan yapıdır.

Cache yapıları ikiye ayrılmaktadır. Bunlar sunucu taraflı olarak sunulan ön bellekler ve tarayıcı taraflı sunulan ön belleklerdir. Sunucu taraflı ön bellek sistemi tarayıcı taraflı sisteme göre daha fazla veri depolayabilmektedir.

Cache yapısı kullanılan web sitelerinde HTTP istekleri daha az seviyede olacak ve bu sayede daha az bant genişliği harcanacaktır. Ayrıca oluşturulan ön bellekler sayesinde siteyi ikinci kez ziyaret eden kullanıcılar daha hızlı bir sürede web sitesini açabilecektir.

Sonuç

Bu yazımıda web siteleri için hayati öneme sahip olan site hızlarının nasıl iyileştirileceğinden bahsetmeye çalıştık. Bütünsel bir yapı kurgulayarak, daha hızlı açılan sayfalar oluşturmak ve bu sayede kullanıcı deneyimlerini iyileştirmek mümkün. Sizlerde daha fazla bilgi almak isterseniz lütfen bu kaynağı ziyaret ediniz; https://web.dev/fast/

Site Hızı İyileştirme Hakkında Sıkça Sorulan Sorular