Bu sayfa, Cloud Translation API ile çevrilmiştir.

Device Memory API

Philip Walton

Web'e bağlanabilen cihazların özellikleri bugün her zamankinden daha geniştir. İleri teknoloji bir masaüstü bilgisayara sunulan aynı web uygulaması, düşük performanslı bir telefona, saate veya tablete de sunulabilir ve tüm cihazlarda sorunsuz çalışan ilgi çekici deneyimler oluşturmak son derece zor olabilir.

Cihaz Belleği API'si, web geliştiricilerinin modern cihaz görünümüyle ilgilenmesine yardımcı olmayı amaçlayan yeni bir web platformu özelliğidir. navigator nesnesine navigator.deviceMemory adlı salt okunur özelliği ekler. Bu özellik, cihazın gigabayt cinsinden ne kadar RAM'i olduğunu, ikinin en yakın kuvvetine yuvarlayarak döndürür. API, aynı değeri bildiren bir İstemci İpuçları Başlığı (Device-Memory) da içerir.

Device Memory API, geliştiricilere iki temel seçenek sunar:

Döndürülen cihaz bellek değerine göre hangi kaynakların sunulacağı konusunda çalışma zamanı kararları alın (ör. düşük bellekli cihazlardaki kullanıcılara bir uygulamanın "hafif" sürümünü sunma).
Bu değeri bir analiz hizmetine raporlayarak cihaz belleğinin kullanıcı davranışları, dönüşümler veya işletmeniz için önemli olan diğer metriklerle olan ilişkisini daha iyi anlayabilirsiniz.

İçeriği cihaz belleğine göre dinamik olarak uyarlama

Kendi web sunucunuzu çalıştırıyorsanız ve kaynaklara hizmet veren mantığı değiştirebiliyorsanız Device-Memory İstemci İpuçları Başlığını içeren isteklere koşullu olarak yanıt verebilirsiniz.

GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*

Bu teknikle, uygulama komut dosyalarınızın bir veya daha fazla sürümünü oluşturabilir ve Device-Memory üst bilgisinde ayarlanan değere göre istemciden gelen isteklere koşullu olarak yanıt verebilirsiniz. Bu sürümlerin tamamen farklı kod içermesi gerekmez (çünkü bunun bakımı daha zordur). Çoğu zaman "basit" sürüm, pahalı olan ve kullanıcı deneyimi açısından kritik öneme sahip olmayan özellikleri hariç tutar.

İstemci İpuçları Başlığını Kullanma

Device-Memory üstbilgisini etkinleştirmek için dokümanınızın <head> öğesine İstemci İpuçları <meta> etiketini ekleyin:

<meta http-equiv="Accept-CH" content="Device-Memory">

Veya sunucunuzun Accept-CH yanıt başlıklarına "Cihaz-Belleki"ni ekleyin:

HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width

Bu işlem, tarayıcıya geçerli sayfa için tüm alt kaynak istekleriyle birlikte Device-Memory üstbilgisini göndermesini ister.

Diğer bir deyişle, web siteniz için yukarıdaki seçeneklerden birini uyguladığınızda, bir kullanıcı 0,5 GB RAM'e sahip bir cihazı kullanarak siteyi ziyaret ederse bu sayfadan gelen tüm resim, CSS ve JavaScript isteklerinde değeri "0,5" olarak ayarlanmış Device-Memory başlığı yer alır ve sunucunuz bu tür isteklere uygun gördüğünüz şekilde yanıt verebilir.

Örneğin, aşağıdaki Express rota, Device-Memory üstbilgisi ayarlanmışsa ve değeri 1'den küçükse ya da tarayıcı Device-Memory başlığını desteklemiyorsa veya değer 1 ya da daha büyükse "tam" sürüm sunar:

app.get('/static/js/:scriptId', (req, res) => {
  // Low-memory devices should load the "lite" version of the component.
  // The logic below will set `scriptVersion` to "lite" if (and only if)
  // `Device-Memory` isn't undefined and returns a number less than 1.
  const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';

  // Respond with the file based on `scriptVersion` above.
  res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});

JavaScript API'sini kullanma

Bazı durumlarda (statik dosya sunucusu veya CDN gibi) isteklere bir HTTP başlığına göre koşullu olarak yanıt veremezsiniz. Bu gibi durumlarda, JavaScript kodunuzda koşullu isteklerde bulunmak için JavaScript API'sini kullanabilirsiniz.

Aşağıdaki mantık, istemci tarafı mantığında komut dosyası URL'sini dinamik olarak belirlemesi dışında yukarıdaki Express yoluna benzer:

// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';

const component = await import(`path/to/component.${componentVersion}.js`);
component.init();

