WordPress sitelerinde performans optimizasyonu için CDN kullanma yaklaşımı

Performans optimizasyonu kolay değil. Orada birçok olasılık var ve hangisinin en iyisi olduğuna karar vermeden önce her birinin test edilmesi gerekiyor. Örneğin, bu makalede tartıştığım iki siteden biri üzerinde çalışırken, Redis’i nesne önbelleği olarak denedim. Genellikle bu iyi bir seçenektir, ancak bazı sayfalarımı yavaşlatır, diğer sayfalarda sorunlara neden olur ve bellek harcar. Bu makalede, WordPress’in performans optimizasyonunu, özellikle son deneyimlerime dayanan CDN açısından tartışmak istiyorum. Bu, birkaç eklentinin nasıl hazırlanacağı konusunda optimize etmek veya rehberlik için kesin bir kılavuz değildir.
Her çözüm her yerde çalışmaz, ancak yapabileceğiniz her şeyi kontrol etmek önemlidir. CDN kullanmanın avantajlarıyla başlayalım. Neden CDN? CDN’nin önemli olduğu bilinmektedir, çünkü son kullanıcılara yakın sunuculardan varlıklar sunarak sitenizin performansını artırırlar. Ancak CDN’den alabileceğiniz iki potansiyel fayda daha var. Birincisi, tarayıcının yalnızca aynı tarayıcıya aynı anda belirtilen miktarı (tarayıcıya bağlı olarak 6-11) yapmasıdır. Bu, Caldera formları sitesinde ilginç sorunlara neden olur. CSS temaları çok yüksek öncelikleri olan çocuklar için söyledim çünkü ebeveyn temasının yerini alıyorlar.
Siteden yüklenen birkaç JavaScript ve CSS dosyam olduğundan, chilt.css’in yüklenmesi biraz daha uzun sürüyor. Sonuç olarak birkaç sayfada, düzen yanlış olmaya başladı ve sonra ayarlandı. Bu makalede, yaklaşımımın aynı alandan gelen istek sayısını azaltmak için CDN kullandığını açıklayacağım. Bir diğer potansiyel fayda, ana sunucudan varlıkların taşınması yükü azaltacağıdır. Bu, son zamanlarda üzerinde çalıştığım site optimizasyon projesi için büyük bir fayda. Genellikle bu büyük bir avantaj değildir, ancak sitede 6-8 saniyelik yükleme süresine neden olan başka bir soruna başlamadan önce ucuz bir zafer arıyorum. Görüntüleri CDN’ye taşımak sunucu yükünü azaltır ve sayfa 1 ila 1,5 saniye açmaya zaman ayırır. Ücretsiz CDN’ye başlama iyidir, ancak fiyat ucuz değildir. Bant genişliği ve depolama için ödeme yapacaksınız. Ücretsiz CDN, WordPress siteleri için ihtiyacınız olan tüm JavaScript ve bazı CSS dosyalarını destekler. Bir halk kütüphanesi için ücretsiz bir CDN kullanmak paranızı tasarruf edebilir ve tarayıcının önbellekte gerekli dosyalara sahip olması olasılığını artırabilir. Caldera Forms sitesinin okunmasında temamızda bootstrap kullanıyoruz. CSS ve JavaScript Bootstrap’a hizmet etmek için JSDelivr kullanıyorum. Bu dosyalar için yalnızca CDN URL’si ile wp_enqueue_script/stil kullanıyorum.
Çekirdekten yayınlanan kütüphane için bir CDN karışımı kullanıyorum. Asıl endişem, yanlış kütüphane versiyonunu içermediğimden emin olmak. JQuery Core’u CDN sürümüyle değiştirmek için Mu-Plugins dizinime girdim: add_action (‘init’, function () {
if (! Is_admin ()) {
if (is_ssl ()) {
$ protokol = ‘https’;
} değilse {
$ protokol = ‘http’;
}
/** @var wp_scripts $ wp_scripts*/
$ wp_scripts global;
/** @var _wp_dependency $ çekirdek*/
$ core = $ wp_scripts-> kayıtlı [‘jQuery-core’];
$ core_version = $ core-> ver;
$ core-> src = “$ protokol: //ajax.googleapis.com/ajax/libs/jquery/$core_version/jquery.min.js”;
if (wp_debug) {
/** @var _wp_dependency $ göç*/
$ migrate = $ wp_scripts-> kayıtlı [‘jQuery-migrate’];
$ Migration_Version = $ Migration-> Ver;
$ Migrate-> src = “$ protokol: //cdn.jsdelivr.net/jquery.igrate/$migrate_version/jquery-igrate.min.js”;
} değilse {
/** @var _wp_dependency $ jQuery*/
$ jQuery = $ wp_scripts-> kayıtlı [‘JQuery’];
$ JQuery-> Deps = [‘JQuery-Core’];
}
}
}, 11); Bu bana Google’ın CDN’sinden bir jQuery veriyor, ancak sadece JavaScript çekirdek kaydını iptal etmek yerine, iki önemli şey yapmam gerekiyor. İlk olarak, Deregister değilim, sadece URL’yi değiştirdim. İkincisi, çekirdek tarafından yayınlanan jQuery için sürüm numarasını kullandığımdan eminim. Bu gelecek makalemi kanıtlıyor.
Yaptığım bir risk jQuery göçünü kaldırmaktır. Kütüphane, işlevselliğin tekrar JQuery’den kaldırıldığını ekledi. Bunu kaldırmaya dikkat edin. Bazı eklentiler veya temalar hasar görebilir. CSS ve JavaScript’i Caldera Forms sitesinde birkaç CDN’ye yayarak, CDN etkinleştirici eklentilerini kullanarak JavaScript ve CSS yüklemek için KeyCDN’yi kullanmaya başladım. Bu iyi bir eklentidir, ancak yalnızca bir bölgeyi destekler. Daha önce de söylediğim gibi, hedeflerimden biri, çocuğumun temasının CSS’nin yüklenmesinin gecikmeyeceğinden emin olmak. Bu yüzden 6’dan az kaynağa sahip bir alandan geldiğinden emin olmak istiyorum. Bu, KeyCDN’de bazı bölgeler aldığı anlamına gelir, bu da eklentilerini kullanmayı bırakmamı sağlıyor. Çünkü çocuğumun teması ve teması, kaynaklarının çoğunu CDN’den veya CSS için yaptığım CDN Cloudfront ve çeşitli Caldera sitelerinde kullandığım görüntüler içeriyor. , dizin tema yalnızca CSS ve JavaScript arasında toplam 5 dosyaya sahiptir ve her sayfa yüklemesinde hepsi kullanılmaz. Bu yüzden Keycdn’e iki bölge hazırladım. Keycdn kontrol panelimden iki bölge hazırladım. Biri için https://calderaforms.com/content/plugins orijin ve diğerleri olarak kullanıyorum, https://calderaforms.com/content/themes’i orijin olarak kullanıyorum.
KeyCDN tüm dosyalarınızı otomatik olarak çizecektir. Bu da oldukça ucuz ve yönetimi çok kolay. AWS S3 ve Cloudfront ile kendi CDN’nizi yuvarlamakla karşılaştırıldığında, bu gerçekten çok şaşırtıcı.
Tek dezavantajı, varsayılanın mantıklı olmamasıdır. Varsayılan olarak, HTTPS desteğini ve HTTPS’ye otomatik aktarımı devre dışı bırakırlar. Bu, olmasını isteyen karışık içeriğin bir uyarı gibi görünüyor. İki CDN kullandıktan sonra, yüklenirken CDN URL’sini kullanmak için eklentideki URL dosyasını ve tema dizinimi değiştirmek için script_loader_src filtresini ve style_loader_src kullandım. İlk olarak, her iki filtre için kullandığım geri aramaya bakalım: <? PHP/**

* CDN için URL CSS/JS’yi değiştirin
*
* @param String $ url
*
* @dize
*/
Caldera_moo_cdn_filter işlevi ($ url) {
$ tema_dir = ImprailingsLashite (wp_content_url). ‘/tema’;
if (0 === strpos ($ url, $ tema_dir))) {
Return str_replace ($ tema_dir, ‘https://cfdotcomthemes-6081.kxcdn.com’, $ url);
}
$ Plugin_dir = INCRAILINGSLASHITE (WP_CONTENT_URL). ‘/ Eklenti’;
if (0 === strpos ($ url, $ plugin_dir)) {
return str_replace ($ plugin_dir, ‘https://cfdotcomplugins-6081.kxcdn.com’, $ url);
}
geri $ url;
} Buradaki önemli olan, URL’nin tema mı yoksa eklenti dizininde olup olmadığını belirlemek için strpos () kullanarak bir inceleme yapmam. Bu önemlidir çünkü iki farklı CDN URL kullanıyorum. Ayrıca, değiştirmek istemediğim bu filtreden etkilenebilecek başka birçok URL de var. Çekirdek veya diğer CDN’lerden kaynaklanan varlıklar etkilenmemelidir.
Yöneticide olmadığımızdan emin olmak için kapanışta iki filtreye geri çağrıyı ilişkilendirdim. Ayrıca, site konfigürasyonum için çevresel değişkenler kullandığım için, üretim ortamında değilken CDN kullanımını kolayca geçirebilirim. <? Php
/** CDN*/
if (! Is_admin () && isset ($ _env ['wordpress_env']))) && in_array ($ _env ['wordpress_env'], ['üretim']) {// javaScript
add_filter ('script_loader_src', 'caldera_moo_cdn_filter');
// CSS
add_filter ('style_loader_src', 'caldera_moo_cdn_filter');
} Yukarıdaki AWS Çözümü Yaptığım sitenin çözümünün verimli hale geldiğini ve tek sorunumun aslında varlıkların yüklenmesini optimize etmek olduğunu söylüyorum. Ancak, Intro'da bahsettiğim gibi, son zamanlarda WooCommerce sitesini ana performans problemiyle devraldım. Büyük veritabanları, WP cron problemleri, Themeforest'ten kötü kodlara sahip temalar ve CDN ile çözülebilecek sorunlardan kaynaklanan sorunların bir karışımıdır. Bir sonraki makalede bulabileceğiniz diğer sorunları tartışacağım.
Ancak bu sitede, tüm görüntüleri, CSS'yi ve JavaScript'in depolanmasını AWS S3'e taşıdım ve bunları CloudFront aracılığıyla sundum. Bu, CDN'nin yapmasını ve sunucu yükünü azaltmasını beklediğiniz açısından doğrudan performansta bir artış sağlıyor. AWS, beni çok etkileyen çok güçlü ve maliyet etkin bir çözümdür. Şimdi WordPress sitelerimin çoğunu barındırmak için kullanıyorum. Bununla birlikte, kullanıcı arayüzü ve kullanım kolaylığı AWS'nin avantajları değildir. Neyse ki iyi insanlar lezzetli beyinlerde WP şöhretinden çok iyi bir eklenti WP boşaltma s3. Bu eklenti çok iyi belgelenmiştir. Size ayarlarda rehberlik etmeyeceğim, diğerleri öğreticiyi yazabilir.
Çekirdek eklenti, görüntüleri medya kütüphanesinden S3'e taşır ve CSS ve JavaScript'in sunumunu CloudFront üzerinden işleyen eklenti varlıklarını işler. Eklenti kullanıcı arayüzü çok iyi yapılırken, yine de AWS'de çok fazla ayar yapmanız gerektiğini ve sizi çıldırtabileceğini söyleyeceğim. Bu eklenti kesinlikle 200 $ değerinde, çünkü dosyayı senkronize tutma işlemini, güncellemeler için önbellek çıkarıcı ve her şey düzenlendikten sonra yapmak istediğiniz yapılandırmanın çoğunu otomatikleştirir. CDN'nin sihirli bir mermi olmadığını hatırlamak için sihirli bir mermi yoktur. Bazen sunucunuz trafiği işleyemez. Diğer zamanlarda eklentiniz veya temanız kötüdür. Müşteri sitesi söz konusu olduğunda, elde ettiğimiz en büyük avantaj, temalarını kaldırmak ve özel bir tema yapmaktır. Bu ucuz bir süreç değil, ancak site daha iyi görünüyor ve daha hızlı yükleniyor. Özel temaların değeri hakkında öğrendiğim bir şey, seçenekleri ve modülerliği kaldırmanın değeridir. Genellikle ticari temalar kötü rap alır ve şişkin ve yavaş olarak etiketlenir. Çoğu zaman çünkü çok fazla çözüm sunmak zorunda kaldılar. Bir yerde saklanması gerekebilecek her ayar ve daha sonra seçeneği uygulayan kod birçok gereksinim gerektirir. Tema türünü optimize etmek için yapabileceğiniz çok şey var. Umarım bu makale CDN hakkında hangi sorunları çözdükleri açısından daha kritik düşünmenize yardımcı olmuştur. WordPress Performans Optimizasyon Tartışmaları Dogma "İyi CDN" ve "İyi Önbellek" ile sonuçlanır