Mobil Performans Nasıl Optimize Edilir

En iyi tasarımlar, baştan itibaren mobil cihazlar düşünülerek çalışarak estetik ve performansı dengeler. Sıkı performans bütçeleri belirlemekten istemci ve sunucu tarafı optimizasyon tekniklerini uygulamaya kadar, Cyber-Duck'ta kullandığımız mevcut mobil performans optimizasyon işlemlerini paylaşacağım.

Mobil Düşünceli Olun

Performans, kullanıcı deneyiminin önemli bir parçasıdır, bu nedenle geliştirme sürecinin sonunda sonradan düşünülemez. Projeleri, başlangıçtan itibaren işbirliği yapan tasarımcılar ve geliştiriciler ile mobil odaklı bir yapı aracılığıyla yönetmek tercih edilir.

Ortak İnceleme

Her proje için, iç ekiple tasarım ve geliştirme kapsamını gözden geçirin ve temel performans göstergesi (KPI) hedeflerini tanımlayın. Bunlar, iş hedeflerine dayalı olarak proje başarısını gösteren kilometre taşı ölçütleridir. Önemleri göz önüne alındığında, performansla ilgili hedefler burada görünmelidir.

Tüm dahili ekip çıktıyı gözden geçirene kadar önemli proje kilometre taşlarını (sanat yönetimi ve tel çerçeveler gibi) paydaşlarla imzalamayın. Aksi takdirde, geliştiricilerin uygulama sırasında tasarım ayarlamaları (sayfa boyutunu küçültmek için) talep edebileceğini gördük. Halihazırda imzalanmış tasarımlarla, bu aşamadaki değişiklikler komplikasyonlar yaratabilir ve daha fazla müşteri onayı turları açabilir. Geliştiriciler en başından dahil olduklarında, arayüzler için gereken boyutu ve programlama gücünü tahmin edebilir ve bundan kaçınabilirler.

Performans Bütçeleri

Mobil zihniyete girmenin en iyi yolu, sıkı bir performans bütçesi belirlemek ve buna bağlı kalmaktır : nihai web sitesinin hızı ve boyutu için bir hedef belirlemek. Ekip, net bir yüksek performans hedefi için çalışırken, karusel gibi pahalı özellikleri uygulayıp uygulamamayı seçmelidir.

Rakamlara dayalı performans bütçeleri belirleyip belirlemeyeceğimizi belirli iş hedefleri ve kullanıcı gereksinimleri belirler. Örneğin, kendi web sitesi yenilememiz, cihazlar arasında yükleme sürelerini önemli ölçüde iyileştirmeyi ve mobil dönüşümleri artırmayı amaçladı. Mobil için en fazla 40 HTTP isteği veya 500 KB veri içeren katı sınırlar belirledik. Geçmiş etkileşimler hedef kitlenizin davranışını gösterdiğinden, Google Analytics verileri, yenilemeler sırasında hangi hedeflerin seçileceğini bildirebilir.

Genel olarak, mobil ana sayfalar için 500 KB sınırı ile sayfa boyutu için hedefler tanımlarız. Sunucu isteklerini tahmin etmek daha zordur, bu nedenle kesin rakamlar belirleme olasılığımız daha düşüktür. Bu kaba yönergeler, müşteri projeleri için ihtiyaçlarımıza uygundur. Ancak Daniel Mall'ın bütçelere ayrıntı eklemek için harika bir pratik kılavuzu var: HTML ve CSS'ye ağırlık vermekten JavaScript'e, resimlere ve web yazı tiplerine kadar.

Optimizasyon Teknikleri

Mobilde, web sitesi yükleme hızı, istemci ve sunucu tarafı faktörleri tarafından yönlendirilir. Bu faktörlerin her ikisini de ele alan hedefli optimizasyon tekniklerini kullanmak, projeniz için belirlenen performans bütçelerini karşılamanıza yardımcı olabilir.

İstemci Tarafı Optimizasyonu

2014'te 5.000'den fazla benzersiz akıllı telefon cihazı olan çeşitli mobil ortam ile geliştiriciler, sunucu tarafı faktörlerine kıyasla bireysel cihaz performansı üzerinde önemli ölçüde daha az kontrole sahiptir. Bu nedenle, istemci tarafı optimizasyonu çok önemlidir. Aşağıdaki teknikler, mobil cihazlardan web sitelerini yüklemek için gereken işlem süresini ve gücü azaltmayı amaçlamaktadır.

