WordPress siteniz için 35 performans optimizasyonu
Canvas ile oluşturulan bir sayfa, yalnızca işlediği blokların CSS ve JavaScript dosyalarını yükler, başka bir şey yüklemez. Bunun üzerine her biri sizin kontrol ettiğiniz bir anahtar olan 35 optimizasyon gelir; temkinli varsayılan ayarlar ve ne işe yaradıklarına dair sade açıklamalarla birlikte.
Güncellendi
Blok bazında varlık yüklemesi
Çoğu tema tek bir büyük stil sayfası ve tek bir büyük betik ile gelir; her sayfa, temadaki her özelliğin bedelini öder. Canvas, 314 bloğunun her birini ihtiyaç duyduğu CSS ve JavaScript ile eşler, ardından yalnızca sayfanın gerçekten oluşturduğu blokların gereksinimlerinin birleşimini yükler.
- Bir fiyatlandırma sayfası hiçbir zaman kaydırıcı betiğini indirmez
- Formu olmayan bir sayfa, form işleyicisini hiçbir zaman indirmez
- Düzenleyici blok stillerini aynı şekilde yükler
- Yapılandırılacak bir şey yok ve yanlışlıkla kapatmanın yolu da yok
Tahmin değil, beyan edilen
Her blok kendi varlıklarını kendisi tanımlar. Varlık haritası bloğun içinde tutulur, bu nedenle kimsenin güncellemeyi unutabileceği merkezi bir liste yoktur.
Çekirdek bloklarla çalışır
Çekirdek ve üçüncü taraf bloklar kendi yükleme davranışlarını korur. Canvas, onların varlıklarını devralmaz ve bunlar için WordPress ile çekişmez.
Şablonlar da sayılır
Üst bilgiler, alt bilgiler, Sayfa Başlıkları ve slider'lar da blok olduğundan, basit bir üst bilgi kullanan bir sayfa Mega Menü kodunu yüklemez.
Satın alınacak bir şey yok
Koşullu yükleme, premium bir özellik veya eklenti paketi değildir. Kütüphanenin her planda ve süresi dolmuş bir lisansta çalışma biçimidir.
Neyi etkilediğine göre gruplanmış 35 optimizasyon
Burada sihir yok, gizli bir şey de yok. Her biri, WordPress'in gönderdiği sayfada belirli ve kontrol edilebilir bir işlem yapar.
Yükleniyor 7
İlk görüntülemeyi engelleyen CSS ve JavaScript'i durdurun, bir sonraki sayfayı da erkenden başlatın.
- Kritik olmayan stil sayfalarını eşzamansız yükleme
- Kritik olmayan JavaScript'i ertele
- JavaScript'i ilk etkileşime kadar erteleyin
- En büyük görseli, ekranın ilk görünen alanında önceden yükleyin
- Sayfanın kullanacağı kaynak adreslerine önceden bağlantı kurun
- Üçüncü taraf sunucular için DNS ön getirme
- Spekülatif yükleme, sonraki sayfa tıklanmadan önce getirilir
Yazı Tipleri 3
Web yazı tipi hâlâ yüklenirken metin okunabilir kalır; Google yazı tipleri ise hiç üçüncü taraf isteği gerektirmek zorunda değildir.
- Web yazı tiplerinize font-display swap ekleyin
- İlk ekranın ihtiyaç duyduğu yazı tiplerini önceden yükleyin
- Google yazı tiplerini kendi sunucunuzdan sunun
Medya 6
Görseller çoğu sayfada en ağır öğedir ve yanlış yapılması en kolay olanıdır.
- Görünümün altındaki görselleri ertelemeli yükle
- iframe'ler ve gömülü içerikler için tembel yükleme
- WordPress'in oluşturacağı JPEG kalitesini ayarlayın
- Yüklenen görsellerin en fazla genişliğini sınırlayın
- WordPress'in oluşturduğu duyarlı görsel kümelerini denetleyin
- Hangi görsel boyutlarının hiç oluşturulacağını denetleyin
Temizlik 8
WordPress, her sitenin ödediği ama çok azının kullandığı özellikler sunar.
- Statik kaynaklardan sorgu dizelerinin kaldırılması
- Emoji betiklerini ve stillerini devre dışı bırakır
- oEmbed keşfini ve gömme betiğini devre dışı bırakın
- Ön yüzde Dashicons'ı devre dışı bırakın
- XML-RPC'yi devre dışı bırakın
- RSS beslemelerini devre dışı bırakma
- jQuery Migrate kaldırılır
- Kendi kendine pingback'leri devre dışı bırakın
Veritabanı 5
Yavaş bir sitenin yönetim tarafı: revizyonlar, otomatik kaydetmeler ve hiç durmayan bir Heartbeat.
- Bir yazının tutacağı revizyon sayısını sınırlayın
- Otomatik kaydetme aralığını ayarlayın
- Yönetici heartbeat işlemini sınırlandırın veya devre dışı bırakın
- Veritabanındaki revizyonları, geçici kayıtları ve spamı temizler
- REST API'yi yalnızca giriş yapmış kullanıcılarla sınırlayın
WooCommerce 5
Bir mağaza, betiklerini sitenin her sayfasında yükler; hiçbir şey satmayan sayfalar da dahil.
- Mağaza çıktısı olmayan sayfalarda WooCommerce JavaScript'ini kaldırır
- Sipariş atfı izlemesini kapatın
- Sepet parçaları betiğinin her sayfada yoklamasını durdurun
- Parola gücü kütüphanesini hesap sayfaları dışında yüklemeyin
- Paketlenmiş Select2 kitaplığını ödeme sayfası dışında kaldırın
İçerik dağıtım ağı yeniden yazımı 1
Stil sayfalarınızı, betiklerinizi, görsellerinizi ve yazı tiplerinizi, sayfa oluşturulurken adreslerini yeniden yazarak zaten ödediğiniz bir içerik dağıtım ağına yönlendirin. Canvas size bir ağ satmaz ve trafiğinizi kendi sunucularımızdan geçirmez.
Toplamda 35 anahtar var; WooCommerce'in anahtarlarından beşi yalnızca WooCommerce etkin olduğunda görünür. Mağaza entegrasyonu hakkında daha fazla bilgi.
Hepsi birer anahtardır ve varsayılan değerler temkinlidir
Canvas, her web sitesi için güvenli olanı açar ve geri kalanını size bırakır; her kontrolün yanında nedeni yazılıdır. Genellikle kötü bir fikir olan tek ayar bunu panelde söyler, yani karar verirken tam orada durursunuz.
SEO ve erişilebilirlik temelleri
Hızlı yüklenen ama okunamayan, taranamayan veya klavyeyle kullanılamayan bir sayfa tamamlanmış sayılmaz. Bunların hepsi temanın kendisinde, her planda yer alır; bir yükseltmenin arkasına kademelendirilmiş hiçbir şey yoktur.
İçeriğinizden gelen meta veriler
Başlıklar, açıklamalar, sosyal kartlar, kanonik URL'ler, robots kuralları ve bir site haritası; hepsi sayfa oluşturulduğunda sayfanın kendisinden türetilir. Kendi içeriğinizin ikinci bir kopyasını güncel tutmanız gerekmez.
16 şema türü
Organization, WebSite, WebPage, Person, breadcrumbs, Product, Brand, Offer, Review and rating, address, geo coordinates, opening hours ve site search; ilgili olduğu yerlerde üretilir.
Anlamsal yer işaretleri
Üst bilgi, gezinme, ana ve alt bilgi bölgeleri, içeriğe giden bir atlama bağlantısı, sırasına uyan başlıklar ve ulaşılabilen her öğede görünür odak.
Klavye menüleri
Mega Menüler, Yan Paneller ve modal pencereler klavyeyle açılır, taşınır ve kapanır; hareket efektleri ziyaretçinin azaltılmış hareket tercihine uyar.
Erişilebilirlik, güvenlik ve veri dışa aktarma hiçbir zaman premium özellik değildir. Süresi dolmuş lisansta da kullanılabilir kalırlar; çünkü kullanılamaz hale gelen bir web sitesi bir destek sorunudur, asla bir lisanslama kararı değildir.
Bunu nasıl doğruluyoruz
Hız ve erişilebilirlik hakkındaki iddialarda bulunmak da, bunları kontrol etmek de kolay. Biz kendi iddialarımızı kontrol ediyoruz ve nasıl yaptığımızı aşağıda anlatıyoruz.
Sayfalar, gerçek bir tarayıcıda tasarımlarıyla karşılaştırılır
Her demo sayfası bir tarayıcıda işlenir ve geldiği tasarımla karşılaştırılarak ölçülür: belge yüksekliği, bölüm genişlikleri, hesaplanan boşluklar ve JavaScript ile yönlendirilen her şey, çalışmasının ardından ölçülür, asla ilk çizimde değil.
Bu web sitesi üç genişlikte denetlenir
Buradaki her sayfa axe-core ile WCAG 2.1 A ve AA düzeyinde, 1440, 1024 ve 390 piksel genişliklerinde taranır. Ayrıca axe'in yapmadığı kontroller de uygulanır: sayfada tek bir h1, asla atlanmayan başlık seviyeleri, dört temel yer işareti (landmark), çalışan bir atlama bağlantısı, yatay taşma olmaması, 12 pikselden küçük metin bulunmaması, metin gibi okunan bağlantılar ve en az 24 piksel dokunma hedefleri.
Canvas'ın çalışması için gerekenler
WordPress
Canvas, blok düzenleyici üzerine kurulu olduğundan Site Düzenleyici içeren bir WordPress gerektirir. Sürüm 7.1 veya daha yeni.
PHP
PHP 7.4 veya daha yeni bir sürüm. Güncel bir PHP sürümü, çoğu sitenin yapabileceği en ucuz hız iyileştirmesidir.
En son test edilen sürüm
Canvas, WordPress 7.1 ile test edilir; her WordPress sürümünün ardından bir güncelleme yayımlanır.
Performans hakkında
En sık sorulan iddia da dahil olmak üzere, bu sayfada puan yer almamasının nedeni budur.
Hâlâ bir önbellek eklentisine ihtiyacım var mı?
Muhtemelen evet, dürüst cevap da budur. Canvas, bir temanın ve WordPress'in kontrol ettiği şeyleri kontrol eder: bir sayfanın hangi varlıkları yüklediğini, yazı tiplerinin ve görsellerin nasıl davrandığını ve veritabanının ne kadar iş yaptığını. Sayfa önbelleğe alma, nesne önbelleğe alma ve uç dağıtım, barındırma sağlayıcınızın veya bir önbellek eklentisinin işidir. Bunlar farklı görevler olduğundan, ikisini birlikte çalıştırmak normal bir kurulumdur.
Bunları etkinleştirmek web sitemi bozar mı?
Her anahtar geri alınabilir ve başka bir eklentiyle çakışma olasılığı en yüksek olanlar kapalı başlar. Her anahtar ne işe yaradığını ve ne zaman dokunulmaması gerektiğini açıklar; gerçekten riskli olan ayar ise bunu panelde belirtir. Bunları birer birer açın ve her birinden sonra ön yüzü yeniden yükleyin.
Blok başına varlık yüklemesini yapılandırmanız gerekiyor mu?
Hayır, bulunup etkinleştirilecek bir şey yok. Blok kitaplığının çalışma şekli budur. Her blok ihtiyaç duyduğu CSS ve JavaScript'i bildirir, sayfa da gerçekten oluşturduğu blokların birleşimini yükler.
Demolar optimize edilmiş olarak mı gelir?
Site genelinde bir demo içe aktarma işlemi, demonun Tema Seçeneklerini benimser; performans anahtarları da bu seçeneklerin parçasıdır. Böylece demo, oluşturulduğu ve kontrol edildiği ayarlarla başlar. Bunların herhangi birini daha sonra değiştirebilirsiniz.
Bu sayfa neden hız puanları yayımlamıyor?
Bizim donanımımızda yapılan sentetik bir testten çıkan puan, barındırma sağlayıcınız, eklentileriniz, görselleriniz veya ziyaretçileriniz hakkında size hiçbir şey söylemez. Yayımladığımız şey, her optimizasyonun tam olarak ne yaptığıdır; bu nedenle optimizasyonu açıp kendi altyapınızda kendi sitenizi ölçersiniz.
Yine de düzenleyebileceğiniz hızlı bir web sitesi
Her plan aynı blok kütüphanesini, aynı 35 optimizasyonunu ve aynı koşullu varlık yüklemesini içerir. Performans katmanı yoktur.