Shopify performansı ve mobil deneyimi
Hızlı bir mağaza sadece daha hızlı şarj etmez Müşteri niyetlerine daha hızlı cevap verir.
Amaç izole mükemmel bir puan elde etmek değil, aslında kullanılan sayfaların yüklenmesini, yanıt verebilirliğini ve kararlılığını geliştirmektir. Ölçerek başlayın, sorumlu kişiyi tanımlayın, ardından iş etkisine göre düzeltin.
Shopify'ı Shopify'a eklenenlerle karıştırmayın
Platform barındırma, CDN ve çeşitli optimizasyonlar sağlar. Yavaşlamalar genellikle tema, uygulamalar, pazarlama komut dosyaları, medya ve özelleştirmelerden gelir.
Tek bir skor tüm hikayeyi anlatmaz
Gerçek kullanıcı verilerini, birden fazla sayfa türünü ve laboratuvar testlerini karşılaştırın Hızlı bir ana sayfa, yavaş bir ürün sayfasını telafi etmez.
Dikkat edilmesi gereken üç boyut
Görünür ana içerik, genellikle büyük bir resim veya başlık mevcut olduğunda ölçer.
Etkileşimlerden sonraki yanıt hızını gözlemler: menü, çeşitler, filtreler, sepet veya düğmeler.
Yükleme sırasında beklenmeyen içerik hareketlerini ölçer.
Shopify, yeterli hacim mevcut olduğunda bu ölçümleri gerçek verilerden web performans raporlarında toplar.
6 adımlı teşhis yöntemi
Önemli sayfaları seçin
En azından karşılamayı, büyük bir koleksiyonu, temsili bir ürün sayfasını, sepeti ve bir editoryal sayfayı test edin.
Mobil ile başlayın
Bağlantılar, işlemciler ve ekran boyutları sorunları daha görünür hale getirir Araçları tamamlamak için gerçek bir telefon kullanın.
Shopify raporlarını okuyun
Bir kurulum veya değişikliğe karşılık gelen Temel Web Hayati Değerlerini, etkilenen sayfa türlerini ve olayları gözlemleyin.
PageSpeed Insights ile karşılaştırın
Laboratuvar testi, engelleme kaynaklarının, ağır görüntülerin, komut dosyalarının ve aşırı tarayıcı çalışmasının tespit edilmesine yardımcı olur.
Bir nedeni izole edin
Temanın bir kopyasını test edin, bir uygulama bloğunu veya komut dosyasını geçici olarak devre dışı bırakın, ardından öncesi ve sonrasını karşılaştırın.
Yayınlandıktan sonra ölçün
Gerçek verilerin değişiklikleri yansıtması zaman alır.tarihi belgeleyin ve ayrıca dönüşümü izleyin.
En uygun maliyetli optimizasyonlar
Denetim uygulamaları
Yeterli değeri olmayan işlevleri kaldırın ve kaldırma işleminden sonra kalan komut dosyalarını kontrol edin.
Ana resmi hafiflet
Uygun boyutta servis yapın, kullanışlı kaliteyi koruyun ve ana içeriği oluşturan görüntüyü geciktirmekten kaçının.
Responsive resimler kullanın
Tarayıcı, mobil cihazlarda devasa bir masaüstü dosyası yerine ekran dostu bir sürüm indirmelidir.
JavaScript'i azaltın
Mümkün olduğunda HTML ve CSS'yi tercih edin. İşlevleri yalnızca bunlara ihtiyaç duyan sayfalara yükleyin.
Gerekli olmayan komut dosyalarını erteleyin
Tüm sohbet, incelemeler, haritalar, videolar ve pazarlama araçları ilk ekranı engellememelidir.
Master yazı tipleri
Aileleri ve yağları sınırlayın, yalnızca temel dosyaları önceden yükleyin veya bir sistem yazı tipini düşünün.
Rezerv boyutları
İçerik sıçramalarını önlemek için resimlerin, videoların ve widget'ların genişliğini ve yüksekliğini ayarlayın.
Büyük koleksiyonları kürekle gezdirin
Sayfalandırma veya kontrollü yükleme yeterli olduğunda yüzlerce ürünü aynı anda yüklemeyin.
Pazarlama takibini temizleyin
Kullanılmayan etiketleri kaldırın ve etiket yöneticisi aracılığıyla yüklenen her aracın değerini kontrol edin.
Etkiye göre önceliklendirin
| Eylem | Olağan öncelik | Neden |
|---|---|---|
| Ağır ve yararsız bir uygulamayı silin | Yüksek | JavaScript'i, sorguları ve tarayıcı çalışmalarını birden fazla sayfada azaltabilir |
| Mobil kahramanı optimize edin | Yüksek | Görünür en büyük öğe genellikle algılanan yüklemeyi etkiler |
| Su hattının altındaki bir videoyu geciktirin | Yüksek | Görünmez medyayı hemen yüklemekten kaçının |
| Yazı tiplerini ve yağları sınırlayın | Ortalama | İndirmeleri azaltır ve metin görüntülemeyi hızlandırır |
| Temiz tekrarlanan Sıvı kodu | Ortalama | Karmaşık modellerde oluşturma süresini iyileştirebilir |
| Küçük bir simge üzerinde birkaç kilobayt kazanın | Zayıf | Büyük senaryolar ve medya ağır kalırsa sınırlı etki |
Resimler: gerçekten önemli olan ayarlar
Yapmak için
- Birden fazla genişliğe sahip Shopify görüntü filtrelerini kullanın
- Yer ayırtmak için boyutları girin
- Tembelce ekran altında medya yükleme
- Kaynakları Shopify CDN'sinde barındırın
- Mobil kırpmayı test edin
Kaçınmak için
- Tüm ekranlara aynı 3000 px görüntüyü gönderin
- Ana görsele sebepsiz yere gecikmeli bir yük koyun
- Birden fazla ağır sürgü kullanın
- Yüksek çözünürlükte otomatik video yükleyin
- Görünmez görüntüleri atlıkarıncalarda çoğaltın
Üçüncü taraf uygulamaları ve komut dosyaları: değere göre karar verin
Fonksiyonu tanımlayın
Gerçekte ne üretir: satış, güven, destek, veri veya basit dekorasyon?
Aralığı ölçün
Komut dosyası yalnızca üründe veya sepette kullanışlı olduğunda tüm sayfalara yükleniyor mu?
Yerel bir işlev arayın
Tema veya Shopify zaten daha hafif bir çözüm sunabilir.
Öncesi/sonrası test edin
Temanın bir kopyasını bloklu ve bloksuz olarak karşılaştırın, ardından verilerin ve satışların doğru kaldığını kontrol edin.
Temiz bir şekilde silin
Kaldırdıktan sonra, kod parçacıklarını, etiketleri ve etkin kalabilecek dosyaları kontrol edin.
Belge
Her harici betiğin sahibini, amacını ve revizyon tarihini saklayın.
Temanın teknik optimizasyonları
Aşamalı JavaScript
Bir ürünü keşfetmek ve satın almak gibi temel özellikler sağlam kalmalıdır. Sayfanın tamamını bağımlı kılmak için değil, geliştirmek için JavaScript kullanın.
Engellemeyen komut dosyaları
Uyarlanmış nitelikler ve koşullu yükleme, dosyaların ilk sayfa yapımını geciktirmesini önler.
Etkili sıvı
Döngülerde tekrarlanan karmaşık hesaplamalardan kaçının ve Shopify araçlarıyla yavaş bölümleri analiz edin.
Hedeflenen CSS
Genel bağımlılıkları azaltın ve sayfada eksik olan bileşen stillerini yüklemekten kaçının.
Kritik kaynaklar
İlk ekranda sadece gerekli kaynakları önceden yükleyin Çok fazla ön yükleme yeni rekabet yaratır.
Kontrol araçları
Tema Kontrolü büyük paketleri, uzak kaynakları, JavaScript'i engellemeyi ve bazı CSS bağımlılıklarını tespit edebilir.
Yapılmaması gereken
Ne pahasına olursa olsun 100 puan alın
Birkaç puan için karlı bir özelliği kaldırmayın Teknik maliyet ve ticari değeri karşılaştırın.
Yalnızca alımı optimize edin
Ziyaretçiler genellikle doğrudan bir ürün sayfasına, koleksiyona veya ürüne ulaşırlar.
Teşhis olmadan bir hız uygulaması yükleyin
Ek bir katman her zaman nedeni düzeltmez ve JavaScript ekleyebilir.
Tüm içeriği tembelce yükleyin
İlk önemli görsel hızlı görünmelidir Tembel yükleme özellikle görünür alanın altında kullanışlıdır.
Temel izlemeyi kaldırın
Siparişler, atama ve uyumluluk için gerekli araçları koruyun, ardından yüklemelerini optimize edin.
Aktif temayı kopyalamadan düzenleyin
Bir kopya üzerinde çalışın, kursları test edin ve kurtarılabilir bir sürüm tutun.
7 günlük eylem planı
Sık sorulan sorular
Hangi PageSpeed puanını hedeflemelisiniz?
İyi bir deneyimi garanti eden tek bir puan yoktur.Her şeyden önce, yararlı işlevleri kaldırmadan metrikleri, önemli sayfaları ve gerçek verileri iyileştirmeye bakın.
Shopify doğal olarak yavaş mı?
Shopify optimize edilmiş altyapı ve CDN sağlar. Nihai performans büyük ölçüde eklenen temaya, medyaya, uygulamalara ve komut dosyalarına bağlıdır.
Tüm uygulamalar mağazayı yavaşlatıyor mu?
No. Etkileri kodlarına, yükleme sayfalarına ve işlevlerine göre değişir.her birini ayrı ayrı değerlendirin.
Tüm görüntüleri manuel olarak sıkıştırmak zorunda mıyım?
Shopify, CDN'si aracılığıyla dönüşümler yapar ve görüntüler sunar, ancak her zaman uygun boyutlar istemeli ve gereksiz derecede büyük kaynak dosyalardan kaçınmalısınız.
İyileşmeyi görmeden ne kadar zaman önce?
Laboratuvar testleri anında yanıt verirken, gerçek kullanıcılara dayalı raporlar daha fazla ziyaret gerektirir ve gecikme gösterebilir.
İyi optimizasyon, değeri kaldırmadan frenleri kaldırır
Shopify mağazanızı mobilde daha hızlı, daha istikrarlı ve daha keyifli hale getirin
Herhangi bir değişiklik yapmadan önce temanızı, uygulamalarınızı, komut dosyalarınızı ve medyanızı denetletin.
