Web dizajn JS i CSS iznad preloma

[zechina]

Pozdrav,
koristim premium WP temu (The 7) i imam problem sa Google-ovim PageSpeed Insights.
Naime, nakon testiranja stranice ovo su tri obavezne stvari koje moram da uradim:

1. Eliminišite JavaScript i CSS koji blokiraju prikaz u sadržaju iznad preloma;
2. Uskladite keširanje pregledača;
3. Smanjite vreme odgovora servera.

Za prva dva sam probao sve plugine koji su namenjeni za to i rezultat je ili usporavanje stranice ili, da se tako izrazim, stranica bude iskidana na dijelove.

Ima li iko ideju šta uraditi?

 

[flex202]

Pozdrav,
koristim premium WP temu (The 7) i imam problem sa Google-ovim PageSpeed Insights.
Naime, nakon testiranja stranice ovo su tri obavezne stvari koje moram da uradim:

1. Eliminišite JavaScript i CSS koji blokiraju prikaz u sadržaju iznad preloma;
2. Uskladite keširanje pregledača;
3. Smanjite vreme odgovora servera.

Za prva dva sam probao sve plugine koji su namenjeni za to i rezultat je ili usporavanje stranice ili, da se tako izrazim, stranica bude iskidana na dijelove.

Ima li iko ideju šta uraditi?

Za prvu opciju ne znam , sve i svašta sam probao i nije pomoglo.Možda je najbolje platiti nekom da to odradi ako se ne nađe nikakvo riješenje, ja nisam a stvarno sam pokušao sve i svašta i izgubio dane i dane bezveze.

Druga opcija bi možda mogla da se sredi sa W3 Total Cache dodatkom, treća opcija kvalitetnim hostingom.

Koristiš li neki dodatak za keširanje i gdje imaš hosting za sajt?

 

[zechina]

Prva opcija mi pravi najveći problem. Koristim WP Super Cache a hosting je domaći pa se premišljam da se prebacim na BlueHost ili DreamHost, obzirom da su optimizovani za WordPress.

 

[asix]

Za ovo prvo, probaj da JS i CSS stavis da ih poziva tek dole, pri kraju </body>.
U slucaju kad je CSS dole, desice se da pri ucitavanju stranice ona prikazati za trenutak kao da nema CSS.
JS je OK staviti dole, a CSS dobro je da stoji gore, i za CSS ima neko resenje koji oni navode, al nisam se time bavio.

 

[belmo996]

Hajde evo jedan mali tut od mene kako premjestiti sve JS fajlove u Footer bez plugina.Prilikom loadanja JS fajlova unutar WordPress koristi se wp_enqueue_script funkcija.Ta funkcija ima odredjene parametre koji ce nama koristiti:

Klasican primjer snnipeta sa Codex-a:

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

$handle - prestavlja unikatan handler, koji nam daje mogucnosti da manipulisemo negdje drugo sa pozvanim JS fajlom unutar functions.php fajla.Npr ukoliko nam je loadanje nekog fajla negdje bespotrebno, handler mozemo iskoristiti kako bi deregistrovali fajl, odnosno onemogucili njegovo ucitavanje.

$src - nema se sta puno pricati.Putanja do JS fajla

$deps - dependency.Ako neka skripta zahtjeva jQuery ili neku drugu bilblioteku jednostavno uradimo array i pozovemo jQuey koji je ugradjen u WordPress.

$ver - verzija - nista bitno.

$in_footer - ovo je ono sto nas zanima.Moze biti true ili false.Ukoliko zelimo da se JS fajla postavi na dno odnosno prije </body> trebamo dodati true parametar.Po defaultu je na false, sto znaci da JS fajlovi idu u head tagove.

Znaci pronadji u funckijama teme gdje se ucitavaju JS fajlovi (samo JS fajlovi ne CSS) i jednostavno dodaj novi parametar true.

Evo neki klasicni primjer.Obrati paznju samo na zadnji parametar.

<?php wp_enqueue_script( 'izf-skripta', get_template_directory_uri() . 'js/bootstrap.min.js', array('jquery'),20150509, true ); ?>

 

[zechina]

Hvala, ovo puno znači. Odoh da probam

 

[SpawneR]

S obzirom da je kolega belmo postavio resenje za prvi problem evo ja cu za drugi problem

Sledeci kod dodaj u svoj .htaccess fajl

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Nikakav plugin ti ne treba, ovo ce da ti resi kompresju... Od plugina za ubrzavanej koristim sao autoptimizer :waving:drinking