Per un pugno di byte (in meno)
Martedì 26 Gennaio 2010 - 08:24
di Cesare Lamanna
Che Google stia spingendo sul tema dell’ottimizzazione e della velocità di caricamento delle pagine, lo dimostra da ultimo anche un esperimento come YouTube Feather, con l’idea della piuma leggera leggera che fa capolino pure nel nome.
Tra le best practices suggerite in quel di Mountain View per rendere pure i nostri siti leggeri come piume c’è pure la minificazione dei CSS:
Compattare il codice CSS può far risparmiare molti byte di data e velocizzare i tempi di download, parsing ed esecuzione. La minificazione dei CSS apporta gli stessi vantaggi di quella usata per Javascript.
Proprio prendendo spunto dalle indicazioni di Big G., Nicolas Crovatti ha creato uno script PHP che consente di eseguire la minificazione del foglio di stile on the fly, il tutto completo di un meccanismo per il caching e appoggiandosi, oltre che a PHP, al modulo mod_rewrite di Apache.
Lascio a chi è esperto il compito di valutare la bontà dello script. Quello che mi viene da chiedermi è: ne vale la pena?
Categoria: CSS, PHP e Open Source | Permalink
Commenti
1
Mah, probabilmente per Google che serve quantità enormi di dati ogni giorno un risparmio anche contenuto può fare la differenza!
2
Io lavoro con il CMS Joomla e molte volte capita di avere più di un foglio di stile e più di un file Javascript.
Avere un plugin (o script) che minimizzi e accorpi il tutto in un unico file accessibile in cache e veramente importante.La differenza si vede.
# - postato da Fabbrica Binaria - 26 Gennaio 2010 - 09:32
3
Mi domando quanto vantaggio la minimizzazione del css possa portare quando si offre il css gzippato ai browser che accettano la compressione.
# - postato da Michele - 26 Gennaio 2010 - 09:33
4
Sembra più un esperimento in PHP che una vera e propria scoperta.
In questi esempio si risparmia banda in uscita, ma si richiedere lavoro aggiuntivo per la CPU/PHP.
Molti server web sono ottimizzati per il throughput, ma molto più lenti nella comunicazione script (CGI o SAPI).
Poi c’è da tenere conto che normalmente gli utenti hanno la cache attiva e dopo la prima visita non scaricherebbero più i CSS.
Però l’idea di “minificare” anche il CSS è buona.
Piuttosto si potrebbe fare come per i JS, caricare sui server codice CSS minificato in modo da risparmiare banda.
5
Minificazione dei CSS, raggruppamento e semplificazione dei javascript, alleggerimento delle immagini, compattazione del codice HTML, compressione gzip ecc. ecc.
E’ la somma di queste metodologie (per il tramite di script, add-on, moduli ecc.) che potrebbe diventare difficile da gestire.# - postato da Sergio Gandrus - 26 Gennaio 2010 - 09:37
6
Ma se a volte si vedono immagini presentate a 50×50 pixel di dimensione 3Mb! Forse sarebbe meglio cominciare da lì!
7
La minificazione del codice porta indubbiamente a vantaggi in termini di performance, ma in genere ad evidente discapito di leggibilità e manutenibilità. La soluzione tecnicamente evita questo problema (essendo dinamica).
Qui però sarebbe necessario fare un test sull’overhead introdotto da php e vedere se i tempi restano inferiori (in prime cache, visto che poi subentra l’expire) a quelli che si avrebbero caricando normalmente i css (non minified).
# - postato da Fabrizio Calderan - 26 Gennaio 2010 - 09:47
8
bah… non sono troppo convinto della effettiva utilità della cosa
9
Ho dato un’occhiata a quel Feather, ma ho capito bene o per velocizzare i video riducono l’HTML?
Se si, ma che rendano piuttosto disponibili pure delle versioni più leggere dei video, io pure a 320p faccio fatica a vederli, altroché 100K di HTML in meno, sono i video che pesano!
# - postato da Mik - 26 Gennaio 2010 - 10:56
10
Ma non è molto più semplice minificare i CSS una volta per tutte ogni volta che si modificano e poi servire una versione statica E minificata? Io ad esempio faccio così.
# - postato da Andrea - 26 Gennaio 2010 - 11:35
11
Partiamo “sempre”, quando possibile, dal presupposto che un server, o una piattaforma, ottimizzata e’ sempre meglio di una come tante ossia “normale”. In tempo di crisi, ma anche no, e’ una via sicura ed assodata di incremento dei guadagni e riduzione dei costi. Se poi si pensa che ormai una VPS e’ la condizione minima per entrare nel mondo web in modo serio, mi pare che gia’ tutto si spieghi da solo… Sono perfettamente daccorso con queste tecniche, anzi, bisognerebbe imparare a scrivere il codice gia’ tenendone conto… IMHO se da un lato e’ vero che servendo CSS, JS, IMG, gzippate o deflate si e’, o si potrebbe gia’ essere a buon punto, dal un’altro lato bisogna tener conto che non basta, o che non tutti i sistemi di navigazione internet utilizzati dai possibili utenti postrebbero avvantaggiarsene, spece nel “mobile world”. Quindi lo spreco e’ sempre alle porte. E’ altresi’ vero che queste tecniche debbano essere utilizzate offline in modo da non ottenere l’effetto contrario a seguito di un’alto utilizzo della cpu o della memoria, che porterebbe effetti peggiori dei benefici. Credo quindi che i CSS come i JS e le immagini vadano ottimizzati in locale, e poi caricati sul server senza usare sistemi di minificazione o compressione degli stessi in tempo reale. Se usate un CMS e non siete dei perfetti imbecilli lo potete fare ugualmente: in fondo non e’ quel gran lavoro in piu’, pigrizia congenita a parte … Il fatto poi che un CSS o un JS compresso e/o ottimizzato sia difficile da modificare, a mio avviso e’ una gran cazzata: modifico in locale il file scritto in maniera tradizionale e prima di caricarlo lo ottimizzo. IMHO e’ piu’ intelligente, anche perche’ non si rischia di trovarsi qualcosa che all’impprovviso non funziona piu’ per un banalissimo spazio o un punto e virgola omesso. Poi gzip e deflate faranno il resto. Con queste premesse, ad esempio, in PHP WP-SUPER-CACHE si farebbe delle gran pippe, essendo praticamente inutile. Ma non solo: anche gli headers vanno otimizzati. Inoltre esistono anche le CDN e la cigliegina sulla torta praticamente sarebbe “cotta e mangiata”. Quindi sempre IMHO i passi sono semplici:
1 - Scrivere codice tenendo gia’ conto dell’ottimizzazione (spazi, punti e virgole, eccetera)
2 - Minificare/Ottimizzare offline e caricare sul server
3 - Usare le CDN
4 - Bannare tutto lo scrap e lo spam che degrada i nostri host facendo lunghe sedute notturne analizzando i log giornalieri …
# - postato da sLa - 26 Gennaio 2010 - 11:46
12
Da utente e non tecnico, mi associo in toto al commento di Senamion (commento 6) :)
# - postato da Cesare Lamanna - 26 Gennaio 2010 - 13:28
13
A volte basta seguire qualche pratica di base per vedere siti aprirsi nella metà del tempo. Forse è la volta buona che vedremo diminuire i js inutili e le immagini oversize.
# - postato da Tommaso Baldovino - 26 Gennaio 2010 - 15:24
14
certo che se chi usa joomla o wp con relativi plugin in head ha 5 o 6 css e un paio di occorrenze della stessa libreria js… puoi anche ottimizzare minificare, resta una gran ciofeca…
ad esempio è meglio una chiamata unica con un css più grande o tre chiamate distinte con tre css minificati?
bisogna fare le cose a modo…
15
Sempre meglio uno o piu’ CSS e JS minificati! :-)-
P.S. IMHO Personalmente ritengo che troppi plugin su WP o JO… qualcosa siano in primis sintomo di confusione mentale piuttosto che degradazioni delle performace … WP 2.9.1 ad esempio ha bisogno di ben pochissimo altro in piu’ ;-)-
P.P.S. Forse non parlo da utente finale, ma probabilmente chi ha mille plugin installati, sono quelle stesse persone le quali hanno la barra piena di icone dai mille software installati nell OS, o il browser che grida vendetta dai troppi addons!
# - postato da sLa - 26 Gennaio 2010 - 16:19
16
Sicuro che più CSS minificati siano meglio di uno solo non minificato? Ogni volta che il browser richiede una nuova risorsa fa una nuova richiesta di connessione HTTP, e per files di piccole dimensioni e connessioni decenti il tempo della creazione della connessione può essere superiore al tempo di download effettivo. Quindi la prima regola dovrebbe essere di diminuire il numero di files. Dopodiché è comunque bene ottimizzarli.
Ma come dicevo prima non c’è nessuna necessità di farlo dinamicamente, si può fare una volta per tutte quando si scrive il CSS, che poi verrà servito minificato e in maniera statica-
# - postato da Andrea - 26 Gennaio 2010 - 17:05
17
Certo che è inutile minificare quando ci sono decine di richieste al server, quando le immagini non sono ottimizzate, quando non si fa uso intensivo di sprite css o quando non si usa la compressione gzip … ma una volta fatte queste cose mi sembra bene continuare a sperimentare.
Per quanto riguarda lo script php, mi sembra inutile far lavorare il server per generare una versione minificata ogni volta che c’è una richiesta. Tanto il css non cambia, è statico, tanto vale salvarlo sul server direttamente minificato.
Questo script php potrebbe essere più comodo per minificare rapidamente il file originale prima dell’upload. Utile ogni volta che si devono fare piccole modifiche. Come jscompress.com per il javascript# - postato da scienzedellevanghe - 26 Gennaio 2010 - 17:32
18
@ Essezeta:
io e te siamo sempre sulla stessa frequenza d’onda…
:D
19
onorato…
;)alla prossima…
:p
20
Io l’ho fatto. Per me è stato più semplice perchè uso un CMS che rende disponibili un’estensione che se ne occupa automaticamente. Gli incrementi in termini di velocità sono stati notevoli. Per me conviene, soprattutto se si aggiunge anche un sistema di caching delle pagine ed altre attenzioni. Comunque segnalo che con Yslow di Yahoo e con PageSpeed di Google è possibile testare il proprio sito.