Modalitati reducere requesturi

Caut modalitati prin care sa reduc numarul de requesturi astfel incat siteul sa se incarce instant.
La siteul la care lucrez includ 3 cssuri si 3 jsuri:

<link rel="stylesheet" type="text/css" href="/css/bootstrap-3.2.0.min.css" />
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-3.2.0.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>

Daca includ astea inline <style> continut css </style> si <script> continut javascript </script> scap de request-uri dar browserul nu poate cache-ui resursele astea.

Cum e mai bine pt viteza de incarcare ? Sa includ resursele in mod normal sau inline ?
Si daca includ resursele normal, e mai bine sa le am pe server sau includ de pe CDN ?

  • concat css si js, din 6 requesturi faci 2
  • un subdomeniu pentru assets, poate fi pe CDN sau nu. Chiar daca e pe acelasi server ar trebui sa ajute
2 Likes

Cssul il unifici. Un singur request css. Daca e sub 200k il poti pune inline

Jsul il unifici si il pui la sfarsit. Daca nu ai si alte chestii aiurea scazi sub 800ms rendarea

Treaba asta cu minify & concat la CSS este un pic mai… specială. Asta deoarece toate imaginile încărcate din CSS ce nu au un path absolut (adică url(../images/bg.jpg)) s-ar putea să nu mai meargă sau să fie în conflict. În cazul tău nu e cazul, dar e o treabă de ținut minte.


Referitor la problema ta: chiar nu cred că vei avea o îmbunătățire vizibilă dacă reduci de la șase la două requesturi. Sigur, e posibil să câștigi câteva ms, dar dacă este un timp mare de încărcare este posibil să ai probleme în altă parte.

Am scapat de requesturi:

echo "<style>\n";
$cssFiles = array(
	WWW_ROOT.'css'.DS.'bootstrap-3.2.0.min.css',
	WWW_ROOT.'css'.DS.'font-awesome.min.css',
	WWW_ROOT.'css'.DS.'style.css'
);
foreach ($cssFiles as $cssFile) if (file_exists($cssFile)) echo file_get_contents($cssFile)."\n";
echo "</style>\n";

Acum sunt doar 2 requesturi: unul catre pagina in sine si al doilea catre fontawesome.woff (care vad ca e cacheuit foarte bine de browser).
Am redus de la 700ms la undeva pe la 150-200 ms (variaza, cateodata ajunge si la 300ms) si vad ca se simte in navigare.
Merge foarte bine, raman cu metoda asta. Mersi baieti :slight_smile:

cred ca-i cea mai oribila solutie care am vazut-o vreodata.

1 Like

poti da mai multe detalii despre regula asta?

De ce crezi ca-i oribila ?
Prefer sa pastrez resursele in fisiere separate ca sa fie usor sa fac update la librarii si alte chestii.
Vad ca nu ingreuneaza phpul considerabil asa ca e foarte ok.

la fiecare request citesti fisierele. la 3 fisiere nu se vede. dar daca folosesti solutia asta la ceva mai complex o sa se miste greu.
2 scuipi continutul in output. nu-i ok.

eu faceam ceva asemanator acum multi ani. bagam toate css-urle de care aveam nevoie intr-un array. cand aveam nevoie sa le afisez citeam dimensiunile si data cand au fost fisierele modificate ultima data si facem un string din valorile astea doua. iesea ceva de genu -…
faceam un md5 pe stringul rezultat si-l verificam daca exista asa ceva in cache. daca exista il serveam direct, daca nu il generam pe loc

Chestia cu 200 e variabila. Aleg 200k pentru ca mi se pare ok sa incarc de fiecare data 200k(la comprimare gz ajung mai putin) daca scap de un request. Altfel ( daca e mai mare) sa faca acel request , pentru ca doar odata se va face req total.min rest se va lua doar head.

Daca vb de siteuri mobil, ar trebui sa scazi acel prag de 200k

requestul ala o sa se faca o singura data. prima data cand utilizatorul acceseaza site-ul. mie mi se pare mai ok sa faci un request o singura data la prima vizita decat sa incarci de fiecare data niste kb in plus.

1 Like

Eu JS-urile le incarc numai atunci cand nevoie de fiecare, cu RequireJS. La fel fac si cu script-urile scrise de mine, toate sunt module AMD, pe care le incarc cu Require.

In felul asta, pe langa ca le incarc numai on-demand, incarcarea unui script intr-un anume loc in DOM nu opreste randarea paginii in punctul ala pana se incarca JS-ul (asa cum se intampla daca incarci cu <script src=), pentru ca se incarca asincron, ca request paralel.

2 Likes

E bun on demandul, dar ce faci cu vreo 10 fisiere mici pe care mereu vrei sa le incarci? Nu e mai bine se la incarci deodata?

Pai in proiectul asta stiu ca nu mai am nevoie de alte fisiere.
Pluginurile jquery de care am nevoie le includ manual inline in scripts.js.
Oricum merg asa pana in productie, vad cum se descurca in productie, testez cum se descurca in mod normal cu cele 6 requesturi, si apoi iau o decizie definitiva.

E bun on demandul, dar ce faci cu vreo 10 fisiere mici pe care mereu vrei sa le incarci? Nu e mai bine se la incarci deodata?

No problem :slight_smile: (PS: numai mie mi se pare mult prea vesel smilie-ul asta default? :smiley: - ioi, ce privire de criminal in serie are ăstalalt)

RequireJS has an optimization tool that does the following

Combines related scripts together into build layers and minifies them via UglifyJS (the default) or Closure Compiler (an option when using Java).Optimizes CSS by inlining CSS files referenced by @import and removing comments.

The optimizer is part of the r.js adapter for Node and Rhino, and it is designed to be run as part of a build or packaging step after you are done with development and are ready to deploy the code for your users.

Ce spui este corect in ceea ce priveste requestul, ca e doar unul( in rest face req HEAD. Doar ca in anumite situatii face sens. 30-40kb in broadband nu e asa mult.

Pentru mobile scazi. Intr-unul din articole Paul irish spune

On mobile, an external stylesheet loaded in the head can easily add 1 to 2 seconds of additional latency to render time. Even an empty external stylesheet will add 500ms of render latency on 3G in the best case

Tot in acest articol, mai da si o alta solutie (pe care nu am testat-o) Google Workspace Updates: New community features for Google Chat and an update on Currents

Si google face css inline, si asta big time

Corect, ajungi la prima solutie data de noi: combinarea jsurilor. In functie de ce sistem folosesti , folosesti toolul potrivit.

Btw, nu e ideal sa servesti resurse statice direct cu PHP. Mai bine lasi NGiNX (sau Apache) sa faca treaba asta, sau un CDN.

Si in loc sa concatenezi fisierele alea de fiecare data, poti face asta 1 singura data cu un build script cand continutul lor se schimba.

2 Likes