Web Site Açılış Hızını Arttırma Teknikleri

“Sabır bir erdemdir” atasözü online dünyada geçerli değildir. Bir saniyelik gecikme bile, sayfa görüntülemelerini, müşteri memnuniyetini ve dönüşüm oranlarını önemli ölçüde azaltabilir. Sitenizin hızı, organik arama sıralamanızı da etkiler. Google, 2010’dan bu yana, algoritmasında site hızını önemsemektedir. Peki sayfa hızınıza katkıda bulunan en büyük faktör nedir?

Sayfanızı oluşturan kodu indirmek, tarayıcıların zamanını alır. Sayfanın açılması için HTML kodunun, stil sayfalarının, komut dosyalarının ve resimlerin indirilmek gerekir. Tüm bu verileri indirmek biraz zaman alabilir.

Web kullanıcıları daha ilgi çekici site tasarımları bekledikçe, bir sitenin kaynak dosyalarının boyutu büyümeye devam edecektir. Her yeni özellik, sitenizi biraz daha aşağıya çeken yeni bir komut dosyası veya stil sayfası gerektirir.

Sitenizin hızını analiz etmek için bazı faydalı araçlar var. Google'ın PageSpeed Insights, Website Grader ve GTMetrix en popüler olanlarıdır. Her üç hizmet de sitenizi analiz eder ve size geride kaldığınız yeri söyler.

Küçük bir uyarı: sonuçlar bazen biraz göz korkutucu olabilir, ancak çoğu düzeltmeler nispeten hızlı ve kolaydır. Hız servisinin önerdiği her şeyi düzeltemeyebilirsiniz, ancak siteyi ziyaretçileriniz için daha iyi hale getirmek için yeterince düzeltmeniz gerekir. 

Birkaç modern içerik yönetim sistemi hız arttırıcı seçenekler uygularken, Wordpress ve Joomla gibi daha yaygın sistemler hız için biraz el emeği gerektirir. 

Şimdi, her web yöneticisinin dikkate alması gereken bazı temel hız çözümlerine bakalım. 

Görüntüler, internet sitesinin yavaş yüklenmesindeki en büyük etkenlerdir.

Görüntülerinizi optimize etmenin ilk yolu, bunları uygun şekilde boyutlandırmaktır.

Birçok web yöneticisi büyük resimler kullanır ve ardından bunları CSS ile ölçeklendirir. Fark etmedikleri, tarayıcınızın onları tam görüntü boyutunda yüklemesidir. 

Örneğin, sunucunuzda 1000 x 1000 piksel boyutunda bir resminiz varsa, ancak bunu 100 x 100 piksel olarak web sayfanızda görüntülüyor olsanız da, tarayıcınız bu resmi sunucunuzdaki hali ile yükleyecek ve daha sonra boyutlandıracaktır. Bu, tarayıcınızın gerektiğinden on kat daha fazla yükleme yapması anlamına gelir. 

Görüntülerinizi sitenize yüklemeden önce boyutlandırın, böylece ziyaretçilerinizden daha fazlasını indirmelerini istemezsiniz. 

Görüntülerinizi optimize etmenin ikinci yolu onları sıkıştırmaktır. 

Kaliteyi kaybetmeden görüntü boyutlarınızı önemli ölçüde azaltabilen, tinypng.com gibi görüntü sıkıştırma için birkaç ücretsiz çevrimiçi araç vardır. Boyutta %25 ila %80 arasında bir azalma görebilirsiniz!

Ziyaretçiler, bir sayfayı her yüklediklerinde neden aynı şeyleri indirsin!

Tarayıcı önbelleğe almayı etkinleştirmek, bir ziyaretçinin bilgisayarında bazı verileri geçici olarak saklamasına olanak tanır, böylece sayfanızı her ziyaret ettiklerinde tüm öğelerin yüklenmesini beklemek zorunda kalmazlar.

Verileri ne kadar süre depoladığınız, tarayıcı yapılandırmasına ve sunucu tarafındaki önbellek ayarlarına bağlıdır.

Sunucunuzda tarayıcı önbelleği ayarlamak için aşağıdaki kaynaklara bakın veya hosting şirketinize başvurun:

• Apache Caching
• IIS Caching
• Nginx Caching

Sıkıştırmayı etkinleştirmek, web sitenizi bir zip dosyası haline getirmek gibidir.

