E-Ticaret Sitesi Hızı Nasıl Ölçülür ve İyileştirilir (11 İpucu) ve Dönüşüm Oranı Optimizasyonu için Neden Önemlidir?

Yavaş yüklenen web siteleri düşük sıralanır, daha az gelir sağlar ve çalıştırmanın maliyeti daha fazladır. Hangi işte olursanız olun, çevrimiçi bir varlığınız varsa, site hızınızı artırmak, hemen çıkma oranınızı azaltmak ve e-ticaret dönüşüm oranını artırmak için yapabileceğiniz en faydalı şeylerden biridir.

E-ticaret alanındaysanız, mümkün olan en yüksek site hızına ulaşmak için zaman ve kaynak ayırmanız daha da önemlidir. Araştırmalar, site hızının ürün sıralamalarını, dönüşümleri ve ziyaretçi başına değeri doğrudan ve önemli ölçüde etkilediğini gösteriyor.

Ancak birçok perakendeci, önemli değişiklikler yapma taahhüdünde bulunmak istemiyor. Site hızı optimizasyonu karmaşık görünebilir. Dikkat gerektiren birçok farklı alan vardır ve bunların çoğu, çoğu insanın sahip olmadığı belirli kodlama becerileri gerektirir.

Aynı şekilde hissediyorsanız, endişelenmeyin. Bu kılavuzda, görüntü sıkıştırmadan CDN'lere, sunucu tarafı veritabanı optimizasyonuna ve ötesine kadar bilmeniz gereken her şeyi ele alacağız. Temel bilgilerle başa çıkmanız gerektiğinde, site hızınızı doğrudan stratosfere gönderecek kadar kendinden emin ve bilgili hissedeceksiniz. Herhangi bir teknik geliştirme veya optimizasyon bilginiz olmasa bile.

Bu gönderide bulabilecekleriniz:

Site Hızı Nedir?
Site Hızı Neden Önemlidir?
Mevcut Site Hızınızı Nasıl Kontrol Edebilirsiniz: Google PageSpeed ​​Insights Sonuçları Açıklandı
Sayfa Hızını Artırmak için En İyi Veri Destekli Yöntemler
1. Barındırma Sağlayıcınızın Hızını Kontrol Edin ve İyileştirin
2. Görüntüleri Optimize Edin
3. Tarayıcı Önbelleğe Alma özelliğini etkinleştirin
4. HTML, JavaScript ve CSS'yi küçültün
5. AMP'den (Hızlandırılmış Mobil Sayfalar) ve PWA'lardan (Aşamalı Web Uygulamaları) Yararlanın
6. Düşük Performanslı WordPress Eklentilerini Öldürün
7. Bir İçerik Dağıtım Ağı Kullanın
8. Sunucu Yanıt Sürenizi Optimize Edin
9. Mümkün Olduğu Her Yerde Sıkıştırma Kullanın
10. Dosyaları Mümkün Olduğu Yerde Eşzamansız Olarak Yükleyin
11. Yönlendirmeleri Azaltın
Site Hızınızı Artırmanıza Yardımcı Olacak Araçlar
E-ticaret sitenizin hızını artırmaya hazır mısınız?

Kulağa iyi geliyor? O zaman kazalım!

Site Hızı Nedir?

Site hızı söz konusu olduğunda oldukça yaygın birkaç yanlış anlama vardır. Yazının özüne dalmadan önce, birkaç anahtar terimi tanımlayalım.

Öncelikle, "sayfa hızı" ve "site hızı" arasında ayrım yapmak önemlidir. Sayfa hızı, web sitenize belirli bir sayfanın yüklenmesi için geçen süredir. Site hızı, sitenizdeki bir sayfa örneğinin ortalama hızıdır.

Birçok yönden bu ayrım keyfidir, ancak herhangi bir karışıklığı önlemek için anlamaya değer. Bu gönderi, size hem sayfaya özel hem de site genelinde optimizasyon ipuçları sağlamayı amaçlamaktadır. En iyi sayfa uygulamalarını (ileride tüm sayfalarınızı nasıl tasarladığınızı bildirecek) uygulayarak, çok önemli bir metrik olan genel site hızınızı artıracaksınız.

Site hızı, sayfa yükleme süresi - bir sayfanın tam olarak oluşturulması için geçen süre - veya ilk bayta kadar geçen süre - bir tarayıcının bir sunucudan ilk veri baytını alması için geçen süre cinsinden ölçülebilir. Genel olarak konuşursak, sayfa yükleme süresi (ve benzer varyasyonlar) daha doğru ve yaygın olarak kullanılan ölçüdür, ancak ilk bayta kalan süre de belirli bağlamlarda faydalı bir rakamdır.

Site Hızı Neden Önemlidir?

Site hızı, web sitenizi arama sıralamaları, katılım, dönüşümler ve daha fazlasıyla ilgili birçok önemli şekilde etkiler. Ancak birçok web yöneticisi, aralarında e-ticaret perakendecileri, sitelerinin bu hayati yönünü gözden kaçırıyor.

Yavaş bir yükleme süresi, kârlılığınız üzerinde doğrudan bir etkiye sahiptir. Kaynak

Site hızınızı artırmak, rekabet avantajı elde etmenin en kesin yollarından biridir. Neden bu kadar önemli olduğuna kısaca bir göz atalım:

