Web sitenizin temel işlevlerinin her zaman kullanılabilir, erişilebilir, güvenli, kullanılabilir, bulunabilir ve hızlı olmasını sağlama.
Bu sayfa, web sitenizin her zaman herkes tarafından erişilebilir, erişilebilir, güvenli ve kullanılabilir olmasını sağlamanıza yardımcı olacak yönergeler sağlar.
Bu sayfadaki kılavuz, kısa vadeli odaklarını insanların COVID-19 sürecinde güvende kalmalarına yardımcı olan web sitelerini desteklemeye kaydıran, Google'daki çeşitli işlevlerden oluşan ekiplerden alınmıştır. Bu Google çalışanları, web'i daha önce nadiren kullanan veya hiç kullanmamış olan, kritik bilgi arayan kişilerin site talebindeki beklenmedik artışlarla karşılaştığını gördü. Bu süreçte sitelerin kullanılabilir ve herkesin erişimine açık olmasını sağlamak zor olabilir.
Yönerge
Kullanılabilirlik, güvenilirlik, esneklik ve kararlılık
Siteniz trafikte ani artışlar görüyorsanız ve siteniz başarısız oluyorsa ya da sitenizin başarısız olmasını önlemek istiyorsanız aşağıdaki yönergeler, sorunları hızlı bir şekilde düzeltmenize veya büyük sorunlara dönüşmeden önce tespit etmenize yardımcı olabilir.
- Trafikteki ani trafik sorunlarını tespit etmeyi, azaltmayı ve önlemeyi öğrenmek için Aşırı yüklenmiş bir sunucuyu düzeltme bölümünü okuyun.
- Gereksiz resimleri, videoları, komut dosyalarını ve yazı tiplerini kaldırın. Her sayfanın, yalnızca sitenizi kullananların gerçekten ihtiyaç duyduğu işlevleri sunmaya odaklandığından emin olun.
- Resimler web'deki bir numaralı şişkinlik kaynağı olduğu için resimlerinizi optimize etmek sunucu bant genişliği kullanımınızı önemli ölçüde azaltabilir.
- Statik içeriğinizin mümkün olduğunca büyük bir kısmını CDN'lere boşaltın. Sık kullanılan sağlayıcılardan daha fazla bilgi edinebilirsiniz: AWS, Azure, Cloudflare, Google Cloud, Firebase.
- CDN'nizde dinamik resim sıkıştırma, metin sıkıştırma veya JS ve CSS kaynaklarının otomatik olarak küçültülmesi gibi kolayca etkinleştirilebilen optimizasyonların olup olmadığını kontrol edin.
- HTTP önbelleğe almayı optimize etmek, minimum kod değişikliğiyle sunucularınızdaki talepleri önemli ölçüde azaltabilir. Genel bakış için HTTP önbelleği: ilk savunma hattınız bölümlerine, özel öneriler içinse HTTP önbelleğe alma ve Önbelleğe alma en iyi uygulamaları bölümlerine göz atın. Lighthouse'daki Statik öğeleri etkili bir önbellek politikası ile sunma denetimi, önbelleğe alınmayan kaynakları hızlı bir şekilde tespit etmenize yardımcı olabilir. Farklı kaynak türlerinin farklı güncellik gereksinimleri olacağını ve bu nedenle farklı önbelleğe alma stratejileri gerektireceğini unutmayın.
- Service Worker'lar ise sunucularınızdaki talepleri önemli ölçüde azaltmanın başka bir yoludur ancak önemli düzeyde teknik yatırım gerektirebilir. Ayrıca, web sitenizin çevrimdışı olarak çalışmasına olanak tanıyarak çalışma saatlerini, telefon numaralarını ve diğer bilgileri geri gelen kullanıcılara bağlantı olmadan sunmanıza da olanak tanır. Workbox, çok sayıda ortak metni otomatikleştirdiği, en iyi uygulamaların izlenmesini kolaylaştırdığı ve doğrudan alt düzey
ServiceWorker
API'yi kullanırken karşılaşılan küçük hataları önlediği için web sitelerine Service Worker eklemek için önerilen yaklaşımdır. - Sitenizin kullanımında büyük bir artış görülüyorsa DDoS saldırılarına karşı yeterli koruma sağlayıp sağlamadığınızı kontrol edin. Bu durum, siteniz artık daha çekici bir hedef olabilir. Sık kullanılan sağlayıcılardan daha fazla bilgi edinebilirsiniz: AWS, Azure, Cloudflare, Google Cloud.
Daha fazla yardım için Ağ güvenilirliği bölümüne bakın.
Erişilebilirlik
Çeşitli ihtiyaçları olan daha fazla kullanıcı muhtemelen sitenize eriştiğinden, erişilebilirliğe odaklanmak her zamankinden daha önemli. Web sitenizin temel işlevlerinin herkes tarafından erişilebilir olmasını sağlamak için aşağıdaki yönergeleri uygulayın.
- Erişilebilirlik bir ekip çalışmasıdır ve herkesin üzerine düşen bir rolü vardır. Google'ın Ekipler için Erişilebilirlik kılavuzunu ve ABD Dijital Hizmet'in ekip kılavuzunu inceleyerek başlayın. Bu kılavuzlarda her ekip üyesinin (ürün yöneticileri, mühendisler, tasarımcılar, kalite güvencesi vb.) katkıda bulunabileceği katkılar açıklanmaktadır.
- İyi performans gösteren ve iyileştirilmesi gereken noktaları belirlemek için Erişilebilirlik İncelemesi yapın. WAVE tarayıcı uzantıları, sitenizin manuel erişilebilirlik denetiminde size yol gösterebilir.
- Klavyeyle gezinme ve ekran okuyucu desteği gibi belirli konuları daha iyi anlamak için Erişilebilirlik Kılavuzları'nı okuyun.
- Yaygın erişilebilirlik sorunlarını yakalamak için Lighthouse denetimi yapın. Rapor, sitenizin çalışabilirliğini iyileştirmek için gerçekleştirebileceğiniz manuel kontrollerin bir listesini de sağlar. 100 puanlık bir erişilebilirlik puanının, sitenizin erişilebilir olduğunu garanti etmediğini unutmayın. Lighthouse'un otomatik bir şekilde test edemediği birçok önemli sorun vardır, bu nedenle de manuel incelemeler yapmak önemlidir. Diğer otomatik denetleme araçları arasında WAVE API ve AXE uzantısı bulunur.
- egghead.io kursundaki Bugün Erişilebilir Web Uygulamaları Derlemeye Başlayın kursunu tamamlayın veya Udacity'deki Web Erişilebilirliği kursuna göz atın.
- Belirli erişilebilirlik konuları hakkında daha fazla hızlı ipucu için A11ycast oynatma listesini izleyin.
Kimlik, güvenlik ve gizlilik
Kritik düzeltmeleri bulmak için kısayol kullanmak cazip gelebilir, ancak bunu yaparken güvenlik boşlukları açmamaya dikkat edin. İnsanların son derece gizli konularla ilgili içeriğe erişmesi gerekir. Web sitelerinin bu hassas kullanıcı verilerini ne pahasına olursa olsun koruması ve kullanıcıları kimliği tanımlayabilecek bilgilerinin (PII) güvende olduğuna ikna etmesi gerekir.
- Sadece hassas kimlik bilgisi verilerini işleyenlerin değil, neden tüm web sitelerinin HTTPS ile korunması gerektiğini anlayın.
- Varsayılan olarak HTTPS kullanan bir barındırma sağlayıcısına geçin veya sunucularınızda HTTPS'yi etkinleştirmek için Let's Encrypt veya benzer hizmetleri kullanın.
- Çerez kullanımınızı nasıl daha güvenli hale getireceğinizi öğrenmek için SameSite çerezleriyle ilgili açıklama bölümünü inceleyin. SameSite çerez etiketleme uygulamasının geçici olarak geri alındığını unutmayın.
Daha fazla bilgi için Güvenli ve güvenilir bilgiler başlıklı makaleyi inceleyin.
Kullanılabilirlik, kullanıcı arayüzü ve kullanıcı deneyimi
Kullanıcılar, temel ihtiyaçları karşılamak için web'e daha fazla güveniyor. Bu kişilerin birçoğu web'i çok sık kullanmaz. Sitenizin temel işlevinin kullanılabilirliğini denetlemeniz ve mümkün olduğunca basit ve kullanımı kolay olduğundan emin olmanız önemlidir.
- Web sitenizin üst kısmına, hizmet güncellemelerini net bir şekilde ileten, belirgin bir banner (X düğmesiyle kaldırılabilir) eklemeyi düşünün. Kullanıcıları daha belirli kaynaklara yönlendirmek için banner'da bir harekete geçirici mesaj kullanın. Sayfa içeriğinizin geri kalanından farklı olacak belirgin renkler ve yazı tipleri kullanmayı düşünün. Yazdığınız yazılarda empatiyle yaklaşın, müşterilerin ihtiyaçlarına odaklandı ve ne tür bir hizmetten bahsedebileceğiniz konusunda şeffaf olun.
- Kritik kullanıcı yolculuklarınızdaki (CUJ'ler) fiziksel etkileşimleri en aza indirecek fırsatları arayın ve bu değişiklikleri ürün ekibinize önerin. Örneğin, teslimat hizmetiniz genellikle imza gerektiriyorsa bu sorunu çözmenin bir yolu olup olmadığına bakın.
- CUJ'lerinizin olabildiğince basit ve sezgisel olduğunu tekrar kontrol edin ve iyileştirme fırsatları görürseniz ürün ekibinize değişiklik yapmayı önerin.
- İyi mobil tasarım ilkelerini inceleyin ve göze çarpan sorunlar olmadığından emin olmak için CUJ'lerinizi çeşitli mobil cihazlarda deneyin. Web'i sık kullanmayan ve aniden kendilerini web'e daha fazla güvenmek zorunda kalan kullanıcılar, muhtemelen sitenize mobil cihazlardan erişiyordur.
- Sitenizi mümkün olduğunca duyarlı tasarım kalıplarını kullanacak şekilde yeniden düzenleyin.
- Formlarınızın verimli ve iyi tasarlanmış olduğundan emin olun.
SEO
Kullanıcılar, sağlık ve işle ilgili kritik öneme sahip bilgiler arıyor. Sitelerinizin tüm arama motorları tarafından bulunabilir olmasını sağlamak önemlidir. Lighthouse SEO denetimleri, temel sorunları tespit etmenize yardımcı olabilir. En son yönergeler ve güncellemeler için arama motorlarının resmi bloglarını takip edin: Google, Bing, Baidu, DuckDuckGo, Yandex. COVID-19 ile ilgili son yayınlar:
- Google Arama'daki varlığınız üzerindeki etkiyi en aza indirirken çevrimiçi etkinliklerinizi nasıl değiştirebilirsiniz?
- Sanal, ertelenen ve iptal edilen etkinlikler için yeni özellikler
- Bing, COVID-19 ile ilgili özel duyurular için schema.org işaretlemesini kullanıyor
- COVID-19 duyurularına yapılandırılmış veri ekleme
- Sağlık kuruluşlarının COVID-19 bilgilerini daha erişilebilir hale getirmesine yardımcı olma
- Sağlık kuruluşlarına ve resmi sitelere yönelik Arama ile ilgili genel en iyi uygulamalar
Daha fazla bilgi için Keşfedilebilir konusuna bakın.
Performans
Bazı İSS'ler (örneğin, Hindistan'da) evdeki internet kullanımında ciddi bir artış görmektedir ve artan talebi karşılayacak altyapıya sahip değildir. Bu gibi durumlarda, sizin hatanız olmaksızın web sitenizin hızı düşüyor olabilir. Yük performansınızı optimize etmek, düşük bant genişliğinin getirdiği olumsuzlukları dengelemenin bir yolu olabilir. Başka bir deyişle, sayfalarınızın yüklenmesi için ağ üzerinden gönderilmesi gereken bayt sayısını azaltarak, düşük bant genişliğinin performans üzerindeki etkisini dengeleyebilirsiniz.
- Resimler, web'deki şişkinliğin bir numaralı nedenidir. Resimlerinizi optimize ederek web sitenizin bant genişliği kullanımını önemli ölçüde azaltabilirsiniz. Squoosh, resimlerinizi hızlı bir şekilde sıkıştırmanıza yardımcı olabilecek, açık kaynaklı, basit bir resim sıkıştırma aracıdır.
- En iyi performans iyileştirme fırsatlarınızı keşfetmek için WebPageTest veya Lighthouse'u çalıştırın.
- Metin kaynaklarının ağ boyutunu azaltmak için metin sıkıştırmayı etkinleştirin. Bu genellikle minimum düzeyde teknik yatırım gerektiren kolay bir performans kazancıdır.
- Diğer departmanlarla ortak çalışmayı ve onları desteklemeyi öğrenmek için Web sitesi hızını işlevler arası düzeltme konusunu okuyun.
- Kullanıcıların gerçekte hiçbir zaman görmeyebileceği resim isteklerini en aza indirmek amacıyla resimler için standartlaştırılmış geç yükleme kullanın. Tarayıcı uyumluluğu% 100 değildir, ancak özellik, aşamalı bir geliştirme olarak değerlendirilebilir. Diğer bir deyişle, belirli bir tarayıcı standartlaştırılmış geç yüklemeyi desteklemiyorsa, görüntü normalde olduğu gibi yüklenmelidir.
- Sitenizde daha eşzamansız olarak yüklenebilen A/B testi veya kişiselleştirme komut dosyaları olup olmadığını veya komut dosyalarında devre dışı bırakılabilecek kritik olmayan işlevler olup olmadığını kontrol edin. A/B testi ve kişiselleştirme komut dosyaları, sayfa içeriği yüklenmeden önce çalıştırılmaları gerektiğinden genellikle eşzamansız olarak tamamen yüklenemez. Ancak komut dosyalarının bölümlerini daha eşzamansız olarak yükleme fırsatları da olabilir. Genel olarak eşzamanlı komut dosyaları (oluşturma engelleme komut dosyaları olarak da bilinir) ile sayfa yükleme süresi arasındaki temel dengeyi anlamak için Kritik Oluşturma Yolu konusuna bakın ve ardından oluşturma engelleme komut dosyalarına sayfa yükleme süresi yerine veya tam tersini öncelik vermeniz gerekip gerekmediğine karar verin.
- Üçüncü taraf kodu, çoğu web sitesi için tüm isteklerin yaklaşık yarısını oluşturur. Sitenizin çalışması için temel olmayan üçüncü taraf kodunu optimizing, geçici olarak kaldırmayı veya devre dışı bırakmayı düşünün.
- Özellik sürümlerinin önceliği azaltılıyorsa bu durum, temizlik yapmak için mükemmel bir zaman olabilir. Etiket yöneticilerinizden etiketleri kaldırın, şişmiş CSS ve JS'yi temizleyin ve kullanımdan kaldırılan özellikleri veya kodu kaldırın. Chrome Geliştirici Araçları'ndaki Kapsam sekmesi ve Puppeteer'daki
Coverage
sınıfı, kullanılmayan kodları tespit etmenize yardımcı olabilir.
Daha fazla bilgi için Hızlı yükleme süreleri bölümüne bakın.
Unsplash'te NASA tarafından hazırlanan hero resim