ev borcu WordPress sitesi
WordPress varlıkları: Statik dosyalar nasıl düzgün şekilde sunulur?
WordPress varlık optimizasyonunun en çok gözden kaçan yönlerinden biri, aslında WordPress'in kendi başına hiçbir ilgisi yoktur; Her şey, ziyaretçilerimizin tarayıcılarına statik varlıkları nasıl teslim ettiğimizle ilgili.
WordPress varlıkları nelerdir?
Varlıklar terimini, web sunucunuzun ziyaretçilere gönderdiği tüm statik dosyaları tanımlamak için kullanıyoruz ve üç türe ayrılıyoruz: javascriptler, stil sayfaları ve resimler. İlk ikisi genellikle eklentilerimizde ve temalarımızda sıralanırken, ikincisi medya kitaplığı aracılığıyla yüklenir.
Ama önce, önbellek bozma hakkında bir kelime
Bir web sitesini ziyaret ettiğimizde, sunucu önce WordPress'in oluşturduğu HTML'yi, ardından bu HTML'de bildirilen tüm varlıkları, genellikle CSS dosyalarıyla başlayarak geri gönderir, ardından içerikte görünen veya CSS aracılığıyla çekilen görüntüler ve temanız düzgün bir şekilde geliştirildiyse, javascript dosyaları, kaynağa en son dahil edilen (sıraya alınan) oldukları için sonunda.
Bu, ortalama olarak, ekranda gördüğünüz her sayfa yüklemesi için, tarayıcınızın, her biri tarayıcınızdan sunucuya gidiş ve dönüş olan 10 ila 100 arasında istek yapması gerektiği anlamına gelir. Yani optimize edilmemiş bir web sunucusunda, sayfayı yenilerseniz tüm süreç baştan gerçekleşir.
Her isteğin, sayfanın ekranınızda tam olarak oluşturulması için geçen toplam süreyi toplamasının yanı sıra, tüm bu istekleri tekrar tekrar işlemesi gerektiğinden, sunucu üzerinde de etkisi vardır.
Bundan kaçınmak için, web sunucuları yöneticilerin bizim bir süre sonu başlığı dediğimiz şeyi ayarlamasına izin verir. Bu, tarayıcıya belirli bir dosyanın ne kadar süreyle değişmeden kalacağını söyleyen küçük bir bilgidir. Bu nedenle, +2 gün olarak ayarlarsak, tarayıcının dosyayı önbelleğine kaydedeceği ve sayfayı yenilediğinizde, sunucuyla iletişim kurmak yerine o dosyayı – süresi dolana kadar çekeceği anlamına gelir.
Şimdi tamamen yeni bir görünüme sahip yeni bir tema sürümü yayınladığınızı, ancak yeni CSS dosyanızın bir öncekiyle tamamen aynı adlandırıldığını hayal edin (diyelim ki style.css ). Bunu dağıttıktan sonra, sitenize geri gelen bir ziyaretçi gelir ve tarayıcıları eski CSS'yi döndürerek web sitenizin bozuk görünmesine neden olur.
Bunu düzeltmek için önbellek bozma adı verilen bir teknik kullanıyoruz. Süslü terimine rağmen, modası geçmiş varlıklar sorununu şu şekilde çözmenin gerçekten basit bir yaklaşımıdır:
- yeni dosyayı yeniden adlandırma (
style.css->style.2.css) - bir sorgu dizesi ekleme (
style.css ->style.css?ver=2)
Bunlardan birini yaparak tarayıcıya bunun yeni bir dosya olduğunu söyleriz, böylece önbelleğe alınmış bir dosya kullanmak yerine sunucuya yeni bir istekte bulunur. WordPress ikincisini yapar, ancak bu, bazı içerik dağıtım ağları için bir sorun teşkil eder (CDN'ler, daha sonraları hakkında).
Önbellek bozma yapılandırıldıktan sonra sona erme başlıklarını yalnızca iki güne ayarlamak için kesinlikle hiçbir neden yoktur, çünkü bunun asla değişmeyeceğini varsayıyoruz. Bazı yöneticiler daha sonra bunları bir yıl, hatta maksimum olarak ayarlar, bu da 2037 yılı gibi bir şeye ayarlar. O zaman 53 olacağım
Stil sayfalarını ve javascriptleri optimize etme
Stil sayfaları (.css dosyaları) ve javascript (.js dosyaları) aslında düz metin dosyalarıdır, yani optimizasyon süreci/mantığı oldukça basittir (ve her ikisi için de aynıdır, bu yüzden sadece css üzerinde bir örnek vereceğim); Birden çok stil sayfanız varsa, tüm dosyaları tek bir dosyada birleştirin, ardından tüm boşlukları ve yeni satırları kaldırın, böylece tek bir ama gerçekten uzun satırlı tek bir dosya elde edersiniz.
/* Before */ h1 { font-size: 18px; } p { font-size: 13px; } /* After (perfectly valid CSS) */ h1{font-size:18px;}p{font-size:13px;}
Çok fazla görünmediğini biliyorum, ancak bunu yaparak dosyayı 51 bayttan 38 bayta küçülttük ve boyutunu %25 oranında etkili bir şekilde küçülttük! Ve css'nizin boyutuna ve karmaşıklığına bağlı olarak, %40'a varan veya daha fazla tasarruf elde edebilirsiniz. Ayrıca, dosyaları birleştirirseniz, ziyaretçilerinizin birkaç isteğini kurtarmış olursunuz. Daha hızlı web sitesi ahoy!
Tabii ki, bunu manuel olarak yapmak gidilecek yol değil, bu yüzden iki çözüm var:
- Grunt veya Gulp gibi bir görev yöneticisi kullanın
- bir eklenti kullan
Temanız için küçültülmüş css'inizi oluşturmak için bir görev yöneticisi (Gulp iş akışı için bir öz yazdım) kullansanız bile, küçültülmemiş varlıkları içeren bazı eklentiler kullanıyorsunuzdur, bu da gitmenin tek yolunun bir Eklenti.
Uyarı: Herhangi bir optimizasyon eklentisini açmanın sitenizi bozma olasılığı yüksektir, bu yüzden önce bir hazırlama ortamında deneyin!
WP-Rocket ile önceki eğitimimi izlediyseniz, optimizasyonu açmak gerçekten kolaydır, sadece ayarları ziyaret edin ve şu iki onay kutusunu işaretleyin:
Değilse, diğer önbelleğe alma eklentilerinin çoğu (W3 Total Cache gibi) bunu kutudan çıkar çıkmaz destekler, ancak şahsen bunun büyük bir hayranı değilim, bu yüzden işi yapmak için iki eklenti daha öneriyorum: Minit ve Minit -YUI. Resmi depoda değiller ve sunucunuzda Java'nın kurulu olmasını gerektiriyorlar, ancak bu çaba çok iyi. Sunucuda SSH, ardından aşağıdaki komutu girin (eklentiler dizininize doğru yolu girdiğinizden emin olun!):
$ sudo apt-get -y install git openjdk-6-jre $ cd ~/www/www.wp-kickstart.com/wp-content/plugins $ git clone https://github.com/kasparsd/minit $ git clone https://github.com/bjornjohansen/minit-yui.git
Şimdi WordPress'e giriş yapın, her iki eklentiyi de etkinleştirin ve sihrin gerçekleşmesini izleyin!
Ne yazık ki, Minit herhangi bir ayar ekranı olmadan gelir, bu nedenle koşullu Internet Explorer stil sayfaları gibi bazı dosyaları küçültmenin dışında tutmanız gerekiyorsa, bunları function.php 'nize eklemeniz gerekir, bunun gibi ( yirmi onbeş temadan bir örnek) ):
function exclude_stylesheets($stylesheets) { return array( 'twentyfifteen-ie', 'twentyfifteen-ie7' ); } add_filter( 'minit-exclude-css', 'exclude_stylesheets' );
Görüntüleri optimize etme
Görüntüler düz metin dosyaları olarak değil, ikili kodda kaydedilir; bu, optimizasyonlarına aynı yaklaşımı izleyemeyeceğiniz anlamına gelir. Stil sayfalarında olduğu gibi, bunu bir görüntü işleme yazılımıyla manuel olarak yapabilirsiniz, bunu sizin için yapan birçok (ücretsiz ve premium) eklenti vardır. EWWW Image Optimizer'ı öneririm. Yükledikten sonra, muhtemelen aşağıdaki gibi bazı izin hataları göreceksiniz:
Bunları çözmek için sunucuda SSH, aşağıdaki komutları çalıştırın (tekrar dizinin doğru olduğundan emin olun):
$ cd /home/webmaster/www/www.wp-kickstart.com/wp-content/ $ mkdir ewww $ sudo chown :www-data ewww $ sudo chmod 775 ewww
Eklenti, yüklenen dosyaları işlemek için ihtiyaç duyduğu dosyaları otomatik olarak kopyalayacaktır. Bir kez denediğinizde, bazı dosyaların boyutlarının %30 veya daha fazla küçüldüğünü fark edeceksiniz!
Ayrıca bahsetmek istediğim bir eklenti daha var ve o da Kraken. Tüm işlemlerin sunucularında gerçekleşmesi için resimlerinizi uzaktan optimize eden bir eklentidir. Planları ayda 5 dolardan başlıyor ve bu görevi yerine getirmek isteyip istemediğinize (veya buna ihtiyacınız olup olmadığına) karar vermek size kalmış.
Hepsine hükmedecek bir GZIP
Optimize edilmiş varlıklar sunarken, sunucuya yapılan isteklerin sayısını ve daha hızlı dosya aktarımlarını (daha küçük boyutları nedeniyle) azaltmaya yardımcı olurken, atılacak bir adım daha var: dosya sıkıştırma .
Tüm modern tarayıcılar sıkıştırılmış dosyaları destekler ve fark oldukça önemli olabilir. Çalışması için tek yapmanız gereken Nginx dosyanıza aşağıdaki yapılandırmayı eklemek:
gzip on;
gzip_buffers 16 8k;
gzip_comp_level 9;
gzip_http_version 1.0;
gzip_min_length 0;
gzip_types text/plain text/css image/x-icon image/svg+xml image/png image/jpg image/jpeg text/js text/php application/javascript application/x-javascript;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6].";
Veya Apache kullanıyorsanız, Codex tarafından önerilen pasajı kullanın ve onu .htaccess içine koyun.
Muhtemelen resimlerde önemli bir gelişme görmeyeceksiniz, ancak stil sayfaları ve javascriptler bazen %90 oranında sıkıştırılır. Evet, bu yüzde doksan, işte nasıl anlatılacağı:
CDN'den ne haber?
WordPress hız optimizasyonu söz konusu olduğunda, çevrimiçi bir içerik dağıtım ağı kullanmanızı öneren çok sayıda makale var. Varlıklarınızı optimize ederken atmanız gereken son adım olduğunu iddia ediyorum.
Bunun nedeni, öncelikle ilgili ziyaretçilerinizin çoğunun nereden geldiğini keşfetmeniz gerekmesidir; Zaten coğrafi olarak sunucunuza yakınlarsa (göreceli bir terim olmaya yakın, 1000km makul bir işarettir), o zaman CDN kullanmak anlamsızdır.
Öte yandan, tüm dünyaya dağılmışlarsa, o zaman çok mantıklı.
Peki nasıl çalışıyorlar ?
Hesabınızı bir CDN'ye kaydettiğinizde, genellikle statik dosyalarınızın başına eklediğiniz bir alt alan adı alırsınız, bu nedenle onlar yerine onlardan yüklenir (www.domain.com/style.css, XXX.cdnprovider.com/style gibi bir şey olur .css).
İlk istekte CDN'deki dosyalar henüz mevcut olmadığından, sözde çekme bölgesi devreye girer (ve onu yapılandırmanız gerekir). Çekme bölgesi, esasen bu dosyaların orijinal kaynağı olan WordPress site URL'nizdir.
İlk istek yapıldıktan sonra, CDN dosyaları WordPress'inizden çeker , ziyaretçiye sunar ve ardından ağdaki diğer sunuculara dağıtır, böylece sonraki tüm isteklerde bu dosyalar (gerçekten son kullanma tarihleri olan) yerine sunulur. Asıl olan.
Çözüm
Sunmanız gereken statik dosyalar söz konusu olduğunda uzun bir yol kat eden biraz çaba gerektirir ve iyi bir site sahibi gibi, kaç ziyaretçiniz olduğuna veya sitenizin ne kadar büyük olduğuna bakılmaksızın herkes bunu yapmalıdır.
Başka ipuçlarınız varsa, aşağıya bir yorum bırakmaktan çekinmeyin.
–
Bu aynı zamanda hız optimizasyonu konusundaki eğitim serimizi de sonlandırıyor, bu nedenle gelecek hafta için abonelerimizin en çok talep ettiği ikinci konu olan güvenlikle ilgili bir eğitim hazırlıyorum.