Site Hızı Arama Sıralamalarını Etkiler

Site hızı, Google için önemli bir sıralama faktörüdür. Google'ın kendisi bunu birçok kez yineledi. Ve sayısız bağımsız analiz, SEO söz konusu olduğunda site hızının optimizasyon için en önemli alanlardan biri olduğunu doğrulamaktadır.

Yoast için yazan Edwin Toonen'in dediği gibi: “Çok dikkatli dinlemenize bile gerek yok çünkü SEO çalışanları bunu çatılardan haykırıyor: site hızı her şeydir. Hız için optimizasyonun şu anda yapabileceğiniz en önemli şeylerden biri olduğunu söyleyen yeni bir makale, teknik inceleme, Google temsilcisi veya SEO uzmanı olmadan bir gün geçmiyor. Ve elbette haklılar!”

Site Hızı Hemen Çıkma Oranını Etkiler

Yüklenmesi uzun zaman alırsa, insanların sitenizden ayrılma olasılığı daha yüksektir. Bu etkinlik yalnızca Google için olumsuz bir sinyal olmakla kalmaz (düşük müşteri katılımını gösterir), aynı zamanda dönüşüm oranınızı da doğrudan etkiler.

Müşteriler sitenizin yüklenmesi çok uzun sürdüğü için siteye bağlı kalmıyorlarsa, harika, dönüşüm açısından optimize edilmiş sayfanızı ve mükemmel ürünlerinizi görme şansları olmaz.

Site Hızı Müşteri Değerini Etkiler

Araştırmalar, sayfa görüntüleme başına değerin site hızıyla birlikte arttığını gösteriyor. Ve burada sadece birkaç puandan bahsetmiyoruz. Site yükleme sürenizi bir saniyeye indirmek, sayfa görüntüleme başına değerinizi %100'e kadar artırabilir.

Site hızınızı yüzde birin altına düşürmek, sayfa görüntüleme başına değeri %100'e kadar artırabilir. Kaynak

Düşük Site Hızının Yaşanması Olumsuz Psikolojik Etkilere Sahiptir

Yavaş yüklenen bir web sitesi, müşteriler için hayal kırıklığına yol açar ve sizin açınızdan profesyonellik eksikliğini bildirir.

Bir sayfanın yüklenmesi çok uzun sürdüğünde insanlar somut stres hissederler. Ve müstakbel bir müşteri, markanızı bu olumsuz deneyimle ilişkilendirdiğinde, gelecekte bunu kötü bir şekilde değerlendirmeleri daha olasıdır.

Tersine, hızlı yüklenen bir site, müşterilere olumlu bir kullanıcı deneyimi sağlar (bu 11 UX ipucuna göz atın!) ve mağazanızın profesyonelliğini ve kalitesini bildirir.

Mevcut Site Hızınızı Nasıl Kontrol Edebilirsiniz: Google PageSpeed ​​Insights Sonuçları Açıklandı

Site hızınızı test etmek için kullanılabilecek çok sayıda araç vardır. Bazıları, DNS sağlayıcınızın hızı veya ilk bayta ulaşma süreniz (TTFB) gibi belirli alanlara odaklanırken, diğerleri daha kapsamlıdır. Başlangıç ​​noktası olarak, Google PageSpeed ​​Insights'tan daha iyi bir seçenek yoktur.

Sitenize tam bir tıbbi durumu nasıl vereceğiniz ve sonuçların ne anlama geldiği aşağıda açıklanmıştır:

1. Google PageSpeed ​​Insights'a gidin ve URL'nizi metin çubuğuna yazın. Sonuçlarınızı almak için “Analiz Et”e basın. Bu incelemede, örnek olarak Zappos'u kullanacağız. Muhtemelen site hızını test etmek için mevcut en iyi araç olan Google PageInsights, tamamen ücretsiz ve çok kapsamlıdır.

2. Sayfanın üst kısmında yer alan ve sayfanızı yavaş, ortalama veya orta olarak sıralayan genel bir sonucun yanı sıra, hem mobil hem de masaüstü için üç sonuç kümesi sunulur:

• Alan Verileri – Bu, geçmiş verilere dayanır ve Google tarafından izlenen bir kullanıcı örneğinden elde edilir. Yalnızca belirli bir test durumunda değil, geçmişte ortaya çıkmış olabilecek kalıcı sorunları görmenize olanak sağladığı için yararlıdır. Altındaki çok renkli çubuk, sayfanızın Chrome Kullanıcı Deneyimi Raporu'ndaki (Google'ın hakkında veri tuttuğu tüm sayfalar) diğer sayfalarla nasıl karşılaştırıldığını gösterir.
• Menşe Özeti (otomatik olarak gösterilmez) – Genişletmek için tıklamanız gereken menşe özeti, bir bütün olarak sitenizin ortalama verilerini gösterir (tek bir sayfa değil). "Origin", temel URL'yi ifade eder.
• Laboratuvar Verileri – Bunlar, “Analiz Et”i tıkladığınızda performansına dayalı olarak web sayfanızın anlık sonuçlarıdır. Bunlar, başka herhangi bir veri dikkate alınmadan anlık performanstan elde edilen güncel sonuçlardır. Sayfanın üst kısmındaki genel site hızı puanınız bu laboratuvar verilerine dayanmaktadır.