Kodu Optimize Et

Birçok geliştirici, bir web sitesini güçlendirmek için jQuery'de yazma tuzağına düşer. Ama böyle bir şey yok. Aslında, yardımcı kısayollar ve işlevlerden oluşan bir kitaplık kullanırken JavaScript'te yazıyorsunuz. Bu, geliştirmeyi hızlandırsa da - bir ürünü hızlı bir şekilde piyasaya sürmeniz gerektiğinde faydalıdır - bir performans maliyeti olabilir. jQuery kitaplığı ağırlık ekler ve eklentilerin (ve işlevlerin) esnekliği, genellikle şişirilebilecekleri anlamına gelir.

İşte aynı işlev için kullanılan JavaScript ve jQuery ile bir örnek. Düz JavaScript ile yazmak, uygulamanıza başka bir harici kitaplık çekmekten kaçınır ve başka bir değerli HTTP isteğini kaydeder.

 // jQuery var con = $('#my_container'); con.css('width','75%'); // Plain JavaScript var con = document.getElementById('my_container'); el.style.width = '75%';

Grunt veya Gulp gibi sistemleri kullanarak veya Prepos, Codekit veya Hammer gibi ön uç derleyici uygulamalarıyla CSS ve JS dosyalarını daha da optimize edebilirsiniz. Bunlar, çeşitli görevleri gerçekleştirerek HTTP isteklerini ve dosya boyutunu azaltır: dosyaları birleştirme, Sass, Less veya CoffeeScript'i derleme, Uglify JS (JavaScript'i sıkıştırır) ve üretim kullanımı için dosyaları küçültme/sıkıştırma.

Katlamanın Üstüne Öncelik Ver

Google Pagespeed Insights (ve benzer araçlar), ekranın üst kısmındaki içeriğin yüklenme boyutuna ve hızına öncelik verilmesini önerir. Önce sayfanın görünür kısmını (ekranın üst kısmında) oluşturmak için kullanılan CSS'yi ayırın; sayfa oluşturulduktan sonra geri kalan stillerin yüklenmesini erteleyin.

En üstteki CSS'yi doğrudan sayfa başlığına eklemek bunu yapabilir. Ancak, bunun CSS dosyasının geri kalanı gibi önbelleğe alınmayacağını unutmayın, bu nedenle önemli içerikle sınırlandırılmalıdır. Scott Jehl'in Critical CSS'si ve Paul Kinlam'ın Bookmarklet aracı da dahil olmak üzere çeşitli araçlar ayrılacak CSS'yi belirlemenize yardımcı olabilir.

Görüntüleri Optimize Edin

Mevcut zengin tasarım tercihi göz önüne alındığında, resimlerin genellikle ağır sayfa boyutunun suçlusu olması talihsiz bir durumdur. Ancak, her biri doğru formata dışa aktarmadan önce ve sonra optimize edilir ve sıkıştırılırsa, görüntü yönlendirmeli tasarım hala mümkündür. Daima uygun görüntü türünü kullandığınızdan emin olun. Ağır renkli fotoğraflar JPEG dosyaları olarak daha iyi çalışır, düz renkli grafikler ise PNG8'de olmalıdır. Gradyanlar ve daha karmaşık simgeler en iyi, alfa saydamlığı olan PNG24/32 veya SVG'ler olarak çalışır.

Photoshop ve Fireworks, görüntünün farklı alanlarındaki optimizasyon düzeylerini özelleştirmenize yardımcı olabilir. Bu, ana konunun yüksek kalitede kalabileceği ve geri kalanının performansı artırmak için optimize edildiği anlamına gelir. ImageOptim ve TinyPNG gibi kayıpsız görüntü sıkıştırma araçları, görüntü kalitesini kaybetmeden dosya boyutunu en iyi şekilde sıkıştırabilir.

Ayrıca, resimler için yeni HTML5 <picture> öğesini ve srcset ve size özniteliklerini kullanabilirsiniz. Dile yapılan bu iki ekleme, duyarlı görüntüleri doğrudan HTML'de tanımlamanıza yardımcı olur, böylece tarayıcı yalnızca verilen koşulla eşleşen görüntüyü indirir.

 <picture> <source media="(min-width: 960px)"> <source media="(min-width: 465px)"> <img src="images/picture.png" alt="Picture alt"> </picture>

