Blogger: Kako sprečiti učitavanje eksternih CSS i JS resursa? - ★★ Fog Developer ★★

Novo

6/recent/ticker-posts

Blogger: Kako sprečiti učitavanje eksternih CSS i JS resursa?

Jedan od razloga zašto je Blogger popularan leži u činjenici da je prilično jednostavno modifikovati izvorni kôd njegove stranice.
Ovo je često zgodno ukoliko imate neko slabo ili osnovno znanje iz kodiranja web sadržaja, a pri tom želite da izvršite neke izmene na Bloggerovom šablonu, korekcije, popravke ili čak i da kreirate sopstveni izgled bloga.
Korisnici koji imaju malo naprednije poznavanje problematike će u tom trenutku naleteti na jedan malo veći problem koji vrlo lako može da promakne njihovim neiskusnijim kolegama. Naime, Blogger će prilikom upotrebe podrazumevanih gedžeta automatski da dodaje CSS i JavaScript fajlove sa svojih servera. Ovi fajlovi služe kako bi se određeni gedžeti prikazivali i funkcionisali ispravno.

Problem

Problem koji iz svega toga proizilazi je taj da ti dodatni resursi znatno opterećuju blog. U njima se nalazi gomila stvari koja Vam u konkretnoj situaciji nije potrebna.
Primer može biti prilično jednostavan: želimo da nam blog bude lako prevođen na jezik onoga ko ga u tom trenutku posećuje. Ubacujući gedžet Google translatora na blog, mi dobijamo gomilu CSS i JS kôdova koji su npr. vezani za gedžet wikipedia koji ni ne želimo da koristimo.
Sve to usporava učitavanje vašeg bloga.
Postavlja se pitanje, da li postoji jednostavan način da se to spreči?
Odgovor je da postoji.

Sprečavanje učitavanja eksternih resursa pomoću Bloggerovih oznaka

Da bi smo sprečili da Blogger automatski očitava svoje eksterne resurse možemo da koristimo dve bloggerove oznake:
  1. b:css='false' - nam služi kako bi smo sprečili učitavanje CSS fajlova.
  2. b:js='false' - nam služi da bi smo sprečili učitavanje programskog koda.
Ove oznake treba postaviti u kao atribut prilikom deklaracije <html> elementa Bloggerovog šablona izgleda.
Dakle, deklaracija <html> elementa treba da izgleda ovako:
<html b:css='false' b:defaultwidgetversion='2' b:js='false' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' lang='sh' xml:lang='sh' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
U gornjem kodu sam crvenom bojom istaknuo ove oznake. Takođe, moram naglasiti da je ova deklaracija <html> za šablone novije generacije. Isti savet važi i ukoliko kodirate starije verzije Bloggerovih šablona u koje treba dodati samo oznake b:css='false' i b:js='false' kao i u ovom primeru.

Značenje oznaka i novi potencijalni problemi

Značenje ovih oznaka je jednostavno: sprečavate podrazumevan Bloggerov CSS i JS kôd da se učitava.  Ove oznake možemo upotrebljavati svaku pojedinačno ili obe istovremeno.
Deluje ohrabrujuće, zar ne? Pa ipak postoje par stvari na koje mora da se obrati pažnja.
Prva stvar koju morate znati je da ovaj kod ne utiče na ručno dodate eksterne resurse. Ovo znači da će Blogger i pored oznaka b:css='false' i b:js='false' da učita ove dve linije koda:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-12/css/all.min.css" rel="stylesheet" />
ili
<script async='true' id='dsq-count-scr' src='//fogdeveloper.disqus.com/count.js'/>
Ovo su direktno navedeni resursi i smatra se da mi njih želimo da koristimo. Bilo bi krajnje pretenciozno da Blogger isključi sve CSS ili JavaScript resurse, zar ne? Naredbe b:css='false' i b:js='false' prosto znače: "Bloggeru nemoj da učitavaš resurse za koje ne znam ni da postoje!"
Druga stavka je da ovi kodovi ne rade sa svim gedžetima. Naročito ako koristite dodatke koje je neko drugi kodirao. Primer za to su gedžeti tipa: najnoviji komentari, random postovi, Disqus komentari, dodaci za društvene mreže itd.
Dakle, neki gedžeti već u sebi imaju ugrađen CSS i JavaScript kod potreban za njihovo izvršavanje, tako da su oni nezavisni od drugih delova šablona.
Treća stvar leži u činjenici da neučitavanje određenih resursa može da nam stvori neočekivane probleme.

Problem neočitavanja CSS fajlova

Ovaj problem je očigledan na novijim responzivnim Bloggerovim podrazumevanim šablonima izgleda jer oni u sebi već imaju b:css podešen u false.
U njima je dovoljno dodati bilo koji gedžet starije generacije (npr. kontakt forma) i primetiti šta se dešava. Ta kontakt forma neće izgledati lepo!
Rešavanje problema kada nisu učitani Bloggerovi CSS resursi je laka. Dovoljno je osmisliti i iskodirati sopstveni izgled gedžeta koji se neispravno prikazuje.

Problem neočitavanja JavaScript fajlova

Ukoliko neki Bloggerovi dodaci zavise od eksternih JavaScript fajlova, onda nas podešavanje b:js u false može dovesti u mnoge probleme.
Primer za to je Bloggerov podrazumevan dodatak za deljenje sadržaja. Ukoliko koristimo dodatke iz drugih izvora (AdThis, ShareThis itd.) onda nam ovo i nije problem.
Problemi se mogu javiti i sa LightBox-om (pregled slika u posebnom prozoru).
Međutim, možda najveći problem prilikom isključivanja Bloggerovih JavaScript resursa je taj što neke funkcije neće raditi u samom Bloggeru.
Na primer, podešavanjem b:js='false' kartica za podešavanje rasporeda gedžeta "Izgled" (Layout) će postati nefunkcionalna. Izgledaće kao na slici ispod:
b:js='false' uništava Layout tab
Da bi smo povratili ove Bloggerove funkcionalnosti mi možemo jednostavno podesiti b:js='true'.
Iz ovih razloga se isklučivanje Bloggerovih JavaScript resursa mora koristiti sa određenom dozom opreza i znanja.

Постави коментар

0 Коментари