WordPress’teki üçüncü taraf komut dosyalarının etkisi nasıl azaltılır
Üçüncü taraf komut dosyaları web sitenize çeşitli yararlı özellikler ekler, daha etkileşimli, dinamik ve birbiriyle ilişkili hale getirir. Analitik, reklamlar, sosyal medya paylaşım düğmeleri, video gömme gibi özellikler – Üçüncü taraf komut dosyaları sayesinde her şey mümkündür. Bu özelliklerden bazıları, web sitenizin işlevselliği veya para kazanması için önemli olabilir. Ancak, üçüncü taraf senaryoları da web sitesindeki performanstaki düşüşün ana nedenlerinden biridir. Sayfa yükleme sırasında genellikle en pahalı kaynaklardır. Bu senaryolardan bazıları güvenlik ve gizlilik riski de oluşturabilir.
Bu makalede, üçüncü taraf senaryoların temellerini, web sitesinin performansı üzerindeki etkisini ve olumsuz etkileri azaltmak için neler yapabileceğinizi inceleyeceksiniz. Kulağa ilginç geliyor mu? Başlayalım! Üçüncü taraf senaryo nedir? ‘Üçüncü -Party Script’, üçüncü bir taraf satıcısından doğrudan web sitenize yerleştirebileceğiniz herhangi bir komut dosyasını ifade eder. Sizin tarafınızdan yapılmazlar veya sizin tarafınızdan açıkça kontrol edilirler ve harici URL’lerden sunulur. Üçüncü taraf senaryo nerede kullanılır? Hemen hemen her web sitesi birkaç işlev eklemek için üçüncü taraf bir komut dosyası kullanır. En yaygın kullanımlarından bazıları:
Pinning videoları (örneğin YouTube, Vimeo)
Bir Sosyal Paylaşım Düğmesi Ekle
Sohbet widget’ı ekle
Bir yorum sistemini sabitlemek (örneğin Disqus)
Web analizini etkinleştirin (örn. Google Analytics)
Reklamları Yerleştirin
İçeriğin Ağ Teslimi (CDN) aracılığıyla kaynakları sunmak
A/B test komut dosyasını denemek
Bir Hizmetçi Kütüphanesi Ekleme (örneğin animasyon, Fonksiyonel Kütüphane, vb.)
Kullanıcılar, sevdikleri makaleleri en sevdikleri sosyal ağlarla paylaşabilirler.
Potansiyel müşteriler, sohbet widget’ından destek veya satış personeliyle iletişime geçebilir ve hemen sorularına cevap alabilir.
Üçüncü taraf komut dosyası uygulamaları sınırsızdır, ancak orada bitmez. Dikkatli kullanılırsa, üçüncü taraf komut dosyaları gizlilik, güvenlik ve sayfa performansı için sorunlara neden olabilir.
Üçüncü taraf JavaScript üçüncü taraf komut dosyalarının maliyeti her yerdedir. HTTPrachive tarafından JavaScript Raporu’na göre, web sitesi tarafından talep edilen ortalama harici komut dosyası sayısı 20 ve toplam boyut 449 kb civarındadır. Web sayfalarının% 93,59’u en az bir üçüncü taraf kaynağı içeriyor. Aynı verilerde daha fazla kazmak, web sitelerinin% 76’sının kullanıcıları analitik komut dosyalarıyla izlediğini göstermektedir. Üçüncü taraf bir komut dosyasının en kötü etkisi, önemli oluşturma yolunu geciktirmek, ayrıca FID değerinden başlayarak temel web veri puanınızı etkilemektir. Önemli bir oluşturma yolu, tarayıcı tarafından HTML, CSS ve JavaScript’i canlı ve kullanılmış bir web sitesine monte etmek için yapılan bir dizi eylemdir. Doğal olarak, üçüncü taraf bir komut dosyası içeriğinin boyutu burada önemli bir rol oynar, ancak dikkate alınması gereken başka önemli faktörler de vardır.
2019 yılında, mevcut komut dosyasını işlemek için baskın maliyet, CPU yürütmenin indirilmesi ve zamanıdır. JavaScript ücretleri 2019’da JavaScript, yürütülmesini çok sayıda CPU kaynağı gerektirir. Oluşturma sırasında etkiyi azaltmak için üçüncü taraf komut dosyalarını optimize etseniz de, komut dosyası yine de etkileşimli zaman metriğini etkileyebilir. Bu, kullanıcının web sayfalarıyla ne kadar hızlı etkileşime girebileceğini ölçer. Daha yavaş, kullanıcılarınız ne kadar sinirli olursa ve web sitenizden ayrılma olasılığı o kadar yüksek olur. JavaScript kullanmanın maliyetini iki ana metrikle kullanabilirsiniz. Kral için bayt sayfalarının boyutunu artıran JavaScript, web sayfaları tarafından sunulan en pahalı üçüncü taraf kaynaklardır. Tarayıcının sayfa yüklemesi sırasında bağlantılı tüm üçüncü taraf komut dosyalarını indirmesi gerektiğinden, web sitenize eklemek onu yavaşlatabilir.
Web sayfalarında harici komut dosyası boyutunun aktarılması miktarı (kaynak: httprachive) Komut dosyasının boyutu ne kadar büyük olursa, web sitenizin performansının performansı o kadar zor olur. Sonuçta, web sayfasının boyutu ne kadar büyük olursa, daha yavaş yükleme. Harici bir komut dosyasının boyutunu azaltmak, web sitenizi hızlandırmanın etkileyici bir yoludur.
Ek Ağ Talepleri Kullanıcı Site sayfanızı her sorduğunda, tarayıcının tüm üçüncü taraf komut dosyalarını gömülü alması gerekir. Bunu yapmak için tarayıcı, bu komut dosyasının indirmek için barındırıldığı tüm harici URL’lere ulaşacaktır. Genellikle sıradan sayfalar (kaynak: httprachive) tarafından talep edilen harici komut dosyalarının sayısı, her üçüncü taraf komut dosyası kendi başına fazla bir şey ifade etmez. Ancak her üçüncü taraf komut dosyasını içeren, sayfayı tamamen oluşturmak için bir tarayıcı yapılması gereken ek bir HTTP isteğidir. Bu istek sayfa performansını yavaşlatmak için yığıldı. Ayrıca, web sayfanız ne kadar çok talepte bulunursa, ‘etkileşimli’ metrik için o kadar uzun olur.
Chrome Devtools, yukarıdaki örnekte 846 istekte bulunan ve 12.3 MB (Nisan 2020) aktarılan bir web sitesi gösteriyor, sayfanın tamamen yüklenmesi 9 saniyeden fazla sürdüğünü görebilirsiniz. Buradaki ana neden, yükleme sayfasının hızını azaltan birçok üçüncü taraf komut dosyası yerleştirmektir. Üçüncü Taraf Talepleri Kategorilere ve İçerik Türlerine göre (Kaynak: Web Almanac) Script, web siteleri tarafından kullanılan tek üçüncü taraf kaynağı değildir, ancak komut dosyaları tüm kategorilerde ve türden üçüncü taraf isteklerinin çoğunu yapar. Bu nedenle, bunu optimize etmek sizin önceliğiniz olmalıdır.
Üçüncü yüklemenin etkisini ölçme JavaScript Üçüncü taraf komut dosyalarını teşhis etmek ve web sitenizdeki en pahalı kaynak olduğunu bulmak için kullanabileceğiniz birçok web sayfası hız test ekipmanı vardır. Bu araçlar size siteniz tarafından yayınlanan üçüncü taraf komut dosyalarının sayısını ve yürütmek için gereken süreyi gösterir. Üçüncü taraf komut dosyalarını değerlendirmek için kullanabileceğiniz bazı ücretsiz araçlar: Webpagetest.org Chrome geliştiricisi
PagePeed Insight (Deniz Feneri Denetimi)
WebPagetest.org WebPagetest, web sitenizin performansını değerlendirmek için kullanabileceğiniz ücretsiz bir açık kaynak hız test aracıdır. Bu, şelale grafikleri, tür ve alana göre içerik ayrıntıları, web sayfaları, film ve video şeritleri ve karşılaştırma testleri gibi birçok gelişmiş özellik içerir. WebPagetest, sitenizin performansını test etmek için birçok sofistike araç sağlar. Aşağıda, şelalenin sayfanın yüklenmesi sırasında sitem tarafından yapılan istekten görüntülenmesi bulunmaktadır. Bu çok fazla istek, ancak hepsi üçüncü taraf kaynaklarından gelmiyor.
Tüm isteklerin şelalenin şelale grubu grubunun webpagetest grafiğinde, sayfa yüklemesini temsil eden zaman çizgisiyle birlikte etki alanı ve boyutuna göre talepleri gösterilmesi. ‘İçerik Ayrıntısı’ sekmesini tıklayarak içeriğin türüne göre gruplandırılmasını da görebilirsiniz. Gördüğünüz gibi, JS birçok istek ve bayt aktarılır.
‘Etki Alanı’ sekmesini tıklatan WebPagetest’e aktarılan JS ve bayt isteklerinin sayısını kontrol edin, sayfa yüklemesi sırasında tarayıcının ulaştığı tüm alanların tam bir listesini verecektir.
İçerik Gruplama Buradaki webpagetest alanındaki etki alanına göre, talebin çoğu evin alanından geliyor. Tüm bu istekleri görselleştirmek için ‘İstek haritası’ bağlantısını da tıklayabilirsiniz. Webpagetest’teki web sitelerini yüklemek için tüm istekleri görselleştirin, yüklemek veya yürütmek için çok zaman gerektiren sorunlu komut dosyasını tanıyorsanız, komut dosyasının gerekli olup olmadığını kontrol edin. Web sitesinin işlevselliğine veya kullanıcınızın deneyimine gerçek hasara neden olmazsa komut dosyasını silin. WebPagetest ayrıca, belirli alanlardan gelen istekleri engelleyerek web sitenizin hızını test etmeniz için bir yol sağlar. Bu, belirli hedefleme ile ilgili sorunları olan üçüncü taraf komut dosyalarının performansının etkisini ölçmek için kullanışlıdır. WebPagetest komut dosyası, belirli alanlardan talepleri engellemenizi sağlar. https: //www.domain. COM Örneğin, tüm harici alanlardan (önemli CDN hariç) istekleri engelleyebilir ve ardından webpagetest’i test etmek için siteye gitmek için yönlendirebilirsiniz. Not: Aynı şeyi yapmak için WebPagetest’in ‘Diğer Ayarlar’ bölümünde ‘Engelleme’ sekmesini de kullanabilirsiniz. Aşağıda, yavaş komut dosyalarını tanımlamak için WebPagetest’i kullanmak için genel bir iş akışıdır: Orijinal web sayfası testi. Aynı web sayfasını test edin, ancak bu sefer engellenen belirli bir üçüncü taraf komut dosyasıyla. ‘Test Geçmişi’ panelindeki ‘WebPagetest özelliğini karşılaştırın. WebPagetest’teki sadece WebPagetest’in yaptığı değil, iki veya daha fazla testi karşılaştırmak için ‘Test Geçmişi’ panelini açın. Üçüncü taraf komut dosyası performansının etkisini test etmek için WebPagetest’in nasıl kullanılacağı hakkında daha fazla bilgi edinebilirsiniz. Chrome Chrome Devtools geliştiricileri, ‘Ağ’ panelinde üçüncü taraflarca ağ talebinin dahil edilmesini destekliyor. Bu özellik, bir sayfada üçüncü taraf komut dosyası istekleri hakkında ayrıntılı bilgiler almanıza olanak tanır. Bu özelliği kullanmak için harici istekleri (kaynak: google) vurgulamak için ‘Üçüncü Taraf Sprout’ etiketini kullanın, Ctrl/CMD + Shift + P’ye basın. krom panellerin ‘komut menüsünü’ açmak için Devtools. Ardından, “Üçüncü taraf rozeti göster” yazın ve bu özelliği etkinleştirin. Chrome Devtools (Kaynak: Google) ‘deki üçüncü taraf komut dosyasının üzerinde yüzen Not: Google Chrome sürüm 80 bu özelliği sildi ve değiştirme olmadığını açıkladı. Büyük olasılıkla bir hata. Şimdilik, Google bu sorunu çözene kadar harici komut dosyasını manuel olarak sıralamanız gerekir. Web sitenizdeki performans sorunlarını belirlemek için Chrome Devtools’taki ‘Performans’ panelini de kullanabilirsiniz.
Chrome Devtools’taki ‘Performans’ paneli, Chrome Devtools ile sayfa yüklemesinin performansını nasıl test edeceğiniz hakkında daha fazla bilgi edinmek için Google’ın bu konuyla ilgili eğitimine bakın. Google Deniz Feneri Hız Test Ekipmanının deniz feneri denetiminde, sitenizin performansını değerlendirmek için iki özel denetim vardır. JavaScript Deniz Feneri Önyükleme Denetimi Sıralama komut dosyaları ayrışma, derleme ve değerlendirme süresine dayalı. Bu metrik, sunucu kaynaklarınızın çoğunu harcayan üçüncü taraf bir komut dosyası bulmanıza yardımcı olabilir. Deniz Feneri ‘JavaScript Önyükleme Süresi’ (Kaynak: Google) Denetim Deniz Feneri Ağ Ücretleri, toplam boyut ve aktarım süresine göre tüm komut dosyalarını içerir. Site sayfalarınızın açılış saatini yavaşlatabilecek üçüncü taraf komut dosyalarını tanımlamak için bu metriği kullanabilirsiniz.
Denetim Deniz Feneri ‘Ağ Yükleri’ (Google) Chrome’un Varsayılan Deniz Feneri Aracı, sayfadaki aktarma boyutuna ve zamanına göre sıralanan pahalı üçüncü taraf kaynaklarını da gösterir.
(Kaynak: Addy Osmani, Mühendislik Müdürü, Google Chrome ekibi) Şimdi üçüncü taraf senaryolarının performansını nasıl test edeceğinizi öğrendikten sonra, tehlikeleri nasıl azaltacağınızı veya reddedileceğini öğrenmenin zamanı geldi. WordPress’te Üçüncü Partiye Komut Dosyasının Etkisi Nasıl En aza indirilir 1. Üçüncü taraf komut dosyasını Yükleme Geciktirilir Web sitenizi yavaşlatan bir üçüncü taraf komut dosyası bulursanız, sayfalarınızı yükleme üzerindeki olumsuz etkiyi önlemek için async veya html erteleme özelliklerini kullanarak yükleyebilirsiniz .Async özelliği, tarayıcıyı komut dosyası indirilinceye kadar kalan HTML belgelerini çözmeye devam etmeye zorlar.Komut dosyası tamamlandıktan sonra, komut dosyası komut dosyasını çalıştırmak için HTML belgelerinin ayrışmasını zorlayacaktır.Tarayıcı, tüm HTML belgelerini özetleyene kadar komut dosyasını çalıştırmadığı sürece, erteleme öznitelikleri aynı şeyi yapar. ‘Async’ vs ‘ertesi’ (kaynak: web ile büyümek) özelliğinin tüm üçüncü taraf komut dosyalarınızı async veya dalgıç özellikleriyle yüklemesi önerilir (web sayfalarınızın önemli oluşturma yolu için önemli olmadığı sürece). WP Rocket IN -De -De -De -Dewn Makalesinde JavaScript’i geciktirme hakkında daha fazla bilgi edinebilirsiniz. WP Roket, JavaScript dosyalarını geciktirmenin ve sayfalarınızın daha hızlı yüklenmesine izin vermenin en kolay yoludur. 2. Üçüncü taraf bir JavaScript dosyası Self-host sunucunuza üçüncü taraf bir komut dosyasını asmak, komut dosyasının yüklenme şekli üzerinde daha fazla kontrol sağlayabilir. Bu, DNS ve zaman boşluğu aramasını azaltmaya, HTTP önbellek başlıklarını artırmaya ve HTTP/2 Push sunucusu gibi gelişmiş özellikleri kullanmaya yardımcı olur. Web sitesi işleviniz için önemli olan üçüncü taraf komut dosyaları için mandiri barındırma önerilir (örn. JQuery, Modernizr, Underscore.js). Uyarı: Kendiniz tarafından gönderilen komut dosyası süresi dolabilir ve gerektiği gibi çalışamaz. Örneğin, reklam senaryosunu kendiniz gönderiyorsanız ve reklam yayıncısı senaryolarının çalışma şeklini değiştirirse, web siteniz manuel olarak kendiniz gönderilen komut dosyalarını güncelleyene kadar herhangi bir reklam göstermez. 3. Üçüncü taraf komut dosyasını bir bütün olarak kaldırın Üçüncü taraf komut dosyası sitenize veya kullanıcınıza net bir değer eklemiyorsa, silmeyi düşünün. Birçok WordPress teması ve eklentisi, asla kullanamayacağınız birçok gereksiz komut dosyası içerir. WordPress, jQuery Migrate komut dosyasını WordPress’i bile yüklemeye zorladı, her siteyi JQuery Migrate komut dosyasını (WP-IncaDes/JS/JQuery/JQuery Migrate.min.js) yüklemeye zorladı. Bu, eski eklentilerin ve temaların JQuery’nin eski sürümüyle uyumluluğu korumasına yardımcı olur. Bu, kendiniz gönderildiği için üçüncü taraf bir senaryo olmasa da, bu komut dosyası hala gerekli olmayan ek HTTP istekleri ekliyor. İpucu: JQuery Migrate komut dosyasını yüklemeden silmek için varsayılan WP roket seçeneğini kullanabilirsiniz. Web sitenizin gerçekten kayan bir bıçak veya tarih komut dosyasına ihtiyacı olup olmadığını kendinize sorun. Emin değilseniz, komut dosyasının silinmesinin web sitenizin kullanımının performansını etkileyip etkilemediğini kontrol etmek için A/B testi yapabilirsiniz. 4. Üçüncü -Party komut dosyalarını indirmek için harici bir etki alanına bağlanmak için tarayıcı kaynak talimatlarını uygulayın, özellikle kullanıcınız yavaş bir ağdaysa çok zaman alabilir. Her üçüncü taraf komut dosyasını yüklemek için DNS, saptırma ve alternatif geziler arayışı önemli gecikmeler ekleyebilir. Sayfanın kendisinin yüklenmesinin başlangıcında üçüncü taraf komut dosyaları yayınlayan harici bir etki alanına sahip bağlantılar oluşturmak için tarayıcı kaynak talimatlarını kullanabilirsiniz. Birçok kaynak talimatı vardır, ancak burada yararlı olan DNS-PREFETCH veya PRECTNECT’dir. Üçüncü taraf komut dosyası alanınızın son hedefi https: // kullanıyorsa, alternatif TCP’yi önlemek ve TLS’yi işlemek için kullanabilirsiniz. daha önce herhangi bir şey müzakere. Daha fazla bilgi için tarayıcı kaynak talimatları hakkında WP Roket makalesine bakın.5. Reklamlar ve videolar gibi gömülü üçüncü taraf öğeleri içerecek şekilde tembel olan JavaScript üçüncü taraf, özellikle iyi optimize edilmeyen kaynaklar aracılığıyla teslim edildiğinde, web sitenizde çok fazla baskı ekler.Sayfalarınızın yüklenmesini hızlandıran yavaş kaynakları yükleyebilirsiniz.Örneğin, web sitenizin altbilgisinde reklamlar gösterirseniz, yalnızca kullanıcı sayfayı eğittiğinde yüklenecek şekilde yavaşça yükleyebilirsiniz. Daha düşük yarım yarım içerik Yüklü (Kaynak: Google) WordPress sitenizde tembel yüklemeyi etkinleştirmek için WP Rocket’i kullanabilirsiniz. Not: WordPress 5.5, orijinal yavaş yükleme işlevselliği ekleyerek milyonlarca web sitesi için varsayılan bir özellik haline getirir. Reklamları web sitenize yerleştirirseniz, Medievine tarafından yapılan bu makaleye bakın ve burada yavaş yükleme uyguladıktan sonra sayfa hızlarını% 200 oranında nasıl artırdıklarını tartışırlar. Üçüncü taraf JS etiket yöneticisini ayarlamak için etiket yöneticisini kullanın. Birkaç üçüncü taraf komut dosyasını (veya etiketleri) birleştirmenize ve her şeyi tek bir kaynaktan yönetmenize olanak tanır. Etiket yöneticisini akıllıca kullanmak, üçüncü taraf bir komut dosyasını yüklerken hit hit’i en aza indirmenize yardımcı olabilir. Üçüncü taraf komut dosyalarını eşzamansız yükleyebilmenize rağmen, tarayıcının hala tek tek tanımlaması ve çalıştırması gerekir. Bu, sayfa yüklemesi sırasında ek veri istemek anlamına gelebilir. Etiket yöneticisi, istek sayısını bir tane azaltarak bu sorunu çözer. Google Manager Tag (GTM), etiketleri yönetmek için en popüler çözümdür. Kendini içerir ve tüm etiketler eşzamansızdır, böylece tarayıcı sayfayı duraklama olmadan oluşturur. Yavaşça içeren üçüncü taraf komut dosyası bile yüklenecek diğer komut dosyalarını engellemez. WordPress için Google Tag Manager eklentisi, GTM’yi WordPress sitesine entegre etmenin basit bir yoludur. Görebileceğiniz diğer etiket yöneticileri, Adobe Experience, Ensight ve Quit Platformunun lansmanıdır. Uyarı: GTM gibi etiket yöneticilerini akıllıca kullanın.Üçüncü taraf komut dosyalarını yükleme maliyetini azaltmasına rağmen, sadeliği de etiket eklemek için kimlik bilgileri olan herkes tarafından kötüye kullanılmasını sağlar.Bazı etiketler ayrıca sitenizi tarayabilecek talep zincirini de tanıtabilir. (Kaynak: Harry Roberts, Google’da Performans Mühendisi Danışmanı, BBC, Kickstarter, vb.) Sitenin performansını optimize ettikten sonra bir performans bütçesine sahiptir, Sitenizin performansının zaman içinde düşmemesini sağlamak için performans bütçesini kullanın.Performans bütçesi, komut dosyalarının, görüntülerin vb. Toplam talep ve boyutlarını hesaplamak için kendi başına belirlenen sınırdır.Bu bütçe, ‘Etkileşimli Zaman’ ve ‘İlk Anlamlı Resim’ gibi performans metrikleri için sınırları da içerebilir.Daha fazla bilgi için, desteklenen kaynakların her tür ve metrikinin listesine bakın.