Ancak bu teknik dikkatli kullanılmalıdır. Yalnızca birkaç tarayıcı bunu destekler: bazı modern tarayıcılar (Safari gibi), Android tarayıcılar ve IE10/11 (ve daha eski) desteklemez. Polyfill alternatifleri bu yöntemin eski tarayıcılarda çalışmasını sağlayabilir, ancak bunlar ayrı olarak yüklenmesi gereken harici JavaScript kitaplıklarıdır ve diğer tekniklerin mevcut olduğu göz önüne alındığında buna değmeyebilir. Polyfill'in ekstra ağırlığının gerekip gerekmediğini görmek için hedef kitlenizi ve hangi teknolojileri kullanacaklarını düşünmeye değer.

Veri URL'leri son bir seçenektir. Harici bir görüntü dosyasına bağlanmak yerine, görüntü verileri bir base64 (veya ASCII) kodlu dizeye dönüştürülebilir ve doğrudan CSS veya HTML dosyasına gömülebilir. Basit bir çevrimiçi dönüştürme aracı mevcuttur. Veri URL'leri, HTTP isteklerini kaydettikleri ve küçük dosyaları daha hızlı aktarabildikleri için yararlıdır. Ancak, aşağıda gösterildiği gibi, gömülü kod boyutu, harici görüntülere bağlantı vermekten daha büyüktür. Eklenen uzunluk, HTML ve CSS belgelerinin bakımını daha zor hale getirebilir ve görüntü değişikliklerinin her seferinde yeniden kodlanması ve gömülmesi gerekecektir.

 <img width="32" height="32" alt="Camera" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYZJREFUeNrsVsttwzAMtYUAvfrck0fIBukIyQAF5AkaTxB0gowQAR3AWcEbdASfeva1p5YEmIAgZEmWZKeHEhD8k2Ty8fFRZZFg3x/PL3DpYFSOac3T65eZ+qiKNLt4fo52Bker7A7AphoudcBU/PlxCQROM+a+TaGgFo7ei4JaIXonCmqF6J0oqJWiv6MgX5QU1R7LJTKyGBtgtKAP15J+3hWPsYOiyB9lZ7Ui7DarN5aXnzDeGeG2nk1GGKj1Pd3fGL+DoX1SjRz4kXlBcjByuvhhiEzjRMlWlGI9tcEmAT5nl0MjxxpwpKfGFYRASAoMbN7MFLCLDQkbAlsP7BhVKzaXOnKvczYN1+wlJ2KU0PCcM57wasL7jr7xdJgcUtzLWnbVuWdtlAOjYLlLR+qptbmOZMkW40Al8jp4mo51bYoDO/HcOua2nrVRDmh+sqFSO4hoB66ojC9BOhCSAmR3I5y4+jpfrhTcUNAzj3E6VIpniVJqM0p1YJF2/Od14N+BrPYrwAAH54zsDNHtwgAAAABJRU5ErkJggg==" />

CMS Medya Optimizasyonunu Otomatikleştirin

Önceki bölümdeki varlık optimizasyon tekniklerini uygulamak, BAM için yeni inşaat projesi fotoğraflarını sergilemelerini sağlayan klasik, görüntü odaklı bir tasarım seçebileceğimiz anlamına geliyordu.

Ancak BAM'a her bir görüntüyü optimize etmemize gerek kalmadan içeriği güncelleme özgürlüğü de vermemiz gerekiyordu. Elbette hiçbir çözüm elle optimizasyon kadar etkili olamaz, ancak makul bir düzeyde otomatik optimizasyon elde etmeyi başardık. Esneklik oluşturmak için mevcut Sitefinity CMS'lerini yeniden yapılandırdık. Görüntüleri otomatik olarak yeniden boyutlandırmak (ve optimize etmek) için her web sayfasının bağlamına uygun standart seçenekler kullanıldı:

 <thumbnailResizeSettings compositingQuality="HighQuality" interpolationMode="HighQualityBicubic" smoothingMode="HighQuality"> </thumbnailResizeSettings>

