WordPress’te ayrıştırma javascript’i erteleme
Bu, WordPress sitesini “Speed Page Pues Puan” aracı aracılığıyla çalıştırdığınızda genel bir şikayettir: “JavaScript’in ayrışmasını erteleyin” ve/veya “oluşturmayı engelleyen javascript’i silin”. Bugün, 2015 yılında Fred tarafından yazılan ilk makaleye dayanarak, nasıl tamamlanacağını tartışacağım. Bu, yeni bir filtre olan Script_Loader_Tag’ı tanıtan WordPress 4.1’den bu yana mümkündür. Bu filtre, Enqueue D -script öğesinin işaretlemesini kolayca değiştirmemize olanak tanır – yani, JavaScript dosyaları WP_ENQUEUE_SCRICT WordPress işlevi kullanılarak WordPress sitesine doğru bir şekilde eklenir.
Scripts_loader_tag ile, şimdi sayfanın hızını önemli ölçüde etkileyebilecek sorunları kolayca çözebiliriz: birçok JavaScript el koymayı engeller. Sorun: Oluşturma JavaScript dosyası JavaScript Kafada uzun süredir tarayıcınızı sayfa içeriğini görüntülemek için geciktirebilirsiniz, çünkü varsayılan davranış önce JS dosyasının kendisini yorumlar. Doğru teslim edilen JavaScript, HTML belgenizin başında görünür. İnternette doğada olduğu gibi, kafa ile ilgili ana şey, vücudun üstünde olmasıdır – ve bu, sitenin hızı için oldukça ciddi bir şey anlamına gelir, çünkü JavaScript oluşturmayı engelleyebilir.
“Render’ı Engelleme”, web tarayıcısının varsayılan davranışından gelir: aşağı hareket etmeden önce sayfada daha yüksek görünen her şeyi tamamen kabul etmek ve işlemek istiyor. Bu, kafanızdaki uzun JavaScript dosyasının, varsayılan davranış önce JS dosyasının kendisini yorumladığı için tarayıcınızı gövdedeki sayfa içeriğini görüntülemek için geciktirebileceği anlamına gelir. Başka bir deyişle, JS, kullanıcının gerçekten görülmesi için sayfayı oluşturmak için tarayıcının önemli işlevini engeller. Sonuçlar yavaş bir site ve hayal kırıklığına uğramış kullanıcılar olabilir. Google’ın sayfa alanı bu sorunu bir süredir göstermiştir:
Büyütmek için tıklayın
Büyütmek için tıklayın Şimdi sadece sayfaları yavaşlatabilecek üç JavaScript dosyamız var. Gerisi hala orada, ancak daha önce değil, sayfa içeriğine paralel olarak yükleniyor.
İyileştirme: Javascriptinizi geciktirin ve asenkronize edin Anlamanız gereken ilk şey, JS için bir alternatiftir. Farkı açıklayacağız, ancak her ikisi de aynı şekilde çalışır: Tarayıcının JS kaynaklarını “zamana göre” yüklemesine izin verirken, diğer şeylere (sayfaları oluşturma gibi) dikkat ederler. Bu, bu öznitelik olmadan olabildiğince, sayfanın sayfasından önce var olan askıya alınmış veya kontrolsüz bir JavaScript dosyasına güvenemeyeceğiniz anlamına gelir – ancak avantaj, sayfanın görünür hale geldiğinde dosyanın hızı yavaşlatmayacağıdır. Kullanıcı. Bu bir kavramdır – şimdi kod için. (Github’da tam kod mevcuttur.) 1. Komut dosyasını alın doğru teslim edilen her WordPress komut dosyası bir kullanıcı vardır: Site tarafından çağırmak için bilinen “Takma Ad”. Tüm komut dosyaları için bu kavrama ihtiyacımız olacak ve maalesef bunu elde etmek basit değil. Yine de bu mümkündür:/ * * Komut Dosyaları Etiketler Alma * Teşekkürler http://wordpress.stackexchange.com/quations/54064/how-do—get-the-handle-for-ul-ulued-scripts */add_action (‘wp_print_scripts’, ‘wsds_detect_enqueued_scripts’); WSDS_DETECT_ENQUEUED_SCRIPTS () {global $ wp_scripts; Foreach ($ wp_scripts-> $ tutma olarak kuyruk): echo $ tutamak. ‘| ‘; Endforeach; } Bu kod, | , her sayfada kafada:
Bunu yalnızca bir kez yapacaksınız, ardından kolu kopyalamak ve yapıştırmak için “Kaynak Sayfaya bakın” ı kullanacaksınız.Bunu yapmayı bitirdikten sonra, bu kod bölümünü devre dışı bırakın: Bir sapımız var, bu yüzden başımızı tekrar onlarla tıkayın.Bu yüzden bu bölüm GitHub’daki kod hakkında yorumlanıyor – her zaman çalışmasını istemiyorum!2. JavaScript engelleme oluşturma erteleme ve senkronize etme, wpShout için eşzamansız değil, ertelemeyi kullanmamız gerektiğini bulduk, bu yüzden Dershen kodunu tartışacağım.Buradaki ağırlık kaldırmanın çoğu Scott Nelle’nin bir makalesinden;Teşekkürler Scott!
add_filter (‘Script_loader_tag’, ‘wsds_deffer_scripts’, 10, 3); İşlev wsds_defer_scripts ($ tags, $ hee, $ src) {// enqueed komut dosyalarının kulpları $ defers_scripts = array (‘prismjs’, ‘yönetici-bar’, ‘-js’, ‘wspspout-js- Çerez-demo ‘,’ kurabiye ‘,’ wpshout-froken-image ‘,’ Hoşçakal-captcha-public-script ‘,’ Cihaz-kutu-değeri ‘,’ Sayfa-min-yükseklik ‘,’ Kamn-JS-Widget-Easy-Twitter-Feed-Widget ‘,’ __thaprefs__ ‘,’ __thaprefffitvids__ ‘,’ jquery-migrate ‘,’ buzgram ‘,’ disquus ‘,); if (in_Array ($ hone, $ defeler_scripts))) {return ‘<script' src = "'. $ src." " “;} return $ tag;} Add_filter satırı, bu kodun her zaman çalıştırılması gerektiğini söyler. Filtre ve kanca sisteminde. Genel olarak WordPress, buradan başlayın!)
Bu koddaki en büyük inceleme, $ defers_scripts dizisini tanımlayan bir şey yapmaktır. Bu dizi ertelemek istediğimiz tüm öğelerin kavrayışını içerir – 1. adımda bulduğumuz kavrama 1 (kavrama elbette değişecektir!) Mantık dizinin tanımı altında (If (in_array () geçerli komut dosyasını arayan Dizideki öznitelikleri ele alalım. Sadece tanımladık. Tutamak dizideki öğelerle eşleşirse, komut dosyasını aynı kaynağa sahip olacak şekilde değiştiririz, ancak yeni bir özellik ile: Defer = “erteleme”, komut dosyasının engellememesine neden olur Rending. Bu değişiklik ile HTML’yi döndürüyoruz ve yapmaya hazırız! (Son olarak, kavrama bulunmazsa, sadece orijinal etiketi kendisi döndürüyoruz, değişmiyor.) Bu eklentinin çalıştığını bileceksiniz Sayfanın kaynağını gördüğünüzde ve böyle bir şeyi kafada gördüğünüzde:
Doğrudan harici JavaScript kitaplığına bağlandığınızda eşzamanlı kullanmayı geciktirmek yerine async ne zaman kullanılır. Bağlantı şöyle görünecek: . Tam URL ve JavaScript’in bağlantısının enqueue JS harici içine nasıl çekileceğine dikkat edin, en azından bizim için çok daha azdır, çünkü enqueed js’imizin çoğu kendi kodlarını barındıran temalarda ve eklentilerde. Bununla birlikte, Async kodu, ertelemenin kodu ile tamamen aynıdır – ancak değiştirilen iki kelime ile. Dolayısıyla, harici olarak yayınlanan çok sayıda enqueue d komut dosyası varsa, onu eşzamanlı hale getirmek, yeni tartıştığımıza çok benzeyen teknik bir süreçtir.
Hangi komut dosyası ertelenecek ve senkronize edilecek her şeyi geciktirmediğimizi göreceksiniz – bazı komut dosyaları hala oluşturmayı engeller. İşte bununla ilgili pratik kurallar: JQuery’ye hiçbir şey yapma. JQuery (JQuery’yi İşleme) diğer birçok JS dosyasına ana bağımlılıktır ve daha erken yüklemesine izin vermek istersiniz.
Genel olarak, tıklamalar ve fare imleçleri gibi kullanıcı etkileşimine bağlı JavaScript dosyalarını ve bir dizi öğeyi odaklamak veya gizlemek gibi düzen ayrıntılarını geliştiren dosyaları erteleyebilirsiniz. Bir kez daha, bu işe yüklenen sayfaya bağlıdır (bu yüzden neredeyse hepsi jQuery (belge) .Ready (function () {}) veya çalışmamaktan sorumludur), bu nedenle güvenli olmalısınız sayfayı daha önce kaldırmak için.
Ne yazık ki, bu yöntemi genel olarak doğru ENQUEUE yöntemi dışında başka şekillerde eklenen JavaScript dosyaları için kullanmak mümkün değildir. Bu, ilk bakışta iyi işlev görebilecek komut dosyaları içermenin diğer yollarından ziyade yöntemi tercih etmenin başka bir nedenidir.
Daha basit bir çözüm ister misiniz? WordPress ile WordPress ile JavaScript’i erteleme Bu ihtiyacın WordPress’teki JavaScript’in ayrışmasını geciktirmek için ne kadar genel olduğu için, bunu yapmak için yazılmış bir eklenti bulabilirsiniz. Doğru metodoloji sizin için biraz daha az önemli hale gelir. Eğer (anlaşılabilir) acele eden bir kişiyseniz, sizi destekliyorum. Acele eden insanlar için kısa bir not: JavaScript’in basit eklenti aktivasyonu ile ayrışmasını ne kadar iyi geciktirebileceğiniz WordPress ayarlarınızın doğasına çok bağlı olacaktır. Birkaç iyi korunmuş eklenti olan basit bir siteniz varsa, sadece Async JavaScript (otomatik olarak yapımcılardan) gibi eklentileri etkinleştirerek düzgün çalışacağını düşünüyorum. Ancak, bu eklentinin bir süre fark etmeyebileceğiniz özelliklere (JavaScript’e dayalı) sorunsuz bir şekilde hasar gördüğüne neden olabileceğini lütfen unutmayın. (Bu, yukarıda tartıştığımız kodu yazdığınızda ve koruduğunuzda da geçerlidir, ancak JavaScript’in ayrışmasını geciktirmek için kod yazdığınızda, etkinleştirmek kadar kolay olduğunuzdan daha kapsamlı bir test yapabilirsiniz. Bir eklenti. ) Her iki durumda da dikkatlice adım attı. Bu eklenti üreticisinin kapsamlı bir şekilde incelemesi muhtemeldir, ancak WordPress sitesi çok çeşitli ve çeşitli olduğu için, JavaScript süspansiyon eklentisini piyasaya sürmeden önce çok test edeceğim. İşte araştırmamda bulduğum üç:
Async JavaScript (yukarıdaki bağlantı) şimdiye kadar en popüler olanı ve ünlü Autoptimize eklentisini yapan insanlar tarafından.(Burada WPSOut’ta otomatik olarak çalıştırıyoruz) Hız amplifikatör paketi – Async JavaScript eklentisinden biraz daha eksiksiz ve biraz daha az popüler görünüyor
WP Ertelenmiş JavaScript – Bu terk edilmiş gibi görünüyor, ancak buraya bütünlük için ekledim
JavaScript WordPress’i geciktirmenin (veya eşsiz) iki yolu özünde, sitenizin hızını ve kullanıcı memnuniyetini artırmanın çok havalı ve oldukça hızlı bir yolunu tartışıyoruz.JavaScript’in ayrışmasını geciktirmek, WordPress sitenizi okuma deneyimi üzerinde önemli etkiler olmadan daha iyi hale getirebilir.Umarım artık kendi JavaScript dosyanızı geciktirecek ve senkronize edecek kadar biliyorsunuzdur ve okuduğunuz için teşekkür ederiz!Aşağıdaki yorumları veya soruları duymak istiyorum.Kredi görüntüsü: Celine Nadeau
