Blogger'dan CSS ve Javascript'i tamamen kaldırın

Mejorar rendimiento de Blogger eliminar JS web vitals

Blogger varsayılan olarak üstbilgi ve altbilgiye CSS ve JavaScript kodu ekler, bu resmi temalar için yararlıdır, ancak yükleme süresini artırdığı ve sayfanın üst kısmının oluşturulmasını yavaşlattığı için performansa zarar verir. Kendi şablonunuzu geliştiriyorsanız bu dosyalar gerekli değildir, aslında bunları kaldırmak sizin yararınızadır ve burada size bunu nasıl yapacağınızı göstereceğim.

Bu bir CSS sıfırlamasıdır, ayrıca widget'lar ve bazı hack'ler için stiller içerir. Dosya Blogger tarafından otomatik olarak <head> altına eklenir, kaldırmak için <html> etiketine b:css='false' eklemek kadar basittir, bunun gibi:

<html b:css='false'>

widget.js devre dışı bırakmak

Blogger'ın eklediği, widget'lara işlevsellik katan ve bazı özellikleri etkinleştiren en önemli javascript dosyası. Bunu kaldırmak için <html> etiketine aşağıdaki gibi b:js='false' eklemeliyiz:

<html b:js='false'>

Ancak bekleyin, bu dosyayı silmek bazı sorunlar getirecektir, eğer silerseniz bunu bilmeniz önemlidir:

İletişim formu widget'ı artık çalışmayacaktır.
Blogger'da “Tasarım” sekmesini kullanamayacaksınız.

Bu nedenle, belirli bir zamanda bu özelliklerden herhangi birine ihtiyaç duyarsanız, kodun tekrar çalışmasını sağlamak için değişiklikleri geri almanız gerekecektir.

Javascript kullanarak widget.js kaldırma

Bu yöntem Blogger'da “Tasarım” sekmesini kullanmanıza izin verir. Ancak iletişim formu widget'ı yine de çalışmaz ve çerez uyarısı da görüntülenmez. Bunu yapmak için </body> ifadesini arayın ve şu şekilde değiştirin:

&lt;textarea hidden id='bjs'></body>&lt;/textarea>
&lt;/body>

Not: hidden özelliğine sahip etiketlerin hiç gösterilmediğinden emin olun, eğer durum böyle değilse aşağıdaki css kodunu ekleyebilirsiniz:

[hidden] { display: none }

Bu noktada, widget.js'nin çalışmasını zaten engelledik, ancak henüz kodu kaldırmadık veya çerez uyarısını geri döndürmedik. Her ikisini de başarmak için aşağıdaki javascript kodunu ekleyin:

const REG_EXP = /cookieOptions\.(\w+)\) \|\| '(.+)'/g
const cookieJs = '/js/cookienotice.js'

const textarea = document.getElementById('bjs')

const loadScript = (src) => new Promise((resolve, reject) => {
  const $script = document.createElement('script')
  $script.src = src
  $script.onload = resolve
  $script.onerror = reject
  document.body.appendChild($script)
})

const decodeHtml = (string) => {
  return string.replace(/\\x(\w{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
}

const loadCookieScript = () => {
  const textareaContent = textarea.value
  const cookieOptions = window.cookieOptions || {}
  const Default = {}

  textareaContent.replace(REG_EXP, (_, key, value) => {
    Default[key] = decodeHtml(value)
  })

  if (textareaContent.includes(cookieJs)) {
    loadScript(new URL(cookieJs, window.location.origin).href)
      .then(() => {
        const {
          msg = Default.msg,
          close = Default.close,
          learn = Default.learn,
          link = Default.link
        } = cookieOptions

        if (typeof window.cookieChoices?.showCookieConsentBar === 'function') {
          // eslint-disable-next-line no-undef
          cookieChoices.showCookieConsentBar(msg, close, learn, link)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
}

if (textarea) {
  loadCookieScript()
  textarea.remove()
}

Artık iletişim formu widget'ı dışında her şey düzgün çalışmalıdır; bunu Formspree gibi Pure HTML ile çalışan, müdahaleci olmayan harici bir hizmetle değiştirmenizi tavsiye ederim. Bunu zkreations Hamlet geliştirme temasında görebilirsiniz.

Sonuç

Üçüncü taraf bir tema kullanıyorsanız ve bu dosyalar devre dışı bırakılmamışsa, önemli işlevleri kaybedebileceğiniz için bunları kaldırmamanızı tavsiye ederim. Ancak, kendi temanız üzerinde çalışıyorsanız, daha iyi bir performans elde etmek ve şablonunuzun gelişimini iyileştirmek için bunları kaldırabilirsiniz. Okuduğunuz için çok teşekkür ederim, umarım yardımcı olmuştur.

widget_css_bundle.css devre dışı bırakmak

widget.js devre dışı bırakmak

Javascript kullanarak widget.js kaldırma

Sonuç