Sitefinity ayrıca URL parametrelerini kullanarak URL'deki resimleri yeniden boyutlandırabilir ve aşağıdaki seçeneği kullanarak yeniden boyutlandırılan resmi önbelleğe alarak daha da hızlı oluşturma elde edilebilir:

 /images/image-opt.jpg?size=480 

Çoğu CMS sistemi, bir dereceye kadar medya optimizasyonuna izin verir. Örneğin, gelecekteki kullanıcıların yalnızca web sitesi şablonlarına uyan görseller eklemesini sağlamak için medya ayarlarını tanımlayabilirsiniz. İşte WordPress'ten hızlı bir örnek.

 // Wordpress example <div class="avatar"> <?php the_thumbnail( 'thumbnail' ); ?> </div>

Yazı Tiplerini ve Simgeleri Kolaylaştırın

Yazı tipleri, bir web sitesinin veya uygulamanın kullanıcı deneyiminin ve markalaşmasının önemli bir parçasıdır, ancak kullanıcı için birinci öncelik olmayabilir. Bu nedenle, web yazı tipleri optimize etmek için başka bir faktör olabilir.

Yazı tipi yüklemeyi erteleyerek, tarayıcı, başlangıçta mevcut olan herhangi bir yazı tipinde kopyayı görüntüler. Bu, kullanıcının her zaman önce içeriği alacağı anlamına gelir. Yazı tipi yüklemesini erteleme, CSS'nin yazı tipi dosyalarına bağlanan kısmını ayırarak ve sayfanın geri kalanı oluşturulduktan sonra yükleyerek başarılabilir. Ancak, web yazı tipi yüklendiğinde metnin kısa süreliğine değişebileceğini unutmayın.

Benzer şekilde, simgeler sık ​​sık yüklenmesi gereken küçük dosyalar oldukları için optimize edilecek başka bir alandır. Simgeler için yazı tipi dosyalarını kullanmayı da düşünebilirsiniz. Çeşitli simgeler seçmek için Fontello gibi bir hizmet kullanın ve seçiminizle sınırlı bir yazı tipi dosyası oluşturun. Bu teknik, hafif bir performans etkisi ile tüm ekran çözünürlükleri için yüksek kaliteli vektör simgeleri oluşturabilir.

Alternatif olarak, resim spriteları iyi bilinen bir seçenektir. Görüntüleri tek bir dosyada birleştirir (yüklemek için yalnızca bir istek kullanır) ve arka plan konumunu kullanarak yalnızca tasarım için gereken kısmı görüntüler. Paul Stamatiou bunun nasıl yapıldığını açıklıyor ve birkaç sınırlamanın ana hatlarını çiziyor.

Yükleme Teknolojileri

Aşağıdaki teknikler, bir web sitesinin tüm içeriğini mobil tarayıcılara göndermekten kaçınır. Bunun yerine, her kesme noktası için optimize edilerek yalnızca gereken kesin veriler indirilir . Mobil yükleme hızı, Velocity Drive'ın treyler teknolojileri sağlayan web sitesi için önemli bir husustu. Tarayıcı özelliklerini test etmek ve aksaklıkları önlemek için JavaScript kitaplıkları tüm kesme noktalarında yüklenmelidir. Ancak varlıkları her kesme noktası için dikkatlice optimize ettik: ana sayfa yükleme boyutu mobilde yalnızca 323 KB'dir ve büyük masaüstlerinde 828 KB'ye yükselir.

Algılanan sayfa hızını artırmak için koşullu tembel yükleme teknikleriyle bunu daha da ileri götürün. Ana içerik ekranın üst kısmına yerleştirilmiş olarak, görünür bölümleri aşamalar halinde yüklerler. Kullanıcı içeriği kaydırmayı seçmedikçe, sayfaların sonunda bulunan pahalı öğeler (resimler gibi) yüklenmez. Bu teknik, Niu Solutions web sitesinin BT yeniliklerini kapsayan 'Insights' bölümünün anahtarıydı. Kullanıcı aşağı kaydırdıkça daha fazla makale yüklemek için jScroll adlı küçük bir jQuery eklentisi kullandık. Daha fazla içeriğe bağlantı gerektiren bu eklentiyi nasıl kuracağımıza dair bir örnek:

 <a href="articles.php" class="more">Load more</a>

 // Insights javascript $('.insights-container).jscroll({ nextSelector: '.more', loadingHtml: '<p>Loading...</p>' });