"Lab Verileri" bölümü, site hızı ölçümlerinin en ayrıntılı incelemesine sahiptir.

3. Farklı verileri gösteren biri mobil diğeri masaüstü için olmak üzere iki sekme (başlıktaki mavi menü) olduğunu unutmayın. Genellikle her biri ile ilişkili optimizasyon önerilerini ayrı ayrı uygulamanız gerekecektir.

4. Bölümlerin her birinde, “Lab Verileri” bölümünde beş ayrı önlemle birlikte iki temel hız ölçüsü (FCP ve FID) vardır:

• First Contentful Paint FCP – Bir web performansı bağlamında, "ilk boyama" terimi, bir tarayıcı kullanıcısı tarafından görülebilen ilk web öğesi anlamına gelir. “İlk içerikli boyama”, ilk uyumlu içerik parçasının göründüğü zamandır. Buradaki "içerik" tanımı, belge nesne modelinde ayrı olarak tanımlanan herhangi bir şeydir - esas olarak, bir resim veya metin bloğu gibi sayfanın hiyerarşisinin bir parçasını oluşturan bireysel ve ayrı bir öğedir. Bir içerik parçası, web kullanıcılarının "tüketebileceği" herhangi bir şeydir. Bu şekilde, arka plan değişikliği veya tek piksel kadar basit bir şey olabilecek “ilk boyamadan” ayırt edilir.
• İlk Giriş Gecikmesi (FID) – İlk giriş gecikmesi, sitenizin ne kadar hızlı yanıt verdiğinin bir ölçüsüdür. Bir ziyaretçi bir bağlantıya tıklayarak, bir resmi büyüterek, bir ürün seçeneği belirleyerek vb. sitenizle etkileşim kurduğunda, etkileşimli site öğelerini etkin bir şekilde "devre dışı bırakan" arka plan tarayıcı işlemleri nedeniyle yanıt almak biraz fazla zaman alabilir. FID, Google tarafından toplanan gerçek kullanıcı verilerine dayanmaktadır, bu nedenle Laboratuvar Verilerine dahil edilmez.
• İlk Anlamlı Boyama – Esasen, izleyicilerin gerçekçi bir şekilde içerik tüketmeye ne zaman başlayabileceklerinin bir ölçüsü. İlk anlamlı boyama, ekranın üst kısmındaki ana içerik ve web yazı tipleri yüklendiğinde meydana geldi. Google, site hızı için birincil kullanıcı deneyimi metriği olduğunu belirtti.
• Hız İndeksi – Sayfanızın görsel anlamda tam olarak yüklenmesi için geçen süre. Tarayıcı oluşturma işleminin kare kare karşılaştırmada değişmeyi bıraktığı zamana dayanır.
• İlk CPU Boşta - İlk CPU boşta, bir web sitesinin en azından bir dereceye kadar etkileşimli olduğu zamanı belirtir. Etkileşimli öğelerin tümü kullanıma hazır olmayabilir, ancak birkaçı hazır olacaktır.
• Etkileşim Süresi – Sitenin tamamen yüklenmesi ve tamamen etkileşimli olması, herhangi bir ziyaretçi eylemine yanıt vermeye hazır olması için geçen süre.
• Maks. Potansiyel İlk Giriş Gecikmesi – Test edilecekse mümkün olan en yüksek FID için tahmin edilen rakam. Bu rakam gerçek verilere değil, laboratuvar verilerine dayanmaktadır.

5. Bu üç bölümün altında "fırsatlar" başlıklı bir bölüm ve bunların site hızınızı ne kadar azaltabilecekleri yer alır. Bu, testin gerçek özüdür – site hızını artırmak için pratik öneriler. Uygulama talimatları için her öneriyi genişletebilirsiniz.

Aşağıdaki ekran görüntüsünden birkaç örneğe bakalım (bunların çoğuna aşağıdaki bölümde daha ayrıntılı olarak bakacağız):

"Fırsatlar" bölümü, sitenizin hızını artırmak için size somut önerilerin sunulduğu yerdir.

• JavaScript'i Küçült – Küçültme, sunuculardan tarayıcılara daha hızlı aktarılabilmesi için kod (HTML, CSS, JavaScript vb.) içeren dosyaları sıkıştırma işlemidir.
• Ekran dışı görüntüleri ertele – Ekran dışı görüntüleri erteleme, ekranın üst kısmında olmayan görüntülerin yükleme süresinin geciktirilmesini, ilk sunucu isteğinin boyutunun azaltılmasını ve daha hızlı bir toplam ilk yükleme süresinin sağlanmasını içerir. Ekranın üst kısmındaki tüm resimler yüklendikten sonra, sayfanın geri kalan resimleri oluşturulacaktır.
• Kullanılmayan CSS'yi kaldırın – .css stil sayfalarının büyük miktarlarda gereksiz kod içermesi çok yaygındır. Bu kodun kaldırılması CSS dosya boyutunu azaltabilir. Tüm CSS'leri tek bir dosyaya dahil etmek, bir tarayıcının verileri yorumlaması için gereken süreyi de azaltabilir.
• Görüntüleri yeni nesil biçimlerde sunun – JPEG 2000, JPEG XR ve WebP gibi görüntü biçimleri (bazılarıyla birlikte), kaliteden ödün vermeden alternatiflerden daha iyi sıkıştırma sağlar.
• Sunucu yanıt süresini (TTFB) azaltın – Sunucu yanıt süresi, CMS'nizi optimize etmek ve daha hızlı bir barındırma sağlayıcısı seçmek de dahil olmak üzere çeşitli şekillerde hızlandırılabilir.
• Metin sıkıştırmayı etkinleştir – Sunucunuzda gzip işlevini etkinleştirdiğinizde, dosyalardaki metin sıkıştırılır, boyutları küçülür ve aktarımı hızlandırır. Sıkıştırılmış dosyalar daha sonra tarayıcı tarafından işlenebilir.

