Ottimizziamo i nostri fogli con css compressor


11 febbraio 2011 14 Commenti css, php

Nel precendete articolo abbiamo parlato di 10 tip e tricks sui css, cioè di trucchi e particolari tecniche per rendere più veloce il nostro foglio di stile.

Oggi voglio parlarvi di una tecnica abbastanza particolare, capace di aumentare la velocità dei vostri browsers nella lettura dei fogli di stile: css compression.

Questa tecnica abbastanza semplice da attuare consiste nel velocizzare il caricamento del foglio di stile attraverso php.

Questo è il codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>
html, body {
margin: 0px auto;
padding: 0px;
text-align: center;
}
/* e così via dicendo tutto il codice css */

Come avte visto è molto semplice da usare, e per includerla nella nostra pagina html non ci vuole niente:

1
<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

Ma quali sono i risvolti positivi di questa tecnica?

Velocizziamo il nostro browser che carica la pagina e il foglio di stile. Attraverso questa tecnica

eliminiamo le parti superflue del codice che appesantiscono la pagina durante il caricamento.

E’ un’impostazione lato server quindi compatibile su tutti i browser;

Servizi online per la compressione dei css senza php

Css Clean

Css Drive

Questo metodo renderà i nostri progetti più veloci del 20/40 % in più. Non trovate il tutto fantastico?

Se vi è piaciuto l’articolo commentate o condividete l’articolo ;)



Potresti trovare interessante anche

10 tip e tricks su css php_aggiornare
Pubblicato in css, php |


Iscriviti alla newsletter

Vuoi ricevere ogni articolo che pubblico direttamente sulla tua mail ? Vuoi evitare di perdere qualsiasi articolo pubblico ? Registrati alla mia newsletter in un click.

Inserisci il tuo indirizzo mail:

14 commenti per Ottimizziamo i nostri fogli con css compressor


Roberta

11 febbraio 2011 alle 09:26

Ottimo articolo :D

@Roberta Grazie ;)


Dez

11 febbraio 2011 alle 09:48

Mi fa piacere averti ispirato per un nuovo articolo :)
Solo una domanda..il codice php che hai postato crea praticamente dei file compressi in GZip? Perdona l’ignoranza ma sono solito programmare in ambiente Microsoft e PHP non lo conosco.
Volevo inoltre segnalare ai tuoi lettori (e a te se non la conosci) questa raccolta di articoli di Google denominata Let’s make the web faster

Ciao ;)

@Dez Si cmq la compressione avviene per GZIP , e funziona solo su ambienti php con il supporto base delle funzioni ( immagine che pure altervista e netsons che sn gratuti c’è l’hanno ).

Grazie mille per la segnalazione ;) ottima per i miei utenti :D


Giacomo Colddesign

11 febbraio 2011 alle 10:01

Ottimo articolo!!!!

Grazie @Giacomo Colddesign


Dez

11 febbraio 2011 alle 10:22

Capito! :) Nell’azienda in cui lavoro, invece, attiviamo direttamente la compressione GZip da webserver. Essendo interamente nostro il server, lo possiamo fare :)

@Dez quando si ha la disponibilità di un server tutto vostro sicuramente tutto cambia :)


Andrea Leti

11 febbraio 2011 alle 10:41

Attenzione Rocco non è tutto oro ciò che luccica.
Se hai un foglio di style lungo non è una buona scelta. O peggio ancora più fogli di style.
Si aumenta (secondo me inutilemente visto che non è chacheable) il carico di lavoro del processore. Il processo parte ad ogni refresh e credo che non sia un bene.
Per i siti classici da 5 pagine che non richiedono eleborazioni di query latoserver va benissimo.
Grazie al Webmastertool di google mi sono accorto quando utilizzavo lo script che la velocità del blog proprio in quei 30 giorni diminuì anzichè aumentare. Paradossalmente è meglio usare il foglio di stile normale.
 

@Andrea Leti ovviamente è da considera il tutto con l’evolversi del progetto. Come dici tu è utile questa tecnica se parliamo di piccoli progetti online ( 1000 – 1500 righe di css ) ma ovviamente se parliamo di progetti che superano i 2000 e passa è utile lasciare il modo come è.

Grazie per la condivisione ;)


Cifra WM

11 febbraio 2011 alle 11:34

Ottimo articolo che segue a ruota (casualmente?) i commenti di ieri… Solo una domanda: cosa significa AVVELOCIZZARE? :D

@Cifra WM terribile scusa l’errore , ogni tanto quello grammaticale può capitare :)


Gabriele Malaspina

11 febbraio 2011 alle 13:27

Io conoscevo Minify che comprime css e javascript multipli e elimina spazi e commenti e altro.

http://code.google.com/p/minify/

C’è anche un plugin per wordpress, molto facile e intuitivo da usare:

http://wordpress.org/extend/plugins/wp-minify/

@Gabriele Malaspina ottimi servizi tutti e due quelli che hai postato, ottimo :D

Lascia un Commento