Ön yükleme teknolojileri daha fazla fırsat sunar. Daha hızlı bir deneyim sağlamak için, bir sonraki görüntülemeleri muhtemel sayfayı yükleyerek kullanıcının bir sonraki hareketini tahmin edebilir ve hazırlayabilirler. Ancak, Google Analytics'te davranış akış hunilerini inceleyebileceğiniz için, mevcut bir web sitesini yenilerken tipik trafik yapısını keşfetmek daha kolaydır.

Temel Bir Deneyimden Geliştirin

BBC'nin Duyarlı Haberleri, kullanıcıya istedikleri temel deneyimi verme, ardından kullanıcının ortamını değerlendirme ve deneyimi buna göre geliştirme fikrini ifade eder. Bunun basit bir örneği, başlangıçta düşük çözünürlüklü görüntüleri yüklemek ve ardından kullanıcının sahip olduğu bant genişliğine bağlı olarak yüksek çözünürlük göstermektir.

Bu fikir, web teknolojilerinin ortamlar arasında en iyi deneyimi sağlamak için katmanlandırıldığı aşamalı geliştirmenin bir parçasıdır. Aşamalı geliştirme, bir dizi farklı faktöre dayanabilir. Bunlar, bir kullanıcının tarayıcısı, işletim sistemi ve ortamı (internet hızı gibi) gibi erişime sahip olduğu teknolojiyi içerir. Burada, en az yetenekli tarayıcılarda çalışması gereken temel bir dizi özellik tanımlayın ve yalnızca tarayıcıların bunu işleyip işleyemediğini test ettikten sonra daha fazla karmaşıklık ekleyin.

Tarayıcının HTML5 ve CSS özelliklerini destekleyip desteklemediğini saptamak, tüm olasılıkları kapsayacak şekilde koşullu kod yazmamıza yardımcı olur: Desteklendiğinde özellikleri geliştirme ve ekleme, desteklemeyen cihazlar ve tarayıcılar için güvenli ve basit kalırken.

Özellik Testini Azaltın

Modernizr veya has.js gibi özellik testi kitaplıklarını birleştirmek, yaygın olarak önerilen bir uygulamadır. Ancak çok fazla geliştirici tüm kitaplığı uygular; özelliklerin eklenip eklenmeyeceğini belirlemek için yalnızca az sayıda sonuç gerekmesine rağmen tüm yetenekleri test ederler.

Tim Kadlec, aynı kitaplığın (en aza indirilmiş jQuery 2.1.1) bir dizi cihazda ayrıştırma ve yürütme süresini bildirir. Bu, bu kitaplıkları uygulamak için masaüstüne kıyasla genellikle daha büyük bir mobil performans maliyeti (eski ve yeni cihazlar arasında bile) olduğunu gösterir. Yalnızca ilgili web sitesi özelliklerini test ederek kitaplığı uyarlama eğilimindeyiz. Bu, zamandan ve değerli mobil işlem gücünden tasarruf sağlayacaktır.

Sunucu Tarafı Optimizasyonu

Sunucu yanıt süresi, web sitesi hızında önemli bir faktördür: çoğu, 200 ms'den daha azını hedefler. Ancak ağ gecikmesi (sunucu ile cihaz arasında veri hareket ederken yaşanan gecikme) mobil performansın gerçek darboğazı olup, mobil kullanıcıları daha yavaş bir deneyimle karşı karşıya bırakır.

Bu, ağ hızından etkilenir. Ofcom'a göre, popüler 3G ve 4G ağlarındaki ortalama indirme hızları Birleşik Krallık'ta 6.1 Mbps ve 15.1 Mbps idi. Bazıları bunu maksimum web sitesi boyutunda açık bir sınır olarak yorumlar. Ancak hız, kapsama ve çevresel bağlama bağlı olarak değiştiğinden gerçek daha karmaşıktır. Kullanıcılar, menzil dışındayken genellikle yavaş Kenar (E) ve GPRS'ye bağlanır.

Sunucu tarafı web sitesi performansını iyileştirmek için kullanılabilecek çeşitli teknikler vardır.

Önbelleğe Alma, Önceden Oluşturma ve Statik İçerik

