Mobil Site Hızı Optimizasyonu İçin En İyi Kılavuz

Hepimiz mobil öncelikli tüketici pazarına doğru itiliyoruz ve KOBİ'ler mobil optimize web sitesi açısından hala geride kalıyor. Yıldırım hızıyla İnternet bağlantıları ve 4G standartları zaten mevcutken, mobil kitlelerin büyümesi için zaman hiç bu kadar iyi olmamıştı. ComScores'un son Küresel Mobil Raporuna göre , trafiğin yarısından biraz azı (%49) ve ilk 100 dijital medya mülkünün ziyaretçileri yalnızca mobil . Bu, mobil cihazlara uyarlanmayan web sitelerinin izleyicilerinin yarısını kaybetme riskiyle karşı karşıya kalabileceğini öne süren dikkate değer bir istatistiktir.

Mobil izleyiciler için en önemli olan tek şey hızdır ( aşağıdaki şekil, masaüstü ve mobil cihazlar için medyan yükleme sürelerini sağlar ).

Bu mobil site hızı optimizasyon kılavuzunda tartışılan adımlar ve yöntemler, her tür mobil cihazda sitenizin hızını optimize etmek için gereken tüm gerekli düzeltmeleri listeleyecektir.

Mobil Cihazlarda Site Performansınızı Nasıl Kontrol Edebilirsiniz?

Web sitenizi mobil uyumlu hale getirmek için yapmanız gereken ilk şeylerden biri, mobil cihazlarda performansını kontrol etmektir. Bu görev için kullanabileceğiniz birkaç araç vardır:

Google Mobil Uyumluluk Testi - Bu araç, URL'yi analiz eder ve sayfanın mobil uyumlu bir tasarıma sahip olup olmadığını bildirir. Googlebot'un web sayfasını mobil cihazlarda nasıl doğru bir şekilde görüntüleyebileceğine ilişkin belgeler sağlar ve sayfanın nasıl mobil uyumlu hale getirileceği konusunda adım adım öneriler sunar.

Google Sayfa Hızı Analizleri - Bu araç, web sayfanızı analiz eder ve daha hızlı hale getirmek için öneriler sunar. Bu araç, aşağıdaki ekran görüntüsünde gösterildiği gibi kırmızı (düzeltilmesi gerekiyor), sarı (düzeltmeyi düşünün) ve yeşil (sorun algılanmadı) olmak üzere 3 öncelik göstergesi sağlar.

GTMetrix - Bu araç, hem Google Page Speed ​​Insights hem de Yahoo Slow'dan veri alarak bir performans raporu sağlar. Ayrıca, 404'ler gibi basit sorunları veya sayfa oluşturmayı engelleyen harici kaynaklar gibi daha karmaşık sorunları keşfetmek için kullanılabilecek bir Şelale Tablosu sağlar.

Sorunları belirledikten ve ilk düzeltmeleri yaptıktan sonra, şimdi aşağıdaki önerileri uygulayarak web sitesini daha da hızlandırmanın zamanı geldi.

Web Sitenizi Mobil Cihazlarda Nasıl Hızlandırırsınız - Yükleme Süresini Azaltmanın ve Performansı Artırmanın 8 Yolu

Web sitenizin mobil cihazlarda hızını artırmak için aşağıdaki ipuçları denenmiş ve test edilmiştir. Bunların her birini tek tek anlayalım.

1- Düzgün Yapılandırılmış Bir CDN'ye Sahip Olun

Hız ve erişilebilirlik, aramayı optimize etmede en önemli endişeler arasındadır. Bir içerik dağıtım ağı (CDN) aracılığıyla küresel içeriği önbelleğe almaktan yararlanmak, SEO çabalarını artırmanın harika bir yoludur. Temel olarak, bir CDN, web sitesi içeriğini dinamik olarak önbelleğe alan, dünyanın farklı konumlarına yayılmış bir sunucular topluluğudur. Mevcut bulut barındırma hizmetlerinin üzerinde ve ötesinde kullanılabilen ek bir hizmettir. WordPress siteleri de dahil olmak üzere çok çeşitli hizmetlerle uyumludur.

