Özet
Google+ tamamen duyarlı hale gelir.
Duyarlı olma
Google+, Zombie Kedilerden Klasik Hesap Makinelerine kadar kullanıcıların ortak ilgi alanları etrafında bir araya geldiği yerdir. Yakın zamana kadar, Google+ web sitesinin biri masaüstü, diğeri mobil web için eski tarayıcılar için tasarlanmış olmak üzere iki farklı sürümü vardı.
Meydan okumalar
İki site yönetmek, beraberinde benzersiz zorluklar da getirdi. Sitenin ayrı sürümlerine sahip olmak, her özelliğin iki kez uygulanması anlamına geliyordu. Bu da çok sayıda yinelenen koda ve masaüstü ile mobil web için iki deneyimi optimize etmeye yönelik ek çabaya neden oldu. Cihazlar arasındaki çizgiler giderek daha bulanık hale geldi. Dokunmayı destekleyen masaüstü bilgisayarlar ve daha büyük ekranlara sahip olan masaüstü bilgisayarlar sayesinde, masaüstü ve mobil cihazlar için farklı tasarımlara sahip olmak giderek daha az mantıklı hale geldi.
Yeni özellikler ekledikçe eski masaüstü sitemiz de yavaş ve şişmiş hale geldi. Bu yılın başlarında ana sayfamızın ağırlığı yaklaşık 5 MB'tı ve yaklaşık 250 HTTP isteği üretiyordu. Ancak iyi performans göstermiyordu. Sitedeki resimler ağır ve optimize edilmemiş, bu da sayfayı daha da yavaşlatıyor. Bu nedenle, yavaş ve kararsız ağlar üzerinden akışımız neredeyse erişilemez durumdaydı ve bu kullanıcıların deneyimi en iyileri hayal kırıklığına uğrattı. Ayrıca, mobil web'de eski tarayıcıları destekleme gereksinimi, site genelinde JavaScript'e güvenmemizi sağladı ve yüksek oranda etkileşimli özellikler uygulamamızı engelledi. Mobil web tarayıcılarındaki gelişmelere güvenemiyorduk.
Çözüm
Mobil cihaz, tablet, masaüstü ve diğer platformlarda çalışan tek bir uygulama olan duyarlı tasarıma odaklanarak işe başladık. Her bir özelliği, sayfayı, JavaScript kitaplığını ve CSS sınıfını ayrıntılı bir şekilde inceledik. Kullanıcı daha fazlasını istemediği sürece sitenin yalnızca çalışması için kesinlikle gerekli olan içerikleri indirmesini sağlayacak bir sistem oluşturmak istedik. Buradaki zorluk, hücresel bağlantısı olan daha yavaş bir cep telefonunda düzgün çalışan, ancak daha hızlı tarayıcılarda ve büyük ekranlarda mükemmel bir etkileyici deneyim sunan bir web sitesi oluşturmaktı.
Bu kısıtlamalar nedeniyle ileriye dönük her bir kod değişikliğini ayrıntılı olarak incelememiz gerekiyordu. Bu amaç doğrultusunda, ilk sayfa yüklemesinde 60.000'den fazla HTML, 60.000'den fazla JavaScript, 60.000 CSS'den fazla indirmediğimizden, animasyonlarımızın her zaman 60 fps olmasını ve ortalama 0,6 sn'lik bir gecikmeyle karşılaştığımızdan emin olmak için 6^5 kuralı oluşturduk.
Bunu başarmak için başlangıçtan itibaren modülerlik ve geç yüklemeyi sağlayan JavaScript ve CSS çerçevelerini seçtik. Dolayısıyla, kullanıcıların JavaScript ve CSS'yi yalnızca bunu gerektiren özelliği fiilen kullandıklarında indirmelerini sağlıyoruz. Bu, geliştirme ve modül sistemimizle birlikte kullanılan şablon odaklı bir yaklaşımla gerçekleştirilir. Böylece, işler geliştiricilerin neredeyse hiç çaba sarf etmesine gerek kalmadan çalışır.
Bu yeni çerçeveyle, Google+'nın web'de yeniden uygulanmasının prototipini oluşturmaya başladık. "Kötü" şeylere izin vermemeye ve geliştirmeye katı kurallar koymaya başladık. Başlıca kurallarımızdan biri, tüm sayfalarımızın hem sunucu hem de istemci tarafında oluşturulmuş olmasıydı. Sunucu tarafında oluşturma özelliğiyle, kullanıcının HTML yüklenir yüklenmez okumaya başlayabilmesini ve sayfanın içeriğini güncellemek için JavaScript'in çalıştırılmasına gerek kalmamasını sağlarız. Sayfa yüklendikten ve kullanıcı bir bağlantıyı tıkladıktan sonra, her şeyi tekrar oluşturmak için tam bir döngü gerçekleştirmek istemiyoruz. İstemci taraflı oluşturma burada önemli hale gelir. Tek yapmamız gereken verileri ve şablonları alıp istemcide yeni sayfayı oluşturmamızdır. Bu işlemde birçok denge gerekir. Bu yüzden, her şeyi hem sunucuda hem de istemcide iki kez uygulamak zorunda kalmadan sunucu tarafında ve istemci tarafında oluşturmayı kolaylaştıran bir çerçeve kullandık.
Tarayıcının yeniden düzenlerine neden olacak ve performans üzerinde olumsuz etkileri olan yükseklik ve genişlik animasyonlarına izin vermemek de diğer kurallardandı. DOM ve animasyonlar için görevlerin, tarayıcının oluşturma yenileme hızıyla senkronize olarak tamamlanmasını planladık. Ayrıca pahalı yinelenen stil hesaplamalarından kaçınmak için tüm ölçüm görevlerini birlikte gruplandırırız. Ayrıca, ilerledikçe her şeyin planlandığı gibi çalıştığından emin olmak için Chrome profil aracı araçlarını büyük ölçüde kullandık. Buna ek olarak, sayfa boyutumuzu önemli ölçüde artırmamak için kod değişikliklerinin JS ayak izi üzerindeki etkisini hesaplayan araçlar oluşturduk.
Bu süreç biraz zaman aldı. Ancak, geliştirdiğimiz sorunları tespit edip ortadan kaldırma kabiliyetimiz olmasaydı çok daha zor olurdu.
Bu duyarlı uygulamanın mobil web sürümünü Şubat 2015'te kullanıma sunmuştuk. Bu, yeni tasarımları ve yeni sürecimizi incelememize olanak tanıdı. Nelerin işe yarayıp nelerin yaramadığını doğrulamak için bu lansmandan elde edilen verileri kullandık. Tasarımı geliştirmeye devam ettik ve daha fazla cihazı destekleyecek şekilde genişlemeye başladık. Kasım 2015'te bu yeni uygulamayı tüm cihazlarda kullanıma sunduk.
Sonuçlar
Google+, performanstan ödün vermeden zengin kullanıcı arayüzüne sahip karmaşık bir web uygulaması oluşturmayı başardı. Site artık her zamankinden daha hızlı ve daha yalın.
| Önce | Sonra | |
|---|---|---|
| Gzip biçiminde sıkıştırılmış toplam ana sayfa ağırlığı (resimlerle birlikte) | 22.600 KB | 327 KB |
| İstek sayısı | 251 | 45 |
| HTML (gzip'lenmemiş) | 1.100 KB | 362 KB |
| JavaScript ve CSS (gzip uygulanmış) | 2.768 KB | 111KB |
| Ortalama tam sayfa yüklenme süresi (gecikme) | 12 saniye İlk bayta kadar 0,7 saniye |
3 saniye İlk bayta 0,1 saniye |