6. Son olarak, “fırsatlar” bölümünün altında “teşhis” ve geçen denetimler bölümü bulunur. Bunlar, (sırasıyla) en iyi web uygulamalarına ve geçtiğiniz ölçütlere dayalı olarak daha fazla hızlandırma fırsatlarını kapsar.

Sonraki bölümlerde, hangi denetimleri geçtiğiniz (bir değişikliğin doğru şekilde uygulanıp uygulanmadığını kontrol etmek için harika) ile birlikte site hızını artırmak için daha da fazla öneri görebilirsiniz.

Google PageSpeed ​​Insights, tüm özellikleri ve önerileri hakkında öğretici ve net belgelere sahiptir ve daha fazla belirsizliğiniz varsa harika bir kaynaktır.

Bunun gibi daha fazla içgörü ister misiniz?

Haftalık e-ticaret ipuçlarını, stratejilerini ve önde gelen sektör bilgilerini alın.Doğrudan gelen kutunuza teslim edilir.

on Gizlilik politikasını okudum ve haber bülteni hüküm ve koşullarını kabul ediyorum.

Devam etmek için lütfen bu onay kutusunu seçin

Woohoo! Az önce kaydoldunuz. Aboneliği onaylamak için gelen kutunuzu kontrol edin.

Peki ya Diğer Araçlar?

Tüm özellikleri için PageSpeed ​​Insights kusursuz değildir.

Tökezlediği bir alan coğrafi alanla ilgilidir. Test sunucusunun konumu bilinmiyor, bu nedenle sonuçlar tek tip olmayabilir. Örneğin, sunucunuz Birleşik Krallık'taysa ve test sunucusu ABD'nin batı kıyısındaysa, sitenizi eski ülkede ziyaret eden biri için sonuçlar daha hızlı olacaktır.

PageSpeed ​​Insights tarafından sağlanan resmi desteklemek için her ikisi de test sunucusunun konumunu ayarlamanıza izin veren Pingdom ve GTmetrix'i kullanın.

Sayfa Hızını Artırmak için En İyi Veri Destekli Yöntemler

Tamam, o halde bazı pratik ipuçlarını inceleyelim.

Sitenizin göz açıp kapayıncaya kadar yüklenmesini sağlamak için atabileceğiniz ilk on adım:

1. Barındırma Sağlayıcınızın Hızını Kontrol Edin ve İyileştirin

Kısa Versiyon: Sunucularınızda yapabileceğiniz olumlu değişiklikler olsa da ve paylaşılan bir plandan özel bir plana geçmek faydalı olabilir, ancak bazen sağlayıcıyı değiştirmeniz yeterlidir. Kontrolünüz altındaki görevlere geçmeden önce, hizmet sağlayıcınızdan hizmetin kalitesini kontrol edin.

Barındırma sağlayıcınızın sunucuları yavaşsa, sorunun üstesinden gelmek için yapabileceğiniz çok az şey vardır. Kaynak

Web sitesi barındırma sunucunuzun hızını test etmek ve diğer şirketlerle karşılaştırmak için Bitcatcha gibi bir araç kullanın.

Barındırma sağlayıcınız yavaşsa, bu konuda yapabileceğiniz pek bir şey yoktur. Yeni bir sağlayıcıya geçmeyi düşünmeniz gerekebilir. Bir çevrimiçi mağaza işletiyorsanız, e-ticaret deneyimine sahip özel veya yönetilen bir barındırma sağlayıcısına geçmek genellikle yararlıdır.

Hız açısından barındırma planları arasındaki temel farklar şunlardır:

• Paylaşımlı hosting – Paylaşımlı hosting en ucuz ve en yavaş hosting şeklidir. Web siteniz, diğer kullanıcıların web siteleri ile birlikte bir sunucuda saklanacaktır. Böyle bir düzenlemenin en büyük dezavantajı, tüm sunucu kaynaklarının, özellikle CPU ve RAM'in de paylaşılacak olmasıdır. Bu, site hızını olumsuz yönde etkileyebilir ve çok fazla işlem gücü gerektiren daha büyük siteler için özellikle olumsuz sonuçlar doğurabilir.
• Sanal Özel Sunucu (VPS) – Sanal bir özel sunucu, birçok yönden paylaşılan bir sunucuya benzer. Tek bir sunucuda birden fazla site barındırılır, ancak sanal bir bariyerle ayrılırlar, aslında kendi sunucunuza sahip olmanın nasıl bir şey olacağını yeniden yaratırlar. Bunun ana yararı, tüm sunucu kaynaklarınızın çitle çevrili olmasıdır - ev arkadaşlarınızdan birinin tüm sıcak suyu kullanma ve sizi yüksek ve kuru bırakma şansı yoktur. Sanal özel sunucular ayrıca, sunucunun yöneticisi üzerinde size daha yüksek derecede özgürlük sağlar. Ayrıca, daha fazla alana ihtiyacınız varsa, satın alabilirsiniz.
• Özel barındırma - Özel barındırma, VPS barındırmadan sonraki adımdır. Özel bir planla, yalnızca sitenizi çalıştırmak için kullanılacak sunucuyu kiralayacaksınız. Ayrıca, teknik sunucu-site hız optimizasyonlarını mümkün kılan tam yönetici ve kök denetimine (işletim sistemi ve güvenlik ayarları seçimi dahil) sahip olacaksınız. Özel barındırma, daha büyük siteler ve özel teknoloji ekipleri olan şirketler için idealdir.