Dinamik web sayfaları, çıktıları işlemek ve verileri biçimlendirmek ve ardından tarayıcı tarafından okunabilen HTML'ye dönüştürmek için değerli zaman alan birden fazla veritabanı sorgusu gerektirir. Bu cihaz için önceden oluşturulmuş içeriğin önbelleğe alınması önerilir. Geri dönen ziyaretçiler için, sıfırdan işlemek yerine önbelleği kontrol edecek ve yalnızca güncellemeleri gönderecektir.

Birçoğu, web içeriğini işlemek için Gidon ve Bıyık gibi JavaScript şablon kitaplıklarını da seçer. Ancak JavaScript'i ayrıştırmak ve yürütmek güç ve zaman alıcıdır. Mobil cihazlar, bu şablon kitaplıklarını masaüstü bilgisayarlar kadar hızlı işleyemez ve işlem kaynaklarını tüketemez. Sayfaları tamamen sunucuda oluşturmak çok daha hızlıdır. Twitter bu yaklaşımı 2012 gibi erken bir tarihte seçti ve değerini bloglarında açıkladı.

Son zamanlarda, kıdemli ön uç geliştiricimiz, kişisel portföyü için bu tekniğin sınırlarını zorladı. Sadece html_cache desteği ekleyen dosya tabanlı Statamic CMS ile oluşturulmuştur. Bu özellik uygulandığında, tüm sayfaların ortalama yükleme süresini kabaca 1,8 saniyeden 225 milisaniyeye düşürdü.

Tarayıcı Önbelleğe Alma

Ayrıntılı optimizasyon, sık güncellenmediğini bildiğiniz dosyaların düzenli olarak aktarılmasını önleyerek web sitesi yüklemesini kolaylaştırabilir. Tarayıcıya hangi tür içeriği depolayacağını ve kopyaları ne kadar süreyle saklamaları gerektiğini bildirmek için bir sunucu işleyicisi ( .htaccess dosyası gibi) kullanın . Apache sunucusunda tarayıcı önbelleğe almayı şu şekilde uygulayabilirsiniz:

 <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon and cursor images ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>