CDN önbelleğe alma bir istemciye en yakın sunucu aracılığıyla önbelleğe alınmış içeriğin teslim edilmesine yardımcı olur. Bunlar da gecikmeyi en aza indirir ve dolayısıyla daha kısa mesafeler sayesinde yükleme süresini en aza indirir ( CDN'ye sahip olmanın yükleme süresini nasıl önemli ölçüde azalttığına dair bir fikir edinmek için lütfen aşağıdaki şekle bakın ). Yetenekli bir CDN, diğerlerinin yanı sıra DDoS saldırı koruması ve bir web uygulaması güvenlik duvarı gibi altyapı optimizasyonlarıyla birlikte gelir.

CDN Nasıl Yapılandırılır?

• Tercih ettiğiniz CDN sağlayıcısına kaydolun ve web sitenizi ekleyin.

• Trafiği CDN ağı üzerinden yönlendirmek için DNS ayarlarını değiştirin. A kaydını güncelleyin ve CNAME kaydını oluşturun veya güncelleyin. ( Aşağıda Incapsula'dan bir ekran görüntüsü verilmiştir. Tercih ettiğiniz CDN sağlayıcılarından herhangi birini seçebilir ve DNS ayarlarında gerekli değişiklikleri yapabilirsiniz ).

• Bu kadar! Kayıt güncellemesi yapıldıktan sonra CDN, trafiği web sitenize yönlendirmeye başlayacaktır.

Bir CDN'ye sahip olmak, site yükleme süresini iyileştirmeye ve kullanıcı deneyimini iyileştirmeye yardımcı olacaktır.

2- Hızlandırılmış Mobil Sayfalardan Yararlanın

Ekim ayında Google, daha hızlı ve açık bir mobil web için Hızlandırılmış Mobil Sayfaları tanıttı. Hızlandırılmış Mobil Sayfalar, arama motorlarının içeriği son derece hızlı görüntülemesini sağlarken, yayıncıların içeriklerinin görünüşünü ve hissini kontrol etmelerini sağlayan özel olarak biçimlendirilmiş web sayfalarıdır. Mobil web sitelerinin Açık Kaynak AMP HTML kodlarının kullanımıyla çok daha hızlı yüklenebileceği ve arama motoru yükleme sürelerini etkin bir şekilde azaltarak hemen çıkma oranlarını en aza indirebileceği tahmin edilmektedir.

AMP Sitenize Nasıl Uygulanır?

AMP'yi sitenize uygulamak için lütfen aşağıdaki adımları izleyin:

A- AMP HTML (ana sayfanızın AMP versiyonu olarak da bilinir) kullanarak ana sayfanızın ayrı bir versiyonunu oluşturun . İlk AMP HTML sayfanızı tasarlamak için temel kod aşağıda verilmiştir:

• <!doctype html>
• <html amp lang="tr" >
• <kafa>
• <meta karakter kümesi="utf-8" >
• <title> AMP sayfanızın başlığı buraya gelecek </title>
• <link rel="canonical" href="AMP olmayan sürümün URL'si buraya gelecek" />
• <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" >
• <script type="application/ld+json" >
• {
• "@bağlam": "http://schema.org",
• "@type": "HaberMakalesi",
• "headline": "İçerik yayınlamak için açık kaynaklı çerçeve",
• "datePublished": "2015-10-07T12:02:41Z",
• "görüntü": [
• "logo.jpg"
• ]
• }
• </script>
• <style amp-boilerplate >body {-webkit-animation:-amp-start 8s adımlar(1,end) 0s 1 her ikisi de normal;-moz-animation:-amp-start 8s adımlar(1,end) 0s 1 her ikisi de normal; -ms-animation:-amp-start 8s adımlar(1,end) 0s 1 her ikisi de normal;animation:-amp-start 8s adımlar(1,end) 0s 1 her ikisi de normal}@-webkit-keyframes -amp-start{ itibaren {visibility:hidden} 'dan {visibility:visible}}@-moz-keyframes -amp-start{ ' a {visibility:hidden} 'dan {visibility:visible}}@-ms-keyframes -amp-start{ ' a {visibility:hidden'dan } {visibility:visible}}@ - o-keyframes -amp-start{ ' a {visibility:hidden} 'dan {visibility:visible}}@keyframes -amp-start{ ' a {visibility:hidden} 'dan {visibility:visible}'a }</ stil >< noscript >< stil amp-boilerplate > gövde {-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} </style></noscript>
• <script zaman uyumsuz src="https://cdn.ampproject.org/v0.js" ></script>
• </head>
• <body>
• <h1> AMP'ye Hoş Geldiniz </h1>
• </body>
• </html>

B- Resim eklemek için aşağıdaki kodu kullanın:

<amp-img src="welcome.jpg" alt="Hoş Geldiniz" height="400" width="800" ></amp-img>

C- Ortak CSS özelliklerini kullanarak sayfanın sunumunu ve düzenini değiştirin . Örnek bir stil kodu aşağıda verilmiştir:

<style amp-custom > /* herhangi bir özel stil buraya gelir */ body { background-color: white; } amp-img { arka plan rengi: gri; kenarlık: 1 piksel düz siyah; } </stil>

D- AMP sayfasını önizleyin, doğrulayın ve yayınlayın.

E- Arama motoru botlarının web sayfanızın AMP sürümünü tanımlamasına yardımcı olmak için sayfanın AMP olmayan sürümüne amphtml etiketini ekleyin :

<link rel="amphtml" href="Web sayfanızın AMP sürümü buraya gelir" />

AMP Sayfasının Canlı Örneği

İşte eylem halindeki bir AMP sayfasının canlı bir örneği ve işte normal sayfa . Her sayfanın kaynak kodlarını kolayca görüntüleyebilir ve hız ve kodlamadaki farkı görebilirsiniz.

AMP Öğrenme Kaynakları

AMP HTML öğrenmeye yönelik kodları bulmak için lütfen daha fazla ayrıntı için aşağıdaki kaynaklara bakın:

• AMPProject.org
• Github AMP Projesi

3- Site Yapısını, İçeriğini İyileştirin ve Kullanıcı Deneyimini Geliştirin

Site mimarisi, site tasarımı söz konusu olduğunda sıklıkla ihmal edilen bir alandır, ancak olmamalıdır. Google'ın algoritması, arama yapanlardan gelen bilgileri kullanır, bu nedenle iyi bir kullanıcı deneyimi, daha yüksek sıralamalar anlamına gelir. Site yapınız uygun değilse sayfanın yüklenmesi daha fazla zaman alacak ve kullanıcı siteden ayrılacaktır. Bu, kötü bir kullanıcı deneyimi sağlar.

Site Yapısı Nasıl İyileştirilir?

İyi bir arama deneyiminin en önemli yönlerinden biri, siteyi daha iyi tarama için optimize etmeye yardımcı olduğu için iyi bir site yapısına sahip olmaktır.

Site yapınızı geliştirmek için izlemeniz gereken 8 adım:

• Site hiyerarşinizi planlayın ve mantıklı tutun. Ayrıca, kategori ve alt kategorilerin sayısını dengeleyin. İyileştirilmiş site yapısının bir örneği aşağıda verilmiştir:

• Kategorilerinizi ve alt kategorilerinizi adlandırırken aranabilir anahtar kelimeler kullanın. Doğru isimleri seçmek sitenizi optimize etmede uzun bir yol kat edecektir.

• Kullanıcı dostu bir URL yapısına sahip olun ve kullanıcının her sayfaya ulaşmak için yalnızca üç veya daha az tıklama aldığından emin olun.

• Mümkün olduğunca çok site bağlantısı ekleyin. Site bağlantıları, sitenin gezilebilirliğini artırmanın yanı sıra marka itibarını artırmaya, TO'yu artırmaya ve dönüşüm hunisini kısaltmaya yardımcı olur.

• Mümkün olduğu kadar çok dahili bağlantı ekleyin, ancak hepsinin alakalı olduğundan emin olun. Sağlam dahili bağlantıların nasıl oluşturulacağına dair harika bir örnek arıyorsanız Wikipedia'yı takip edin. Gelişmiş ve SEO dostu bir dahili bağlantı yapısı, bağlantı suyunun tüm iç sayfalarda eşit olarak geçmesine izin verecek ve her sayfanın Google'da iyi sıralanmasını sağlayarak trafiği ve dönüşümleri artıracaktır.

• Gereksiz kategoriler ve etiketler sorunundan kaçının. Yoast Etiket Optimizasyonu aracı , WordPress sitenizdeki gereksiz etiket sorununu çözmenin harika bir yoludur.

• En önemli sayfalarınıza daha sık ve ekranın üst kısmında bağlantı verin. Karları artırmak için ana gelir getiren sayfalarınıza maksimum bağlantı suyunu aktarmanız çok önemlidir.

• Ana sayfanızdan gelir getiren sayfanıza ulaşmak için yalnızca 2 tıklama gerektiğini söyleyen 2 tıklama kuralını izleyin .

Site İçeriği Nasıl İyileştirilir?

Google'ın sıralama algoritması, içerik kalitesine büyük önem vermektedir. Panda güncellemesi, özellikle web sitelerinde düşük veya daha az kullanıcı dostu içeriğe sahip sitelerin sıralamasını düşürmeyi amaçlıyor. İçeriği sitenizde sunma şeklinizin site hızıyla çok ilgisi vardır.

Site içeriğinin kalitesini ve sunumunu iyileştirerek site hızını artırmanın 5 yolu:

• Bir blogunuz olsun . Arama motorları benzersiz ve taze içeriği sever ve bir bloga sahip olmak sadece bu amaca hizmet eder. Genel yükleme süresini kısaltmayı amaçlayan gerçekten yararlı eklentiler sağladığı için blogunuzun WordPress'te olmasını öneririm. WordPress'te bir blog oluşturmak çok kolaydır. Adım adım talimatlar için, bir blogun nasıl başlatılacağına ilişkin ücretsiz başlangıç ​​kılavuzunu indirebilirsiniz. . Görüntüleri optimize etmek ve önbelleğe almak için kullanabileceğiniz bazı eklentiler şunlardır: EWWW Image Optimizer ,Google Kitaplıkları ,WP Optimize veWP Süper Önbellek .

• Görüntülerinizi aynı anda yüklenen 1 büyük görüntüde birleştirmeye yardımcı olduğundan, görüntüleri optimize etmek için CSS Sprite'ları kullanın .

• Duyarlı temalardan yararlanın çünkü duyarlı temalar hızı hesaba katar ve daha hızlı yüklenir.

• Google Sayfa Hızını Yükleyin ve MemeCached sunucunuzda. Bu, web performansı en iyi uygulamalarını uygulamak için o web sayfasındaki kaynakları değiştirerek web sayfası gecikmesini ve bant genişliği kullanımını iyileştirecektir.

• Kullanıcıların sitenizde incelemelerini bırakmalarına izin verin . Gerçek olumlu eleştiriler ve yorumlar sitenin güvenilirliğini arttırmada büyük bir etkendir. Getreviwed.org ürünleriniz ve hizmetleriniz hakkında dürüst görüşlerini paylaşmak isteyen yüzlerce potansiyel blogcuyla el ele vermek için harika bir platform. Disquss ve Facebook Comments eklentileri hızlı yüklenir ve yorumlar dizine eklenebilir olduğundan, kullanıcıların sitenizin genel içerik kalitesini optimize eden orijinal incelemeler ve yorumlar eklemelerine yardımcı olur. Bu nedenle, hızdan ödün vermeden sitenize bazı değerli içerikler ekleyebilirsiniz.

• Tarayıcı önbelleğini kullanın ve HTML5 web depolama API'sini uygulayın .

4- Duyarlı Tasarımdan Yararlanın

Google'ın mobil SEO kılavuzuna göre, duyarlı tasarım, Google'ın önerilen tasarım modelidir. Google, mobil için optimize edilmiş siteleri mobil aramalarda daha üst sıralara koyduğunu da belirtti. Ayrıca, duyarlı bir tasarıma sahip olmak aşağıdaki ana faydaları sunar:

• Bağlantılar, daha iyi arama motoru sıralamalarına yol açan tek bir alana yönlendirilir.
• Google tarafından genellikle sıralamaları düşürmek için kullanılan yüksek hemen çıkma oranlarını kontrol eder.
• Yalnızca botlarla değil, özellikle gerçek izleyiciler için bir artı olan kullanıcı deneyimi açısından iyileştirmeler.

Duyarlı Sitenizi Hızlandırmanın Yolları

Duyarlı sitenizi hızlandırmak için aşağıdaki stratejileri kullanın:

• Sosyal widget'lar, resimler, haritalar vb. dahil olmak üzere her türlü içeriğin yüklenmesini durdurmak için kullanılan koşullu yüklemeyi kullanın ve yalnızca belirli bir koşulla eşleşen içeriği yükleyin.

• Bootstrap gibi çerçeveler kullanın ve Vakıf hızlı mobil işlevsellik ve hız sağlayan.

• Mevcut ekran boyutuna göre kendini otomatik olarak yeniden boyutlandıran uyarlanabilir görüntüler kullanın . Bu, tam görüntü dosyasını yükleme gerekliliğini azaltır. Bunun yerine, küçültülmüş ve gömülü HTML görüntüleri, işaretlemede herhangi bir değişiklik yapılmadan yüklenebilir.

• M-nokta yönlendirmesini azaltın ve web sayfalarınız için tek bir URL tercih edin.

• FitText gibi eklentiler kullanın bu, yazı tipi boyutunu, üst öğe tarafından sağlanan genişliğe sığacak şekilde esnek hale getirir.

5- Daha İyi Taranabilirlik için Site Haritalarını ve GWT'yi kullanın

Site sıralamalarınız genellikle sürekli çalışan ve sitenizde gezinen, içeriğinizi arama motoru optimizasyonu faktörlerine göre sıralayan ve analiz eden küçük botlara bağlıdır. Aşağıdaki adımlar, tarayıcıların sitenizi etkili bir şekilde taramasına ve kapalı kalma süresini en aza indirmesine izin vererek web sitenizi hızlandırmanıza yardımcı olabilir:

• Site haritaları oluşturun ve yinelenen içerikten kaçındığınızdan emin olun. Site haritaları, Google'a video, resim ve mobil içerik dahil olmak üzere sayfalarınızdaki belirli içerik türleri hakkında meta veriler sağladıkları için gerçekten kullanışlıdır. Örneğin, bir site haritası video girişi, videonun çalışma süresini, kategorisini ve yaşa uygunluk derecesini belirtebilirken, bir site haritası resim girişi, resmin konusunu, türünü ve lisansını içerebilir.

• Google WebMasters araçlarıyla Google tarama hızını optimize edin. Daha fazla yardım için lütfen şu adrese bakın: Tarama hızının nasıl değiştirileceğine ilişkin Google kılavuzu .

• Google botları yeni ve yeni içeriklere ilgi duyduğundan içeriği güncellemeye devam edin.

• Güvenilir sunucular kullanın ve gerektiğinde her zaman HTTPS ile güvenli siteler sağlayın.

6- Click Events Yerine Ajax ve Touch Events Kullanın

Mobil kullanıcılar bir kaynağa tıklayıp başka bir kaynağın yüklenmesini beklemekten nefret eder. Bunun yerine, dokunmatik yüzeyin farklı konumlarında aynı anda dokunmaları destekleyen TouchEvents'i kullanmak daha kolay bir çözümdür. Düğmelere uygulandığında bu tür dokunma olayları yükleme süresini önemli ölçüde azaltabilir ve kullanıcı deneyimini artırabilir.

Aşağıdaki şekil, kullanıcıların mobil cihazla etkileşim kurarken oluşturabileceği bir dizi dokunma olayı sağlar.

Ayrıca, kodun çalıştığı sayfayı yenilemek zorunda kalmadan verilerin bir web sunucusundan alınmasına izin verdiği için AJAX kullanılması önerilir.

7- İstemci Tarafı İşlemeyi Optimize Edin

Mobil cihazlar söz konusu olduğunda, daha yavaş CPU ve daha az bellek nedeniyle istemci tarafı işleme büyük ölçüde azalır. Sayfa işleme verimliliğini artırmak için, resim ve komut dosyası gibi ekranın alt kısmındaki içeriklerin yüklenmesinin ertelenmesi önerilir. Bu komut dosyalarının indirilmesi ve ayrıştırılması, onload olayı sonrasına kadar güvenle ertelenebilir. Bazı komut dosyalarının yalnızca kullanıcı sürükle ve bırak gibi bir işlem başlattıktan sonra çağrılması gerekir, bu nedenle bu tür komut dosyaları, kullanıcı herhangi bir işlem yapmaya hazır olması için ekrana ulaşmadan yüklenmemelidir.

Bu yönergeler ve web sitesi altyapısındaki değişiklik ile web sitenizi hızlandırabilir ve daha üst sıralarda yer alabilirsiniz. Web sitenizin yükleme süresini büyük ölçüde azaltmanıza yardımcı olan başka bir teknik uyguladınız mı? Lütfen aşağıdaki yorumlarınızda bana bildirin.

Özenle Seçilmiş İlgili Makaleler:

• Web Sitenizin Gerçekten Mobil Uyumlu Olup Olmadığını Test Etmek İçin 5 Araç
• Web Sayfası Hızını Artırın: JavaScript'inizi Optimize Edin
• S: Mobil Web Sitem İçin Hangi URL'yi Kullanmalıyım? A: Duyarlı Tasarım

^{* Eole'den uyarlanmış ana resim . Bazı hakları saklıdır .}