Genel olarak konuşursak, bir e-ticaret sitesi işletiyorsanız, özel veya VPS barındırmayı tercih etmek isteyeceksiniz.

Çevrimiçi perakendeciler için en yüksek puan alan sağlayıcılardan birkaçı:

SiteGround – SiteGround, Magento, WooCommerce ve PrestaShop dahil olmak üzere e-ticaret platformları için bir dizi özel plana sahiptir.

Liquid Web – Liquid Web'in temel önermelerinden biri üstün müşteri hizmetidir. Şirket, danışmanlara genellikle bir dakikadan kısa yanıt süresiyle 7/24 erişim sağlar. Bir dizi e-ticarete özel plan sunulmaktadır (WooCommerce için özel barındırma dahil) ve gelecekte ölçeklenmeyi bekleyen küçük ve orta ölçekli perakendeciler için harika bir seçenektir.

InMotion Barındırma – InMotion, e-ticaret perakendecileri arasında çok popülerdir ve mevcut en uygun fiyatlı seçeneklerden biridir.

Rackspace – Rackspace, kurumsal e-ticaret için önde gelen çözümlerden biridir ve bir dizi özel ve bulutta barındırılan çözüm sunar. Müşteri hizmetleri ve güvenlik altyapısı sektördeki en iyiler arasındadır.

Barındırma sağlayıcınızdan eksik etmeyin. Sizin kontrolünüz altında olmayan tek alandır. Ve maliyete performansa öncelik vermek, uzun vadede yalnızca daha düşük getirilere yol açacaktır.

2. Görüntüleri Optimize Edin

Kısa Versiyon: Görüntüleri optimize etmek, site hızını artırmanın en kolay ve en hızlı yollarından biridir. Görüntülerin web için uygun bir biçimde olduğundan emin olun. Daha hızlı resim yükleme süreleri için CSS hareketli grafiklerini kullanın.

Site hızı söz konusu olduğunda görseller en büyük suçludur. Gereksiz yere büyük olan görüntü dosyaları sunucu alanını gereksiz yere kaplar ve ziyaretçinin tarayıcılarına göndermek için daha fazla zaman gerektirir.

Görüntülerin kalitesi üzerinde tam kontrol sağlamak için görüntüleri PhotoShop veya GIMP gibi bir programda optimize etmelisiniz. Farklı biçimler, farklı görüntü türleri için en iyi sonucu verir. Genel olarak konuşursak, örneğin, JPEG'ler fotoğraflar için idealdir, stok renklere sahip daha basit görüntüler PNG'ler olarak daha hızlı oluşturulur.

İşte en yaygın biçimlerin ve bunların ne zaman kullanılacağının kısa bir özeti:

• JPEG (Joint Photographics Expert Group) – JPEG, muhtemelen yüksek kaliteli fotoğraflar ve ayrıntılı zengin görüntüler için en yaygın kullanılan formattır. Başlıca faydası, JPEG görüntülerin yüksek düzeyde sıkıştırma sağlarken iyi işlenmesidir. Fotoğraflar için JPEG tercih edilen seçenektir. Daha da yüksek sıkıştırma seviyeleri sunabilen JPEG 2000 ve JPEG XR gibi daha yeni JPEG türevlerini kullanmayı da düşünmelisiniz.
• PNG (Taşınabilir Ağ Grafikleri) – Bir biçim olarak PNG, JPEG ve GIF arasında yer alır. Geniş bir renk ve boyut yelpazesini destekleyerek kalite arasında iyi bir denge kurar. PNG'ler, JPEG'lerden daha küçük olma eğilimindedir, ancak renk ve ayrıntı açısından aynı kapasiteye sahip değildir. Eski tarayıcılarla uyumluluk konusunda endişeler vardı ancak bunlar artık büyük ölçüde gereksiz.
• GIF (Grafik Değişim Biçimi) – GIF'ler (web'deki en eski biçimlerden biri), logolar gibi sınırlı renk paletlerine sahip görüntüler için en iyi sonucu verir. Esas olarak metinden oluşan bir resim yüklemeniz gerekiyorsa, tercih edilecek biçim GIF'dir. GIF dosyalarının ana yararı, oldukça küçük olma eğiliminde olmalarıdır. Sınırlı renk kapasitesi nedeniyle GIF'ler zengin görüntüler veya fotoğraflar için kullanılmamalıdır. Temel animasyonlar için GIF'leri de kullanabilirsiniz. Zengin medya için GIF kullanmayın. Üçüncü taraflarca barındırılan içeriğin (YouTube gibi) kullanılması site hızı için daha faydalı olacaktır.