İçerik Dağıtım Ağları (CDN'ler)

Her zamanki barındırma hizmetinizin yanında CloudFlare gibi bir CDN kullanarak varlık yüklemesini iyileştirebilirsiniz. Burada, statik içerik (görüntüler, yazı tipleri ve CSS gibi) bir global sunucular ağında depolanır. Bir kullanıcı bu içeriği her istediğinde, CDN konumlarını tespit eder ve varlıkları en yakın sunucudan teslim ederek gecikmeyi azaltır. Ana sunucunun statik dosyalar sunmak yerine uygulamayı sunmaya odaklanmasını sağlayarak hızı artırır.

Maliyet eklemesine rağmen , varlık ağırlıklı web sitelerinin yükleme hızını artırmak için özel bir CDN kullanın . İlk kurulumun yanı sıra CloudFlare, manuel yapılandırma gerektirmez; önbellek, sizin için geçmiş trafiğe ve hangi varlıkların en iyi hizmet verileceğine dayalı olarak oluşturulur ve güncellenir. Ancak bunu gelecekteki bağımsız içerik yönetimini göz önünde bulundurarak uygulayın: Bir CMS'den yüklenen tüm varlıkların aynı zamanda CDN aracılığıyla şeffaf bir şekilde sunulduğundan emin olun.

Bir CDN, Eurofighter Typhoon web sitemiz için en iyi seçimdi, çünkü savunma uçaklarının çarpıcı yüksek çözünürlüklü fotoğrafları, yeteneklerini sergilemek için çok önemli bir özellikti. Raporlar, son 30 gün içinde CloudFlare'in isteklerin %76'sını ve bant genişliğinin %48'ini kurtardığını ve görüntü ağırlıklı web sitesinin hızını artırdığını gösteriyor.

Test yapmak

Üretim boyunca testin yerini hiçbir şey tutamaz. Mobil deneyimi simüle ederek ve olası performans sorunlarını teşhis ederek , devam eden çalışmaları test etmek için çeşitli araçlar kullanmayı hedefleyin .

Üretim ilerledikçe, her zaman sayılara dikkat edin: tasarım varlıklarının düzgün bir şekilde oluşturulup dışa aktarıldığından emin olmaktan, tarayıcınızdaki geliştirici araçları aracılığıyla sayfa dosyası boyutunu ve HTTP isteklerinin miktarını kontrol etmeye kadar. Burada, Ağ sekmesi size yüklenen kaynaklar, toplam dosya boyutu ve oluşturma süresi hakkında eksiksiz bir genel bakış sunar:

Yukarıdaki Chrome Inspector'da zaman çizelgesinin sağındaki mavi ve kırmızı dikey çizgilere dikkat edin. Bunlar sırasıyla DOM Ready ve Page Load olaylarını temsil eder. Pencerenin altında, geçerli kesme noktasında yüklenen HTTP isteklerinin miktarını ve toplam dosya boyutunu görüntüler.

Diğer araçlar şunları içerir:

• WebPagetest, canlı URL'leri test etmek için çok çeşitli seçenekler sunar: dünya çapında herhangi bir yer seçmekten belirli 3G ve 4G bağlantı hızlarını ve gecikmeyi şekillendirmeye kadar. Hatta film şeridi görünümü ve video aracılığıyla web sitesinin bu kullanıcılar için nasıl yüklendiğini deneyimleyebilirsiniz.
• Google'ın Pagespeed Insights'ı, sayfa hızını analiz etmek için daha görsel, giriş niteliğinde bir araçtır. Sonuçları masaüstü veya mobil olarak böler ve sitenizin hedeflenen alanlarını iyileştirmek için teknikler önerir: önbelleğe alınacak kaynakları veya optimize edilecek görüntüleri belirtir.

Gerçek Cihazlarda Test Edin

Ancak yalnızca simülatörlere güvenmeyin. Ayrıca projeleri üretim boyunca çeşitli gerçek mobil cihazlarda test ediyoruz.

Kendi cihaz laboratuvarınızı oluşturun veya OpenDeviceLabs'ı kullanın. İdeal olarak, güçlü ofis Wi-Fi'sinden kaçınarak gerçek kullanıcı deneyimini anlayın. Ofis ağının dışından erişebileceğiniz bir web sunucusunda (ideal olarak canlı sunucuyla aynı) bir test sitesi oluşturun. Ardından, hareket halindeyken kalabalık bir kafe veya otel gibi tipik ortamlarda ağ bağlantısı üzerinden test edin.

Mobil Performans Özeti

Her şeyden önce, mobilde estetik ve performansı dengeleyebilen ve gerçek dönüşüm metrikleri elde edebilen bir web sitesi oluşturmayı hedefleyin. İşbirliğine dayalı, yinelemeli bir performans optimizasyon süreci, bunu başarmanıza yardımcı olacaktır.

Projenin başlangıcından itibaren, sıkı bir performans bütçesi belirleyerek şirket içi ekibi mobil bir zihniyet altında birlikte çalışmaya teşvik edin. Mobil cihazlarda web sitesi performansını belirleyen istemci ve sunucu tarafı faktörleri hakkında bir anlayış oluşturun. Ardından, tarif ettiğim hedeflenen optimizasyon tekniklerinin bir karışımını uygulayarak belirlenen hedefe ulaşabilirsiniz. Tabii ki, bazı durumlarda çarpıcı bir tasarım, yüksek performans ve güvenlik arasında hala bir ödünleşim var; işbirlikçi bir tasarım ve geliştirme ekibi, ilgili proje yöneticileri ve paydaşlarla kontrol ederek iş için en iyisinin ne olduğuna karar verebilir.

Küresel bir teknoloji danışmanlığına yönelik optimizasyon projemiz, bu tekniklerin yükleme hızını ve boyutunu önemli ölçüde iyileştirmek için nasıl birleştirilebileceğini gösteriyor. Proje, diğer tekniklerin yanı sıra şablonları ve sayfaları önbelleğe almayı, varlıkları ve yazı tiplerini optimize etmeyi ve özellik testini azaltmayı içeriyordu. Şimdiye kadar testler, işleme ve toplam yükleme süresinin, çalışmaya başlamadan yaklaşık 4 saniye öncesine göre 1,4 saniyenin altına düştüğünü gösteriyor; benzer şekilde, dosya boyutu 3MB'den 1MB'a düşürülmüştür.

SmashingMag'de Daha Fazla Okuma :

• Ön Uç Performans Kontrol Listesi 2017
• HTTP/2'ye Hazırlanmak
• AMP Hakkında Bilmeniz Gereken Her Şey
• Mobil Tarayıcının (Pek Değil) Gizli Güçleri