Web Sitenizin Açılış Hızını Arttırma

Web Sitenizin Açılış Hızını Arttırma

“Sabır bir erdemdir” atasözü çevrimiçi 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?

Sayfa Boyutu

Sayfanızı oluşturan kodu indirmek, tarayıcıların zamanını alır. HTML'nizi, stil sayfalarınızı, komut dosyalarınızı ve resimlerinizi indirmek 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 nasıl hızlandırabilirsiniz?

Sitenizin hızını analiz etmek için bazı harika kaynaklar var. Google'ın PageSpeed InsightsWebsite Grader ve GTMetrix en popüler olanlarıdır. Her iki 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. 

Hadi sitemizi hızlandırmayı öğrenelim!

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. 

1. Görüntüleri Optimize Edin
Görüntüler, web'deki en yaygın bant genişliği duraklarından biridir.

Görüntülerinizi optimize etmenin ilk yolu, bunları uygun şekilde ölçeklendirmektir.

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, 1000 x 1000 piksel boyutunda bir resminiz varsa, ancak 100 x 100 piksele düşürdüğünüzde, tarayıcınızın gerektiğinden on kat daha fazla yükleme yapmasını engelleyebilirsiniz. 

Görüntülerinizi sitenize yüklemeden önce ölçeklendirin, 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. Boyutu %25 ila %80 arasında bir azalma görebilirsiniz!

2. Tarayıcı Önbelleğe Alma
Ziyaretçiler, bir sayfayı her yüklediklerinde neden aynı şeyleri indiriyor?

Tarayıcı önbelleğe almayı etkinleştirmek, bir ziyaretçinin bilgisayarında bazı verileri geçici olarak saklamanıza olanak tanır, böylece sayfanızı her ziyaret ettiklerinde 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:

3. Sıkıştırma
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 kesebilir! Bu, ziyaretçinin indirmesi gerekmeyen bir ton veri.

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.

4. CSS'nizi Optimize Edin
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. Web sitenizin salyangoz hızı, sizi ziyaretçilerinizden uzaklaştırır.

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

Peki, CSS dosyalarınızı nasıl optimize edebilirsiniz?

İ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.

Kaynak dosyalarınızı en aza indirgemek, dosyalarınızı bir miktar küçültmenin harika bir yoludur.

5. Komut Dosyalarınızı Sayfanın Altında Tutun
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ızın sayfanızı görmeden önce yüklenmesini beklemesi gerektiği ve beklemekten ne kadar hoşlanmadıklarını bildiğimiz anlamına gelir.

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. Bu, bazı komut dosyaları için iyi olabilir, ancak diğerleri için felaket olabilir.
  • 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ç kalmasını sağlayın.

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

Örneğin, orijinal kodunuz bu olsun;

<script type=”text/javascript” src=”/path/filename.js”></script>

Ve istediğiniz zaman yüklendiğinden emin olmak için buna küçük bir kod ekleyin.

<script type=”text/javascript” src=”/path/filename.js” defer></script>
<script type=”text/javascript” src=”/path/filename.js” async></script>

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!

Sonuç

Çevrimiçi kullanıcılar daha zengin bir çevrimiçi deneyim istedikçe, sayfalarımızın büyüklüğü artmaya devam edecektir. Sitelerimizi düşürmek için flashier Javascript, daha fazla CSS hilesi ve daha fazla üçüncü taraf gerekli olacak.

Çok az bir ilgi uzun bir yol kat edecektir - unutmayın, bir saniyelik gecikme çok şey kaybetmek için gereken her şeydir.

Ogznet.com

Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!
Yorum Yaz


yenile

Bir reklam engelleyici kullandığınızı fark ettik

İçeriklerimiz, reklamverenlerimiz sayesinde size ücretsiz olarak sunuluyor. İçeriğimizin keyfini çıkarmaya devam etmek için lütfen reklam engelleyicinizi bu site için kapatın.

Reklam Engelleyiciyi Kapattım Bu uyarıyı kapat Reklam engelleyicimi nasıl devre dışı bırakabilirim?

Bu site için reklam engelleyicinizi nasıl devre dışı bırakabilirsiniz:

Adblock / Adblock Plus
  • Tarayıcınızın sağ üst köşesindeki AdBlock / AdBlock Plus simgesine tıklayın.
  • Aşağıdaki adreste reklamları engelle seçeneğini kapatın.
  • Değişiklikleri etkinleştirmek için Tazele butonuna tıklayın.
Firefox Reklam Engelleme
  • Firefox'ta Özel Tarama yapıyorsanız, "İzleme Koruması" devrede olduğu için adblock bildirimini kullanabilir. Adres çubuğundaki "Kalkan" simgesini tıklayarak geçici olarak devre dışı bırakılabilirsiniz.
  • Daha sonra bu yardım kutusunu kapatın.
Ghostery
  • Tarayıcınızdaki Ghostery simgesini tıklayın.
  • Ghostery 6.0 altındaki versiyonlarında "Beyaz liste", 6.0 versiyonunda "Güvenilir site" olarak işaretleyin.
  • Daha sonra bu yardım kutusunu kapatın.
uBlock / uBlock Origin
  • Tarayıcınızdaki Ublock / Ublock Origin simgesini tıklayın.
  • Geçerli web sitesini beyaz listeye alan menüde "power" düğmesine tıklayın.
  • Daha sonra bu yardım kutusunu kapatın.