Doğru biçimi kullanmanın yanı sıra, site hızı için görüntüleri optimize etmek için yapabileceğiniz birkaç şey daha var:

• Görüntüleri olması gerekenden daha büyük yapmayın – Birçok tasarımcı ve geliştirici, sunucularına büyük görüntüler (genellikle birkaç bin pikselden fazla) yükleme hatasına düşer ve ardından bunları sayfa kodunu kullanarak yeniden boyutlandırır. Bu büyük bir hata. Bir ürün sayfasında yalnızca 1000 pikselde görüntülenecekse, ziyaretçilerinizin tarayıcılarına 5.000 piksel genişliğinde bir resim göndermenin kesinlikle hiçbir anlamı yoktur. Çoğu zaman, yakınlaştırma işlevini etkinleştirmek için görüntülerin nispeten büyük olması gerekir, ancak onları mümkün olduğunca küçük tutun. Resimleri yüklemeden önce yeniden boyutlandırın.
• Resimleri yüklemeden önce sıkıştırın – Sıkıştırma, resim dosyalarınızdaki tüm gereksiz bilgileri kaldırır, böylece boyutları küçülür. Bir görüntünün çekildiği saat gibi belirli "görünmez" ayrıntılar dosyaya gömülebilir. TinyPNG, JPEG Optimizer gibi araçlar ve WPSmush gibi eklentiler bu görevi hızlı bir şekilde gerçekleştirmek için kullanılabilir. Yoğun kullanım için gerekli olan ücretli planların tamamı oldukça makuldür.
• Sayfalarda gereksiz görseller kullanmayın – Her görsel sitenizi tam olarak yüklemek için gereken süreyi zorlar, bu nedenle kesinlikle gerekenden daha fazla görsel kullanmayın. Sırf bunun iyiliği için görüntüleri dahil etme tuzağına düşmek kolaydır. Bir ürün atışı daha incitmez, değil mi? Ancak ürün sayfaları oluştururken gereksiz resimleri ortadan kaldırmak iyi bir uygulamadır (harika ürün sayfası şablonlarına göz atın). Ayrıca, ekranın üst kısmındaki görüntüleri (sayfadaki tüm görüntüleri aynı anda kullanmak yerine) önce oluşturmak için "geç yükleme" özelliğini kullanmak isteyebilirsiniz. HTML kodunda "geç yükleme" olarak ayarladığınız resimler, yalnızca sayfanın üst kısmındaki bilgiler ziyaretçiler tarafından görüldükten sonra veya bir ziyaretçi kaydırmaya başladığında yüklenir.

Son olarak, uygun olduğunda görüntüleri sunucunuza CSS sprite olarak yükleyin. CSS sprite'ları, tek bir dosyada birleştirilen birden çok görüntünün koleksiyonlarıdır. Bir sunucudan görüntüleri tek tek yüklemek yerine, bir tarayıcı tek bir görüntünün eşdeğerini indirebilir, böylece birden fazla sunucu isteğine olan ihtiyacı ortadan kaldırabilir. Daha sonra, gerektiğinde sayfa kodunu yalnızca belirli bir resmi gösterecek şekilde uyarlamak mümkündür. Bu tekniği ürün görsellerinden CTA (harekete geçirici mesaj) düğmelerine ve sosyal medya simgelerine kadar her şey için kullanabilirsiniz.

3. Tarayıcı Önbelleğe Alma özelliğini etkinleştirin

Kısa Versiyon: Kullanıcılar geri döndüğünde tarayıcılardan site dosyalarınızı kaydetmelerini ve yeniden kullanmalarını “isteyin”. Bunu yapmak, sizin tarafınızdan neredeyse hiçbir girdi olmadan tekrar eden ziyaretçiler için sayfa yükleme sürelerini azaltır.

Tarayıcı önbelleğe alma, bir tarayıcı sitenizi oluşturan önemli dosyaları depoladığında gerçekleşir. Bu , bir ziyaretçi sitenize döndüğünde, tarayıcısının her dosyayı doğrudan sunucularınızdan alması gerekmediği anlamına gelir . Yalnızca güncellenmiş olması muhtemel belirli dosyaları, hatta tek tek sayfaların belirli bölümlerini (logo resmi gibi) istemesi gerekir. Bu, sunucuya yapılan isteklerin sayısını azalttığı için yükleme sürelerini önemli ölçüde artırır.

Önbelleğe almayı etkinleştirmek oldukça basit bir işlemdir ve belirli dosyalar için sona erme süreleri ayarlamak üzere HTTP başlıklarınıza az miktarda kod eklemeyi içerir. Siteniz WordPress'te barındırılıyorsa, bu işlemi kolaylaştırmak için W3 Total Cache gibi çok sayıda eklenti vardır.

Sayfalar genellikle fiyat, stok seviyeleri, incelemeler, teslimat bilgileri vb. ile ilgili zamana duyarlı güncellemelere tabi olduğundan, tarayıcı önbelleğe alma çevrimiçi perakendeciler için biraz zor olabilir. Bu nedenle, gerçekten kararlı içerik depolayan dosyalar (CSS stilleri, logo, gezinme vb.) ile değişebilecek içerik parçaları arasında ayrım yapmak önemlidir . Daha sonra buna göre kod yazabilirsiniz. Unutmayın, üstbilgiler ve altbilgiler gibi belirli sayfa öğelerinin yanı sıra zamana duyarlı olmayan daha büyük dosyalar (CSS stil sayfaları gibi) kodlamak tamamen mümkündür ve yalnızca bunlar için önbelleğe almayı etkinleştirmenin bile site hızı üzerinde olumlu bir etkisi olacaktır.

