Hızın bir özellik olduğu web uygulamaları.
Sunucuda render edilen, Core Web Vitals bütçeleri tanımlı, erişilebilirliği gözeten web uygulamaları — kendi platformlarımızda uyguladığımız disiplinin aynısı.
- Mimari & bütçeler
- Tasarım sistemi & temel akışlar
- Özellik geliştirme
- Lansman & RUM
Her rota bir performans bütçesiyle yayına çıkar.
Web, herkese ulaşan yüzeydir: kurulum yok, anında güncelleme, tek kod tabanı, e-postaya koyabileceğiniz bir bağlantı. Aynı zamanda kalitenin en hızlı aşındığı yüzeydir; çünkü her sprint bir betik, bir yazı tipi, bir üçüncü taraf bileşeni ve render engelleyen bir istek daha ekler ve hiçbiri tek başına pahalı görünmez. Aylar sonra açılış sayfasının orta seviye bir telefonda kullanılabilir hale gelmesi uzun sürer, dönüşüm oranı sessizce düşmüştür ve kimse buna yol açan değişikliği gösteremez. Biz, performansı ve erişilebilirliği bütçesi olan gereksinimler olarak ele alan web uygulamaları geliştiriyoruz — ilk teslim tarihine kadar yaşayan temenniler olarak değil.
Bu, mimarinin bileşenlerden önce kararlaştırılması demektir: hangi rotalar sunucuda render edilecek, hangi veri nerede önbelleğe alınacak, JavaScript gelmeden önce sayfanın ne göstermesi gerekiyor. Sunucu render'ı varsayılandır; çünkü ilk boyama için daha iyidir, arama için daha iyidir ve var olma nedenini kendisi çekmek zorunda kalan bir istemciye göre üzerinde akıl yürütmesi daha kolaydır. Etkileşim, alışkanlıkla her yere değil, ürünün ihtiyaç duyduğu yere eklenir; böylece ağır kod yalnızca bunu hak eden birkaç ekrana gider.
Bir değişiklik bütçeyi aşarsa derleme başarısız olur — incelemeden önce, lansmandan sonra değil. Hız, yol haritasından böyle sağ çıkar ve bütçe konuşması bu yüzden tekrar tekrar bir kurtarma projesi olarak değil, başlangıçta bir kez yapılır.
Bir web uygulamasının doğru yapması gereken dört şey.
Bunların hiçbiri son rötuş değildir. Her biri, başta ucuz, sonradan yapısal olan bir mimari karardır.
Modern SSR mimarisi
Sunucu render'ı ve edge önbelleğiyle Next.js ve React — hızlı ilk boyama, arama motorlarının okuyabildiği işaretleme ve gerektiği yerde uygulama düzeyinde etkileşim. Kararı rota bazında veririz: içerik ortaksa statik, kişiselse sunucuda render edilir, ekran gerçekten bir girişin arkasındaki uygulamaysa yalnızca istemci tarafında. Veri erişimi sunucuda durur; böylece tarayıcı hiçbir zaman kimlik bilgilerinin veya iş kurallarının sızdığı bir yer olmaz.
Core Web Vitals bütçeleri
Rota bazında belirlenen ve CI'da zorunlu kılınan LCP, CLS ve INP bütçeleri, yanlarında bir paket boyutu tavanıyla birlikte. Bir rotayı bütçesinin üzerine çıkaran pull request, bozuk bir test gibi başarısız olur; böylece ödünleşim, yazar hâlâ kodun içindeyken görünür olur. Gerçek kullanıcı izlemesi bütçeyi lansmandan sonra da dürüst tutar; çünkü hızlı bir dizüstü bilgisayarda alınan laboratuvar skoru, gerçek kitleniz hakkında kanıt değildir.
Standart olarak erişilebilirlik
Çalışma çıtası WCAG 2.1 AA: anlamsal işaretleme, klavye akışları, yönetilen odak, makul kontrast ve temel yolculuklarda ekran okuyucu turları. Mekanik hataları yakalamak için CI hattında otomatik kontroller çalışır, araçların göremediklerini ise elle yapılan bir tur kapsar — odağı hapseden bir modal, hatasını kimseye duyurmayan bir form. Ayrıca fonlayacağınız en ucuz kullanılabilirlik çalışmasıdır ve giderek daha sık bir satın alma koşulu haline gelmektedir.
Ölçeklenen tasarım sistemleri
Ürün ekiplerinin piksel arkeolojisi yapmadan tutarlı arayüzler yayınlaması için token tabanlı bileşen kütüphaneleri. Renk, boşluk, tipografi ve köşe yarıçapı, gerçekten bir anlam taşıyan adlarla token olarak yaşar; bileşenler durumlarıyla birlikte belgelenir ve kütüphane diğer bağımlılıklar gibi sürümlenir. UX / UI ekibimiz, kodun tükettiği token'ların aynısıyla tasarlar; bu da bir dosya ile bir derleme arasındaki alışılmış çeviri kayıplarını ortadan kaldırır.
İş günlük olarak nasıl yürür?
Bütçe, derlemenin zorunlu kıldığı bir sayıdır.
Sitenin hızlı olması gerektiği konusunda herkes hemfikirdir. Ne kadar hızlı olacağını sayfa bazında yazan ve olmadığında derlemeyi başarısız kılan neredeyse yoktur. Bütçeyi birinci fazda rota bazında belirleriz — en büyük içerik boyaması, etkileşim gecikmesi, düzen kayması ve bir JavaScript tavanı — rotanın ne işe yaradığından türeterek. Bir pazarlama açılış sayfası ile bir iç raporlama tablosu aynı sayıyı hak etmez; aksini varsaymak bütçelerin göz ardı edilme yoludur. Ardından CI hattı her pull request'i, dokunduğu rotaların bütçesine göre ölçer ve bir gerileme, sorumlu yükün adı verilerek kırmızı bir derlemeye dönüşür.
- Birinci fazda sizinle mutabık kalınan ve depoya kaydedilen rota bazlı bütçeler
- CI, bir değişikliğin dokunduğu rotalar için kontrolü önizleme ortamında çalıştırır
- Cihaz ve ağa göre ayrıştırılmış gerçek kullanıcı izlemesi; böylece bütçe kitlenizi yansıtır
Tek bir token seti, bütün ekranlar.
Arayüz tutarsızlığı nadiren bir zevk meselesidir. Aynı düğme, her biri biraz farklı bir orijinalden kopyalanmış halde dokuz yerde bulunduğunda ve hangisinin güncel olduğunu kimse bilmediğinde ortaya çıkan şeydir. Token'laştırılmış bir tasarım sistemi nedeni düzeltir: değerler bir kez tanımlanır, bileşenler onları tüketir ve bir token'daki değişiklik arama gerektirmek yerine kendiliğinden yayılır. Kütüphane belgelenmiş durumlarla gelir — varsayılan, üzerine gelme, odak, devre dışı, yükleniyor, hata — çünkü bunlar bir sprintin sonunda ayaküstü uydurulan ve klavye ile ekran okuyucu kullanımını bozan durumlardır.
- Tasarımın ve kodun paylaştığı renk, boşluk, tipografi, köşe yarıçapı ve hareket token'ları
- Odak ve hata dahil her durumuyla belgelenmiş bileşenler
- Sürümlenip yayımlanır; böylece ürün ekipleri kopyala-yapıştır yerine bilinçli olarak yükseltir
Erişilebilirlik, gerçekten aksadığı yerde kontrol edilir.
Otomatik erişilebilirlik araçları eksik etiketleri ve zayıf kontrastı bulur; en çok önem taşıyan iki hata hakkında ise hiçbir şey bulmaz: bir diyalogdan çıkamayan klavye kullanıcısı ve formun reddedildiği kendisine hiç bildirilmeyen ekran okuyucu kullanıcısı. Bu yüzden iki turu da yaparız. CI hattı mekanik kusurları her pull request'te yakalar, lansmandan önce ise bir kişi temel yolculukları klavye ve ekran okuyucuyla adım adım gezer. Sonuç, nelerin bulunduğu ve nelerin düzeltildiğiyle birlikte yazılır; bu aynı zamanda satın alma ekibinizin isteyeceği belgedir.
- Her rotada CI'da otomatik kontroller; yeni ihlallerde birleştirmeyi engeller
- Geliri taşıyan yolculuklarda elle klavye ve ekran okuyucu turları
- Bulguları, düzeltmeleri ve kabul edilen istisnaları içeren, depoda tutulan bir denetim kaydı
Tek uygulama, üç ayrı beklenti kümesi.
İlgi tükenmeden yüklenen sayfalar.
İlk anlarda kullanılabilir olmayan bir sayfada müşteri kazanım bütçesi boşa gider. Pazarlama rotaları geliştirdiğimiz en hızlı şeydir: sunucuda render edilir, edge'de önbelleğe alınır; görseller boyutlandırılmış, yazı tipleri yüklenmiştir, böylece geldiklerinde hiçbir şey yerinden oynamaz. Yapılandırılmış veri, canonical düzeni ve site haritası üretimi sonraki bir iş kaydı değil, tamamlanma tanımının parçasıdır.
- Her kazanım rotasında edge'de önbelleklenen sunucu render'ı
- İçerik modelinden üretilen yapılandırılmış veri, canonical'lar ve site haritaları
- Ekibinizin devreye alma olmadan düzenlediği bir içerik modeli
Büyüdükçe hızlı kalan uygulama ekranları.
Girişin arkasında kısıt değişir: mesele ilk boyamadan çok, veri yoğun ekranlardaki etkileşim gecikmesidir. Ağır işi sunucuda tutar, tablo uzunsa sonuçları akıtır ve her yeni bağımlılığı bir bedeli olan bir karar olarak ele alırız. Özellik geliştirme aynı bütçelere karşı yürür; böylece yirminci ekran varsayılan olarak ikinciden yavaş olmaz.
- Tipli sözleşmelerle sunucu tarafında veri erişimi; böylece tarayıcı hiçbir iş kuralı tutmaz
- Veri yoğun görünümlerde tek büyük yük yerine akış ve sayfalama
- Etkileşim gecikmesi derleme makinesinde değil, orta seviye cihazlarda ölçülür
Sizin adınıza hayır diyen bir CI hattı.
Kalitenin kalıcı hale geldiği yer CI hattıdır. Her pull request bir önizleme URL'si, tip kontrolü, testler, bir erişilebilirlik taraması ve bir bütçe kontrolü alır; main dalı otomatik olarak staging'e çıkar; etiketlenmiş bir sürüm, önce geçişler ve provası yapılmış bir geri alma ile canlı ortama gider. Altyapı koddur; böylece ortam, nasıl kurulduğunu hatırlayan bir kişiye ihtiyaç duyulmadan yeniden kurulabilir — DevOps & Cloud sayfamızda anlatılan standartların aynısı.
Bütçeli teslimat ile alışılmış düzen.
Dört faz; bütçe derlemeden önce belirlenir.
Mimari & bütçeler
Rota haritası, render stratejisi, veri akışları — ve her şeyin karşısında ölçüldüğü rota bazlı performans bütçeleri. Hangi rotaların statik, hangilerinin istek başına sunucuda render edilen, hangilerinin girişin arkasındaki istemci uygulamaları olduğuna karar verir, ardından her birinin kitlenizin gerçekten kullandığı cihaz ve ağlarda tutturması gereken sayıları belirleriz. Çıktı, kısa bir mimari notu ve depoda bir bütçe dosyasıdır; CI hattı ikisini de okuduğu için ikisi de güncel kalır.
Tasarım sistemi & temel akışlar
Token'lar, bileşenler ve önce inşa edilip düzenli olarak gösterilen en yüksek değerli kullanıcı yolculukları. Bileşen kütüphanesi, varsayımsal bir set olarak değil, ilk yolculukların ihtiyaç duyduğu ölçüde inşa edilir; böylece her bileşen gerçek bir kullanım ve belgelenmiş durumlarla gelir. Fazın sonunda, canlı bir ortamda, sizin token'larınızla biçimlendirilmiş, bir paydaşın hayal etmek yerine tıklayarak gezebileceği çalışan bir ürün yolu bulunur.
Özellik geliştirme
Bütçelenmiş rotalara karşı sprint teslimatı; her incelemede erişilebilirlik kontrolleri ve her pull request'te çalışan bütçe kontrolü ile. Kapsam kararları düzenli demolarda alınır ve bir bütçeyi ihlal edecek her şey ya optimize edilir ya da sizinle açıkça yeniden bütçelenir — sessizce yutulmaz. İsterseniz mühendisleriniz ilk sprintten itibaren pull request'lerimizi inceler; bu da devir teslimi bir formaliteye indirir.
Lansman & RUM
Geçiş, gerçek kullanıcı izlemesi ve canlı trafiğe karşı bir ince ayar penceresi. Saha verisi neredeyse her zaman laboratuvarla işe yarar biçimlerde çelişir — yavaş bir üçüncü taraf betiği, yalnızca tek bir ağda zarar veren bir yazı tipi, kimsenin en çok ziyaret edileceğini öngörmediği bir rota — ve ince ayar penceresi bunlara göre hareket etmek için vardır. Bu fazdan cihaz ve ağa göre ayrıştırılmış panolar, mutabık kalınmış uyarı eşikleri ve gerçekliğe göre güncellenmiş bütçelerle çıkarsınız.
Devir teslimde masada ne var.
- Mutabık kalınan Core Web Vitals bütçelerini karşılayan, devreye alınmış bir uygulama
- Belgeleriyle birlikte token tabanlı bileşen kütüphanesi
- Erişilebilirlik denetimi sonuçları ve düzeltme kaydı
- Bütçe denetimi ve önizleme ortamlarıyla CI/CD
- Gerçek kullanıcı izleme panoları
- Render, önbellekleme ve veri erişimini kapsayan bir mimari notu
- Kod olarak altyapı
- Ekibinizle provası yapılmış sürüm, geri alma ve olay müdahalesi runbook'ları
Bu ne zaman doğru tercih.
Müşterilerinizin ürünle buluştuğu yer web ise ve mevcut deneyim onları kaybediyorsa bunu seçin: kullanılabilir hale gelmesi çok uzun süren sayfalar, mobilde terk edilen bir ödeme akışı, insanların kaçındığı bir iç uygulama ya da aynı düğmenin dokuz sürümüne dağılmış bir arayüz. Hızın ve arama görünürlüğünün ticari gereksinim olduğu yeni bir proje için, mevcut bir uygulamanın yavaşladığı ve nedenini kimsenin söyleyemediği bir kurtarma için ve birkaç ekibin elle koordine olmadan tutarlı ekranlar yayınlaması gereken bir tasarım sistemi programı için uygundur. İlk sürüm henüz kanıtlanmadıysa, MVP daha ucuz bir başlangıç noktasıdır.
Ürün gerçekten telefona aitse başka yere bakın — yoğun cihaz entegrasyonu, çevrimdışı saha kullanımı, temel mekanizma olarak bildirim — burada dürüst yanıt mobil geliştirme olur; yine de yanında sıklıkla bir web uygulaması da yayına çıkar. Asıl kısıt arayüzün arkasındaysa başka yere bakın: yeterince hızlı yanıt veremeyen bir kayıt sistemi, bunu ön yüz kostümü giymiş bir entegrasyon veya modernizasyon sorunu haline getirir. Ve lansmandan sonra kimsenin sahiplenmeyeceği bütçelere karşı temkinli olun — zorunlu kılınmayan bir bütçe zamanla aşınır.
Sık sorulan sorular
Bu neyle bağlantılı.
Hangi sayfa size müşteri kaybettiriyor?
Bize URL'yi ve kimin için olduğunu gönderin. Bir mühendis okur, saha verinize bakar ve onu gerçekten neyin hızlandıracağını yazılı olarak iletir.