Hız bir katildir.
Tüm tasarım, kopyalama, test ve strateji konuşmaları arasında, sitenizin performansını artırabilecek veya bozabilecek bir somun ve cıvata sorunu olduğunu unutmak kolaydır. Yük hızından bahsediyorum.
Yükleme hızı sandığınızdan çok daha önemli.
Bu bir sıralama faktörüdür:
Arama hızı yerleşimi açısından yük hızının etkisi şöyle görünür:
(Kaynak: https://ahrefs.com/blog/on-page-seo/)
Yavaş yer = alt konum. İdeal yük hızı, alabileceğiniz kadar sıfıra yakın: İlk 10 SERP bir saniyeden az.
Ziyaretçiler için de çok önemli.
Episerve, 2015 raporunda “Küresel olarak, yavaş yükleme süreleri modern mobil kullanıcıların en büyük hayal kırıklığı olarak kabul ediliyor” dedi. Ve mobil kullanıcılar artık web trafiğinin çoğunluğu.
Dönüşümler üzerindeki etki, SERP’ler için gözlemleyebileceğimizden çok daha sert ve çok daha keskin:
(Kaynak: https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/)
Dönüşüm oranı 2,4 saniyede zirve yapar; iki saniye ekleyin ve yarıya inin. Bir saniye ekleyin ve% 27 düşer.
Bu hala neden bir sorun? Daha hızlı geniş bant her zamankinden daha yaygın şekilde dağıtıldığında ve akıllı telefonlar daha hızlı ve daha güçlü hale geldiğinde, web sayfaları neden devam etmiyor??
Temel olarak, siteleri ek olarak hile, izleme çerezleri ve devasa görüntülerle paketlemek için bu ek bant genişliğini kullandığımızdan.
(Kaynak: https://www.cachefly.com/category/faster-websites/)
Görüntüler 2011’den bu yana 3 kat büyüyen ana suçlu, ancak senaryolar da büyük bir sıçrama yaptı. Saf bir HTML siteniz olsaydı, ABD’deki ortalama internet hızlarının 3 kat daha düşük olduğu 2011’deki ile aynı boyutta olurdu.
Ancak bunun yerine, sayfa yükleme hızı sadece kötü değil.
Kötüye gidiyor.
2014’teki verilere göre, e-ticaretteki web performansı yıllık ortalama% 23 oranında yavaşlıyor: e-ticaret sitelerinin birincil içeriklerini oluşturmaları yaklaşık 6,5 saniye sürdü..
Ortalama bir üst düzey web sitesinin yüklenmesi yaklaşık 9 saniye sürüyor.
(Kaynak: http://www.seochat.com/c/a/google-optimization-help/average-page-load-time-of-top-ranking-websites-in-google/)
(Bunlar tek tek sayfalar değil, tüm sitelerdir.)
Bunu kim etkiler?
Herkes. Sıçrama, tüm sektörlerde oldukça yüksektir ve kullanıcıların dönüşüm yapmamasını istediğimiz eylemleri gerçekleştirememesi de.
(Kaynak: https://conversionxl.com/guides/bounce-rate/seo-impact/)
Özellikle e-ticaret web siteleri yüksek sekme ve alışveriş sepetini terk ediyor.
(Kaynak: https://www.barilliance.com/measure-cart-abandonment/)
Alışveriş sepetini terk etme, 2012 zirvesinden yaklaşık% 72’ye düştü – ancak sadece% 69,23’e, oldukça küçük bir düşüş. E-ticaret web sitesi ziyaretçilerinin büyük çoğunluğu.
Yükleme süresi ile doğrudan ilişkilidir.
(Kaynak: https://bluestout.com/blog/how-to-reduce-mobile-ecommerce-bounce-rate/)
Sıçrama ne olacak?
E-ticaret hemen çıkma oranı, yük hızıyla da ilişkilidir. Bu e-ticaret sitesinin kullanıcıları ortalama% 44 oranında sıçradı. Bunları yük hızı deneyimine göre ayırın ve belirgin bir fark var:
(Kaynak: https://www.linkedin.com/pulse/how-load-time-affects-bounce-rate-across-devices-report-jack-maden)
Unutmayın, hızlı yükleyiciler burada “4 saniyenin altında” olarak tanımlandı! Hızlı ve yavaş yük grupları arasında masaüstünde% 24 sıçrama var.
İçerik web sitelerinde büyük sıçramalar yaşanıyor ve bunun yükleme hızı.
Hizmetler için olası satış yaratma siteleri de.
Sonuçta, sıçrama ve yük hızı arasındaki ilişki, endüstriler arasında aşağı yukarı böyle görünüyor:
(Kaynak: http://www.ironpaper.com/webintel/articles/web-design-statistics-2017/)
Contents
- 1 Düşük yük hızlarından etkileniyor musunuz??
- 2 Yavaş bir web sitesi nasıl hızlandırılır?
- 3 1: HTTP isteklerini en aza indirin
- 4 2: Sıkıştırmayı etkinleştir
- 5 3: Tarayıcı önbelleğini etkinleştir
- 6 4: Kaynakları küçültün
- 7 5: Görüntüleri optimize edin
- 8 6: CSS dağıtımını optimize edin
- 9 Sonuç
Düşük yük hızlarından etkileniyor musunuz??
Web sitenizin yavaş yük hızından etkilenip etkilenmediğini nasıl anlarsınız? Temel yük hızınızı kontrol ederek başlayın. Sitenizin ne kadar iyi performans gösterdiğini öğrenmek için Google’ın PageSpeed Insights aracını kullanabilirsiniz.
(Kaynak: https://developers.google.com/speed/pagespeed/insights/)
URL’nizi Google’ın aracıyla çalıştırın ve sitenizin ne kadar hızlı yüklendiğine dair verileri alırsınız ve hızlandırmak için hangi öğelerin iyileştirilebileceği hakkında öneriler alırsınız.
Sonucun masaüstü ve mobil cihazlar için önemli ölçüde farklı olabileceğini unutmayın:
Ancak Google’ın aracı, temelleri ele almak için kötü bir tek noktadan hizmet olmasa da, size göstermediği çok fazla şey var.
İşte sitenizde olup bitenlere derinlemesine dalmak için beş harika araç.
GTmetrix
Sitenizin önceliklerine göre derecelendirilen sorunlarının bir listesini sunar.
Sitenizin dünyada nasıl göründüğünü görmek için sunucunuzu kaydırabilir ve A’dan F’ye kadar derecelendirilmiş hem genel bir bakış hem de işlem yapılabilir bir liste elde edebilirsiniz..
Önce ne ile başa çıkacağınızı mı merak ediyorsunuz? Buradan başlayın.
2. Pingdom
Pingdom da size not veriyor. Ayrıca bir şelale analizi sunar, böylece neler olduğunu tam olarak görebilirsiniz.
Bu listedeki araçların çoğunun aksine, ücretsiz değil.
3: Dotcom monitör
Şelale analizi ve bir dizi farklı sunucu sunarak, ikisinin nasıl etkileşimde bulunduğunu görmenizi sağlar.
Dotcom-monitör sunucunuzu hareket ettirmek yerine aynı anda çeşitli sunucular kullanır.
4: Yük Etkisi
Load Impact, tarama senaryoları sunar ve içeriğinizi de analiz eder.
Ücretsiz, ancak bir hesap oluşturmanız gerekiyor ve bu listedeki diğer araçlarla karşılaştırıldığında, çok daha karmaşık.
5: Web sayfası
En iyisini sakladım. Webpagetest en çok kullandığım şey.
Arayüz 1996 yılında kötü bir şekilde, ancak işlevsellik hızlı, kolay erişilebilir ve doğru miktarda ayrıntı veriyor.
Şelaleler, içerik dökümü ve diğer birkaç araç, “sitem çok yavaş” tan gitmenize ve hangi öğelerin yükleme süresini emdiğini görsel olarak görmenize olanak tanır.
Sürpriz, sürpriz: görüntüler ve javascript.
Bu yüzden bir sürü farklı yük hızı metriği gördük. Soru, hangilerinin gerçekten önemli olduğu?
Hayati yük hızı metrikleri, müşterileriniz için gerçekten önemli olanlardır:
- Sayfanın görünür olma süresi
- Ne istediklerini bulma zamanı
- İstediklerini yapabilme zamanı
Bu, e-ticaret sitelerinin yük hızına çok duyarlı olmasının bir nedenidir. Yavaş, aksaklık ve sıçramalarla yüklenen bir grup görüntü ve düğme, yüklenmesi çok uzun süren tek, kötü tavsiye edilen süper bir görüntüden çok daha sinir bozucudur. Ve insanlar istedikleri konusunda karar vermek için e-ticaret sitelerine geliyorlar – bu yukarıdaki üç listenin hepsi, aynı anda oluyor.
Yavaş yüklenen bir siteyi nasıl düzeltiriz?
Yavaş bir web sitesi nasıl hızlandırılır?
1: HTTP isteklerini en aza indirin
Web sitenize her dosya yüklendiğinde, sunucunuzdan tarayıcıdan bir HTTP isteği gönderilir. İki bilgisayar konuşurken, işler yavaşlar. Yahoo, bunun yükleme süresinin% 80’ini oluşturabileceğini söylüyor.
Websitespeedtest’te istek raporunu görmek için şu adrese gidin: Test sonucu>ayrıntılar ve aşağı kaydırın; bu üçüncü rapor.
(Bu çok basitleştirilmiş bir açıklama: başlık altına daha fazla girmek istiyorsanız, Yoast’ın Jimmy Comack’in bu gönderisine göz atın.)
Web sayfanızın başka bir yerinde yüklenmesi gereken sayfa dışı kaynaklar ne kadar fazla olursa, o kadar çok HTTP isteği göndermesi gerekir ve o kadar yavaş yüklenir.
HTTP başlangıçta yalnızca eski istek bittiğinde yeni bir istek başlatacak şekilde yapılandırıldığı için bu durum daha da kötüleşir. İşleri hızlandırmak için artık eşzamansız istekler yapmak mümkün (hepsi birbirinin üstünde). Daha hızlı – ancak sayfanızın dağınık, kafa karıştırıcı bir şekilde yüklenmesi riski var. Unutmayın, soyut yükleme hızı metriklerini takip etmiyoruz. Ziyaretçilerin kendilerini yönlendirmelerini ve zıplamadan hızlı hareket etmelerini istiyoruz.
HTTP isteklerinin sayısını nasıl azaltabiliriz? Yüklenen kaynak sayısını azalttık.
Görüntülerle başlayın. Doğrudan sayfada yararlı bir şey yapmayan resimlerden kurtulun. Çok sayıda görüntüye sahip olmak iyi bir şeydir, ancak sadece uğruna oradalarsa, bunları kaldırmayı düşünün.
Video sırada. Kapsamlı video içeren bazı siteler, site yükleme süresine bir veya iki saniye ekleyebilir: bu, çoğu insanın bir varlık için harcanan tüm zamanı beklemek istediği zamandır. Gerçekten buna değer mi?
Javascript, görüntülerden sonra en büyük ikinci talep suçludur. Javascript eşzamansız olmalıdır, yani her şey aynı anda yüklenmelidir. Aksi takdirde, tarayıcınız Javascript’inize ulaştığında, JS yüklenene kadar sitedeki diğer her şeyi yüklemeyi durdurur. Eşzamansız hale getirin veya ondan tamamen kurtulun. Her ikisini de yapamıyorsanız, sayfanın en altına yerleştirin, böylece son yüklenir.
Son olarak, CSS. Her CSS dosyasının ayrı bir isteği vardır. Ancak tek bir CSS dosyası genellikle tüm CSS ihtiyaçlarınız için kullanılabilir, bu nedenle istek sayısını azaltmak için bunları tek bir dosyada birleştirin.
2: Sıkıştırmayı etkinleştir
Büyük sayfaların yüklenmesi uzun sürebilir. Ancak açık kaynak Gzip aracıyla bunları sıkıştırmak mümkündür.
Çoğu web sunucusu, dosyaları göndermeden önce .zip dosyalarına sıkıştırmak için Gzip’i kullanabilir. Aynı sayıda dosya indiriyor olabilirsiniz (henüz istek numaralarınızı kesmediyseniz), ancak aynı miktarda bilgiye sahip olmazsınız, böylece sayfalarınız daha hızlı yüklenir.
Yahoo: Gzip yükleme sürenizde% 70 indirim yapabilir.
Gzip’i etkinleştirmek için bu kodu .htaccess dosyanıza bırakın:
# metin, html, javascript, css, xml sıkıştır:
AddOutputFilterByType Metin / düz DEFLATE
AddOutputFilterByType Metni / html’yi DEFLATE
AddOutputFilterByType DEFLATE metin / xml
AddOutputFilterByType Metin / css DEFLATE
AddOutputFilterByType DEFLATE uygulama / xml
AddOutputFilterByType DEFLATE uygulama / xhtml + xml
AddOutputFilterByType DEFLATE uygulama / rss + xml
AddOutputFilterByType DEFLATE uygulama / javascript
AddOutputFilterByType DEFLATE uygulama / x-javascript
# Veya belirli dosya türlerini uzantısına göre sıkıştırın:
SetOutputFilter DEFLATE
3: Tarayıcı önbelleğini etkinleştir
Tarayıcı önbelleğe alma özelliği, bir ziyaretçinin web sitenizin bir sürümünü tarayıcılarında depolamasına olanak tanır. Ardından, sitenize geri döndüklerinde, sitenizi oluşturan dosyaların yalnızca çoğunluğunu açmak zorundalar, indirmezler.
Kulağa hoş geliyor, değil mi?
Google Analytics’e Genel Bakış raporunuza, geri dönenlere karşı yeni ziyaretçilere bir göz atın.
Yeni ziyaretçilerin önbellekleri boş olacak. Tarayıcı önbelleğe alma ile sitenizle ilgili deneyimlerini hızlandıramazsınız. Ancak geri dönen ziyaretçiler başka bir hikaye: bu ziyaretçiler için site yükleme süresinin çoğunu tıraş edebilirsiniz.
Geri dönen ziyaretçilerin oranının yüksek olması veya siteniz için önbelleğe alma işleminin yapılmasını istiyorsanız, işte size harika bir kaynak.
4: Kaynakları küçültün
Geleneksel geliştirici becerilerine veya hiç birine güvenmeyen birçok “web sitesi oluşturucu” harika görünümlü web siteleri oluşturabilir. Ancak kaputun altına gizleyin ve kod çok iyi görünmüyor. Şişirilmiş ve özensiz, sitenizi yavaşlatan bu olabilir.
Ne yapmalı?
Kodu kendiniz toplayabilirsiniz. Kodunuzdaki gereksiz satır sonlarını, girintileri ve boşlukları kaldırmak kodu hızlandırabilir.
Ama küçültmek daha da etkili.
İşte böyle görünüyor:
(Kaynak: https://www.wpmyweb.com/how-to/minify-html-css-javascript-autoptimize.html)
Bu örnekte, HTML’nin basit bir bölümü otomatik olarak gideceği ve çalışacağı en küçük ve en zayıf olana küçülmüştür. Bu süreçte, kodun% 11’i tıraş edildi.
Etkin bir şekilde küçültmek için öncelik verin: en fazla soruna neden olan kodla başlayın. Google’ın PageSpeed Insights sayfasına gidin ve sitenizin URL’sinde bir test yapın. “Olası optimizasyonlar” altında, CSS, HTML ve Javascript’i simge durumuna küçültme seçenekleri göreceksiniz.
Bu CSS öğelerini tek başına küçültmek önemli veri tasarrufu sağlayabilir.
Kodunuzu küçültmek için Minifycode.com gibi araçları kullanabilir, ardından HTML, CSS veya Java’nızdaki rahatsız edici kodu küçültülmüş sürümle değiştirebilirsiniz.
WordPress çalıştırıyorsanız, biraz ayar gerektirse de, tüm kodunuzu minimize eden bir Otomatik optimizasyon eklentisi var.
5: Görüntüleri optimize edin
Görüntüler, çoğu web sitesinin en bant genişliği emen öğeleridir. Tipik hatalar görüntüleri bant genişliğine aç biçimlerde veya çok büyük boyutlarda bırakmaktır. Bu görüntülerin yüklenmesi ne kadar sürdüğünü kontrol edin:
Mor çizgiler görüntülerdir. En büyüğü 2.09 saniye sürdü. Büyük sorun.
Görüntüleri optimize ederken konsantre olmanız gereken üç şey boyut, biçim ve src özelliğidir.
Görüntü boyutu
Büyük görüntüler bant genişliğini emer. Sayfanız 500 piksel genişliğinde ise, resimleriniz neden 2500 piksel genişliğindedir?
Bu ek boyut, sitenizin yükleme süresinde gereksiz bir yüktür.
Elbette, bu görüntü oluşturulduğunda sitede yeniden boyutlandırılacaktır – ancak tüm büyük dosya her seferinde de yüklenecektir. Görüntüleri yeniden boyutlandırma: bir resim düzenleme aracında sitenizin maksimum boyutlarına uyacak şekilde kırpın.
(Photoshop’unuz yoksa tarayıcı tabanlı ve ücretsiz Pixlr’ı deneyin.)
Görüntü formatı
En iyi görüntü biçimi .jng, .png saniyedir. (Tüm tarayıcılar .png resimleri oluşturmaz.) BMP’ler, TIFF’ler ve Gif’ler, bant genişliğini çılgın gibi emer.
Src özelliği
Src özelliği, tarayıcıya resmi nerede arayacağını söyler. HTML’de şöyle görünür:
Şuna benzeyen olanlar yok:
Bu, görüntü için tanımlanmış bir kaynak olmadığı anlamına gelir. Bu olduğunda, tarayıcı sayfanın kendisine istek göndererek, sayfanın yüklenmesine ilişkin veri yükünü ekleyerek aramaya başlar – ayrıca resminiz yüklenmez.
6: CSS dağıtımını optimize edin
CSS, tarayıcılara sayfanızdaki her bir öğenin neye benzemesi gerektiğini söyler. Harici veya satır içi olmak üzere iki şekilde yapabilirsiniz.
Harici CSS, sayfanızın başlığında şu şekilde görünür:
Sayfanızı oluşturmak için gereken tüm bilgiler (bu durumda Hubspot’un sayfası) CSS stil sayfasında.
Bu, HTML’yi arasına CSS bıraktığınız satır içi CSS ile yapmaktan çok daha iyidir. Stil sayfası kullanmak kodunuzun boyutunu azaltırken, yalnızca bir stil sayfası kullanmak istek sayısını azaltır ve böylece yükleme süresini kısaltır.
Sayfanızın kaç harici CSS sayfası kullandığını öğrenmek için Varvy’in CSS Dağıtım Aracı veya GiftofSpeed gibi bir araç kullanın.
GiftofSpeed, CSS dağıtımını optimize etmenize yardımcı olur, ancak bunu kendiniz yapmayı tercih ederseniz Varvy’nin talimatları vardır.
Son bir düşünce:
AMP ne olacak??
AMP’nin her şeyi süper hızlı yapması gerekiyor. Ve öyle. Ancak sizi CSS, HTML ve Java’nın soyulmuş bir sürümünü kullanmaya zorlayarak çalışır ve seçim için fazla yer kalmaz. Sizi yıldırım hızında olan ancak tüm URL’lerinizi Google ile değiştiren Google’ın içerik dağıtım ağına güvenmeye zorlar. AMP sayfasındaki formlar gibi basit şeyleri bile almak için oldukça çirkin olmalısınız.
Düzenli olarak haber yayınlıyorsanız, bu iyi bir seçim olabilir ve bazı insanlar bunu açılış sayfaları için kullanmanızı önerir. Ancak, temel web sitenizi hızlandırmanın bir yolu olarak, bu iş için yanlış araçtır.
Sonuç
Yavaş web sitesi yükleme hızı SEO ve dönüşümlerinizi aynı şekilde ezebilir. Çözüm, web sitenizin temel kodunu kesmek ve düzenlemekte yatıyor ve düzeltmelerin çoğu o kadar da karmaşık değil. Bir saniyenin kesirleri daha yüksek sıçrama, daha az satış ve potansiyel satış ile ölçülebildiğinde ve hatta SERP’leri etkilediğinde, şimdi bunları ele almak mantıklıdır.
En sevdiğiniz yükleme hızı düzeltmesini bıraktıysam veya bir şey eklemek istiyorsanız, yorumlarda iletişime geçin!