4. HTML, JavaScript ve CSS'yi küçültün

Kısa Versiyon: Otomatik küçültmeyi etkinleştirmek ve dosya boyutlarınızı %60'a kadar azaltmak için bir CDN (içerik dağıtım ağı) kullanın. Bir CDN kurmak, CloudFlare ve Amazon AWS gibi iyi bilinen hizmetler tarafından mümkün kılınan nispeten basit bir işlemdir.

Minification, web dosyalarınızdaki kodu en aza indirme işlemidir. Site yükleme sürelerini önemli ölçüde azalttığı gösterilmiştir. Daha küçük dosyalar daha hızlı istenebilir ve ardından tarayıcı tarafından yorumlanabilir. Bu optimizasyon stratejisi genellikle sayfa hızı araçları tarafından vurgulanır ve uygulayabileceğiniz en etkili stratejilerden biridir.

Uzunluk ve karmaşıklık bakımından geliştiriciler tarafından anlaşılabilir (genellikle yorumlar, boşluklar, virgüller ve daha fazlasını içerir) ve bir tarayıcının bir sayfayı oluşturması için gereken minimum kod türü nedeniyle çalışır. Bazen bu indirgenmiş sürüm, orijinal sürümün %40'ı kadar küçük olabilir.

Küçültme, web dosyalarının boyutunu önemli ölçüde azaltabilir. Kaynak

Ama önemli bir sorun var. Manuel küçültme büyük bir hayır-hayır. Çok fazla zaman alıyor ve hatalar için çok fazla alan var. Otomatik araçlarla bile, tüm alternatif kodları işlemek ve uygulamak için geliştirme aşamasında yüksek düzeyde manuel giriş gerekir.

Bunun yerine, en iyi seçenek, kodu bir tarayıcıya teslim etmeden önce otomatik olarak küçültecek bir CDN (içerik dağıtım ağı) kullanmaktır. Orijinal dosyalar kendi sunucunuzda tutulacak, küçültülmüş sürümler ise CDN sunucularında saklanacaktır. Sayfalarda her değişiklik yaptığınızda, bunlar CDN sunucularıyla senkronize edilir. CDN'ler ayrıca çeşitli başka nedenlerle de faydalıdır, ancak bunlara daha sonra geleceğiz.

5. AMP'den (Hızlandırılmış Mobil Sayfalar) ve PWA'lardan (Aşamalı Web Uygulamaları) Yararlanın

Kısa Versiyon: Her ikisi de Google tarafından geliştirilen AMP'ler ve PWA'lar, mobil sayfalarınızın yüklenme hızını önemli ölçüde artırabilir. Büyük bir geliştirme maliyeti vardır, bu nedenle PWA'lara veya AMP'lere geçiş, diğer olumlu faktörlerin (eğer istekliyseniz) ışığında ele alınmalıdır. Devam etmeye karar verirseniz, sitenizin hızı üzerindeki etkiler önemli olabilir.

Mobil sayfalarınızı AMP'lere dönüştürmek büyük bir iş olabilir ve bu herkes için değildir. Ancak daha uzun vadeli bir strateji olarak kesinlikle keşfedilmeye değer.

AMP'ler ve PWA'lar tam olarak nedir? İşte hızlı bir genel bakış:

• Hızlandırılmış Mobil Sayfa (AMP) – AMP, bir HTML alt kümesinden (AMP HTML), bir JavaScript çerçevesinden ve isteğe bağlı bir CDN'den (içerik dağıtım ağı) oluşan bir geliştirme çerçevesidir. hız optimizasyonuna önemli kaynaklar yatırmaya gerek kalmadan hızlı mobil sayfalar. AMP başlangıçta içerik tabanlı siteler için geliştirilmiş olsa da (birçok haber sayfasının arama sonuçlarında küçük şimşek okunu görebilirsiniz), çevrimiçi perakendeciler arasında giderek daha popüler hale geliyor.
• Aşamalı Web Uygulaması (PWA) – PWA'lar, bir mobil tarayıcı aracılığıyla erişilen mobil uygulamalar gibidir. Mobil ana ekrandaki bir simge aracılığıyla erişim ve anlık bildirimler gibi uygulamaların birçok özelliğini çoğaltırlar, ancak özel bir yazılım parçası oluşturmaya veya kullanıcıların telefonlarına herhangi bir şey yüklemelerine gerek kalmaz.

İkisi (ve pek çok tartışma konusu) arasında bazı önemli farklılıklar vardır, ancak her ikisi de mobil site hızını artırır. AMP'lerin ve PWA'ların pratiklikleri hakkında Google'ın kapsamlı belgelerinden bilgi edinebilirsiniz.

6. Düşük Performanslı WordPress Eklentilerini Öldürün