Cihaz özelliklerine göre aynı bileşenin farklı sürümlerini koşullu olarak sunmak iyi bir strateji olsa da bazen bir bileşeni hiç sunmamak daha da iyi olabilir.

Çoğu durumda, bileşenler sadece geliştirmelerdir. Bunlar, deneyime güzel dokunuşlar katıyor, ancak uygulamanın temel işlevi için gerekli değil. Bu gibi durumlarda, en başta bu tür bileşenleri yüklememek akıllıca olabilir. Kullanıcı deneyimini iyileştirmeyi amaçlayan bir bileşen uygulamayı yavaşlaştırıyor veya yanıt vermiyorsa, hedefine ulaşmıyor demektir.

Kullanıcı deneyimini etkileyen herhangi bir karar vermeniz, etkisini ölçmeniz açısından son derece önemlidir. Uygulamanızın bugünkü performansını net bir şekilde kavramanız da önemlidir.

Uygulamanızın mevcut sürümünde cihaz belleğinin kullanıcı davranışıyla nasıl ilişkili olduğunu anlamak, yapılması gereken işlemler konusunda daha iyi bilgi sağlar ve gelecekteki değişikliklerin başarısını ölçebileceğiniz bir referans sağlar.

Analytics ile cihaz belleğini izleme

Device Memory API yenidir ve çoğu analiz sağlayıcısı varsayılan olarak bunu izlemez. Neyse ki, çoğu analiz sağlayıcısı özel verileri izleyebileceğiniz bir yöntem sunar (örneğin, Google Analytics'te Özel Boyutlar adlı bir özellik vardır). Bu özelliği, kullanıcılarınızın cihazları için cihaz belleğini izlemek amacıyla kullanabilirsiniz.

Özel cihaz belleği boyutu kullanma

Google Analytics'te özel boyutları kullanmak iki adımlı bir işlemdir.

Google Analytics'te özel boyutu oluşturun.
İzleme kodunuzu, yeni oluşturduğunuz özel boyutun cihaz bellek değeri set olarak güncelleyin.

Özel boyutu oluştururken boyuta "Cihaz Belleği" adını verin ve bir "oturum" kapsamı seçin. Çünkü değer, kullanıcının göz atma oturumu sırasında değişmeyecektir:

Google Analytics'te Cihaz Belleği özel boyutları oluşturma

Ardından, izleme kodunuzu güncelleyin. Aşağıda, bu durumun nasıl görünebileceğine dair bir örnek verilmiştir. Device Memory API'yi desteklemeyen tarayıcılarda boyut değerinin "(ayarlanmadı)" olacağını unutmayın.

// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');

// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');

// Do any other other custom setup you want...

// Send the initial pageview.
ga('send', 'pageview');

Cihaz Belleği verilerini raporlama

Cihaz belleği boyutu izleyici nesnesinde set olduğunda, Google Analytics'e gönderdiğiniz tüm veriler bu değeri içerir. Bu sayede, korelasyon olup olmadığını görmek için istediğiniz metriği (ör. sayfa yükleme süreleri, hedef tamamlama oranı vb.) cihaz belleğine göre ayırabilirsiniz.

Cihaz belleği yerleşik bir boyut değil, özel bir boyut olduğundan, bunu standart raporların hiçbirinde görmezsiniz. Bu verilere erişmek için özel rapor oluşturmanız gerekir. Örneğin, yükleme sürelerini cihaz belleğine göre karşılaştıran özel bir raporun yapılandırması şöyle görünebilir:

Google Analytics'te Cihaz Belleği özel raporu oluşturma

Oluşturulan rapor da aşağıdaki gibi görünebilir:

Cihaz bellek verilerini topladıktan ve kullanıcıların, bellek spektrumundaki tüm aralıklarda uygulamanızı nasıl bulduğuna dair bir referans oluşturduktan sonra, farklı kullanıcılara farklı kaynaklar sunmayı deneyebilirsiniz (yukarıdaki bölümde açıklanan teknikleri kullanarak). Sonrasında sonuçlara bakıp iyileştirip ilerlemediklerini görebilirsiniz.

Özet

Bu yayında, uygulamanızı kullanıcılarınızın cihazlarına göre özelleştirmek için Device Memory API'nin nasıl kullanılacağı özetlenmekte ve bu kullanıcıların uygulamanızla nasıl deneyim yaşadığını ölçme yöntemleri gösterilmektedir.

Bu yayın Device Memory API'ye odaklanmaktadır, ancak burada açıklanan tekniklerin çoğu cihaz özelliklerini veya ağ koşullarını bildiren tüm API'lere uygulanabilir.

Cihaz ortamı büyümeye devam ettikçe, web geliştiricilerinin deneyimlerini etkileyen kararlar alırken tüm kullanıcı yelpazesini göz önünde bulundurması her zamankinden daha önemli hale geliyor.