Sıkıştırma, sayfanızın boyutunu önemli ölçüde azaltabilir ve böylece hızını artırabilir. Varvy'e göre, sıkıştırma HTML ve CSS dosyalarınızdan %50 - 70'i oranında tasarruf sağlayabilir! Bu, ziyaretçinin indirmesi gerekmeyen bi ton veri anlamına gelir.

Sıkıştırma bir sunucu ayarıdır, bu yüzden nasıl uyguladığınız web sunucunuza ve ayarlarına bağlıdır. Aşağıda en yaygın web sunucuları için bazı kaynaklar bulunmaktadır. Sizinkini göremiyorsanız, neler yapabileceğini görmek için hosting şirketinize başvurun.

• Apache
• IIS
• Nginx

Kullanıcılar sitenizi görmeden önce CSS'niz yüklenir. CSS'nizi indirmeleri ne kadar uzun sürerse, o kadar çok beklerler.

Optimize edilmiş CSS, dosyalarınızın daha hızlı indirileceği ve ziyaretçilerinizin sayfalarınıza daha hızlı erişebildiği anlamına gelir.

Kendinize sorarak başlayın, "Tüm CSS içeriği gerekli mi?" Değilse, dosyalarınızdaki gereksiz koddan kurtulun.

Ardından, CSS dosyalarınızı en aza indirmelisiniz. Stil sayfalarınızdaki ekstra alanlar dosya boyutunu artırır. CSS optimizasyonu, dosyanızın en küçük boyutta olduğundan emin olmak için bu fazladan boşlukları kodunuzdan kaldırır.

CSS dosyaları nasıl optimize edilir?

İlk olarak, CMS'inizin CSS'nizi optimize edip etmediğine veya bunun için bir seçenek olup olmadığına bakın. Örneğin, CSS dosyası Wordpress veya Joomla'da otomatik optimize edilmez.

CMS'niz CSS seçeneğini optimize etmiyorsa, dosyalarınızı optimize etmek için CSS Minifier gibi ücretsiz bir çevrimiçi hizmet kullanabilirsiniz. Sadece CSS'nize yapıştırın ve yeni optimize edilmiş stil sayfanızı görmek için “Sıkıştır” a basın.

Javascript dosyaları sayfanızın geri kalanından sonra yüklenebilir, ancak bunların hepsini içeriğinizden önce yerleştirdiğinizde (çoğu site gibi) içeriğiniz yüklenmeden önce yüklenir.

Bu, ziyaretçilerinizin, Javascript dosyalarının sayfa görünmeden önce yüklenmesini anlamına gelir ve site açılış hızını düşürür.

En basit çözüm, harici Javascript dosyalarınızı, sayfanızın alt kısmına, body etiketinizin kapanmasından hemen önce yerleştirmektir. Artık sitenizin geri kalanı, komut dosyalarınızdan önce yüklenebilir.

Daha fazla kontrole izin veren bir başka yöntem de sitenize harici .js dosyaları yerleştirilirken erteleme veya async özelliklerinin kullanılmasıdır.

Hem defer hem de async çok yararlıdır, ancak bunları kullanmadan önce farkı anladığınızdan emin olun:

• Async etiketleri sayfanın geri kalanı yüklenirken betikleri yükler, ancak bu komutların sırayla yüklenebileceği anlamına gelir. Temel olarak, daha önce açılmış dosyalar yüklenir.
• Defer özniteliği, içerikler yüklemeyi bitirdikten sonra komut dosyalarınızı yükler. Ayrıca komut dosyalarını sırayla çalıştırır. Sadece komut dosyalarınızın sitenizi bozmadan geç yüklenmesini sağlayın.

Tek yapmanız gereken script etiketlerinize basit bir kelime eklemek.

Komut dosyalarınızın önemi, bir özellik alıp almadığınıza ve hangisinin size ait olduğunu belirler. Daha önemli komut dosyalarının, async özelliğine sahip olması gerekir. Böylece, içeriğinizin geri kalanı yüklenmeden önce yükleyebilirler. Ancak, önemli olmayanlar, ziyaretçilerin sayfanızı daha hızlı görmesini sağlamak için sonuna kadar beklemelidir.

Ancak her zaman, özniteliğin sitenizi bozmadığından emin olmak için her bir komut dosyasını test ettiğinizden emin olun!

0

0

0

0

0

0