Kısa Versiyon: Eklentiler, yükleme sürelerinde büyük bir boşaltma görevi görebilir. E-ticaret siteniz WordPress'te barındırılıyorsa, kapsamlı bir eklenti incelemesi yapın, ihtiyacınız olmayanlardan kurtulun ve “ağır” eklentiler için alternatif çözümler arayın.

Kullanımı kolay eklentilerin mevcudiyeti, birçok perakendecinin WooCommerce ve Shopify gibi platformları tercih etmesinin nedenlerinden biridir. Eklentiler çoğu zaman perakendeciler için faydalıdır. Performansı artırır, karmaşık geliştirme görevlerine olan ihtiyacı ortadan kaldırır ve genellikle ücretsizdir.

Ancak, kötü kodlanmış, sitenizin diğer öğeleriyle çakışan veya güncelliğini yitirmiş eklentiler site yükleme sürelerine çok fazla yük bindirebilir. Benzer şekilde, büyük eklentilerin genellikle kendi stil sayfalarını veya JavaScript'lerini almak için birden çok dosya isteği göndermesi gerekir.

Neyse ki, sorun giderme eklentileri oldukça basittir. Genellikle en basit yöntem, eklentilerle ilgili olabilecek sorunları saptamak için hız raporunuzu kullanmak ve devre dışı bırakıldıktan sonra yeniden test etmektir.

Alternatif olarak, P3 gibi bir WordPress eklentisi kullanabilirsiniz. Eklentilerinizi tarar ve düşük performans alanlarını vurgular.
Eklentilerle ilgili diğer ilginç şey, çözdüğü sorunların çoğunun web dosyalarındaki kodda yapılan basit değişikliklerle giderilebilmesidir. Eklentilerin aşırı kullanımı, geliştirici bilgisi eksikliğinin kesin bir işaretidir. Düzenli olarak hantal eklentilerle nispeten küçük sorunları çözme tuzağına düşüyorsanız, site hızınıza büyük bir haksızlık yapıyor olabilirsiniz.

7. Bir İçerik Dağıtım Ağı Kullanın

Kısa Versiyon: CDN'ler (İçerik Dağıtım/Teslim Ağları) aboneliği ucuzdur ve uygulaması kolaydır.

Birçok sağlayıcı otomatik küçültme seçeneği de sunduğu için CDN'lere zaten değinildi, ancak otomatik küçültmenin üzerinde ve üzerinde ek faydalar sağladıkları için burada tekrar bahsetmeye değer.

CDN'ler, geniş coğrafi mesafeler üzerinden veri aktarımının olumsuz etkilerini azaltır. Kaynak

CDN'lerin arkasındaki fikir çok akıllıdır. CDN, web sitenizin önbelleğe alınmış sürümlerini depolayan küresel bir sunucu ağıdır. Bu, farklı coğrafi konumlardaki ziyaretçilerin sitenize daha hızlı erişmesini sağlar. Bir ziyaretçi tarayıcısı aracılığıyla sitenize bir istekte bulunduğunda, sitenizin bir kopyasını saklayan en yakın sunucuyla iletişime geçilecektir.

Bir CDN kullanmak, bant genişliği maliyetlerini (ödeme yapıyorsanız) kontrol etmenize ve trafik artışlarıyla başa çıkmanıza da yardımcı olabilir.

8. Sunucu Yanıt Sürenizi Optimize Edin

Kısa Versiyon: Kötü bir sunucuyu değiştiremezken, iyi performans gösteren bir sunucuyu optimize edebilirsiniz. Veritabanınızı temizlemeye, CMS'niz için doğru ayarları seçmeye ve hızlı bir DNS sağlayıcısı seçmeye odaklanın.

İlk bayta kadar geçen süre (TTFB), bir tarayıcının bir sunucudan ilk bilgi baytını alması için geçen sürenin bir ölçüsüdür. Bir sunucu isteğinin esasen üç bölümü vardır ve her biri potansiyel bir optimizasyon alanını ifade eder: bir istek göndermek için geçen süre, sunucunun bir isteği işlemesi için geçen süre ve istenen bilgiyi göndermek için geçen süre. tarayıcı.

WebPageTest ile ilk bayt zamanınızı kontrol edebilirsiniz. 200 ms'nin altında olmalıdır.

Ağ, sunucular ve ziyaretçilerinizin tarayıcıları arasındaki mesafeyi azaltacağından, CDN kullanmak birinci ve üçüncü aşamaları iyileştirmenin en iyi yollarından biridir.

Burada ilgilendiğimiz ikinci alandır. Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.

Here's a quick checklist for ensuring good server response time:

• Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
• Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
• Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.

Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.

9. Use Compression Wherever Possible

Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).

Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.

So how exactly does it work?

Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.

To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).

10. Load Files Asynchronously Wherever Possible

Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).

Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.

During an asynchronous load, multiple files are loaded at the same time. Kaynak
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.

It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.

11. Reduce Redirects

Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.

Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.

Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.

Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.

Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.

In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.

Tools to Help Boost Your Site Speed

Here's a quick rundown of the tools you need to help with implementation:

Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.

Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.

WebPageTest – A simple tool to test your TTFB.

DNSPerf – A good tool for testing the speed of your DNS provider.

Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.

Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.

Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.

CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.

Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.

Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.

Ready to improve your ecommerce site speed?

Improving your site's speed is a big job. Ama buna değer. A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.

But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).

Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.

Now, time to head over to PageSpeed Insights.

Download Your Free Optimization Checklist

Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.

Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.