Tutorial: Comprimir style.css con PHP

deluxxin · 8 Jun 2012

Bueno checando que mi sitio estaba un poco lento me puse a checarlo y a modificarlo ya que https://developers.google.com/speed/pagespeed/insights me mostraba que tenia que comprimir los archivos css ya que hacian que se tardara el sitio considerablemente y entre mis text me puse a buscar y aplicarlo vamos al grano.

En el archivo HEADER de nuestra plantilla nos encontramos con esto.

Insertar CODE, HTML o PHP:

<link rel="stylesheet" type="text/css" href="http://www.blog/wp-content/themes/plantilla/style.css"   />

Luego lo que aremos es hacer una copia del archivo style.css pero lo llamaremos style.css.php después le modificaran al código anterior algunas lineas para que quede de esta forma.

Insertar CODE, HTML o PHP:

<link rel="stylesheet" type="text/css" href="http://www.blog/wp-content/themes/plantilla/style.css.php"   />

Luego editamos el archivo style.css.php, agregando la siguiente línea al inicio del archivo:

Insertar CODE, HTML o PHP:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Y esta línea al final:

Insertar CODE, HTML o PHP:

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Guardamos el archivo y listo. Al recargar la página el contenido del archivo style.css.php ahora se envía de forma comprimida, por lo que carga más rápido.

Ahora chequen de nuevo en la web https://developers.google.com/speed/pagespeed/insights y verán que les aparecerá comprimido

y pues es todo espero que les sirva un saludo nenes.

Fuente:Enlace eliminado

Carlos Arreola · 9 Jun 2012

Tema aprobado y agregado al listado de tutoriales.

deluxxin · 9 Jun 2012

solo para resumir los que tengan varios ccs pueden aplicar lo mismo no nada mas en el style.css salu2

Usuario eliminado 24959 · 25 Jun 2012

¿Como hago la copia del archivo style.css?

ACTUALIZADO:

Yo en lugar de encontrar el

Insertar CODE, HTML o PHP:

<link rel="stylesheet" type="text/css" href="http://www.blog/wp-content/themes/plantilla/style.css"   />

Encontre este, no sé si será lo mismo o casi lo mismo. (Uso la plantilla News Leak).

Insertar CODE, HTML o PHP:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Probé en un blog de prueba que tengo y modifiqué el código anterior, poniéndole un .php al final, quedándo así:

Insertar CODE, HTML o PHP:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>.php" />

Luego puse los códigos que dices antes y después del código. Luego probé en https://developers.google.com/speed/pagespeed/insights porque en dicho blog me daba un puntaje de 41 y al hacer lo anterior me tiró un puntaje de 65. Como digo es un blog que prueba que solo tiene como 4 entradas, pero fue un gran cambio.

Pero aún me queda la duda si lo hice bien y si no deje mal el código?

Science · 25 Jun 2012

No conocía este sistema. ¿Qué es lo que hace que se comprima por estar en un fichero php? Voy a considerar implementarlo en mis themes, pero desearía tener más información al respecto.

[MENTION=24959]Mustang007[/MENTION], te recomiendo visualizar el código de tu página, abrir el fichero styles.css con el navegador y guardarlo en tu ordenador. Entonces le cambias el nombre y subes el nuevo a través de un cliente de FTP, como puede ser FileZilla que es gratuito. Para acceder, te pedirá los datos de acceso a tu espacio de almacenamiento web; si no los tienes puedes crear una cuenta de FTP desde el panel de administración de tu alojamiento web.

Usuario eliminado 24959 · 25 Jun 2012

Science dijo:
No conocía este sistema. ¿Qué es lo que hace que se comprima por estar en un fichero php? Voy a considerar implementarlo en mis themes, pero desearía tener más información al respecto.

[MENTION=24959]Mustang007[/MENTION], te recomiendo visualizar el código de tu página, abrir el fichero styles.css con el navegador y guardarlo en tu ordenador. Entonces le cambias el nombre y subes el nuevo a través de un cliente de FTP, como puede ser FileZilla que es gratuito. Para acceder, te pedirá los datos de acceso a tu espacio de almacenamiento web; si no los tienes puedes crear una cuenta de FTP desde el panel de administración de tu alojamiento web.

Pero estará mal la forma en como lo hice? :s (como explico en el mensaje anterior). Porque como les comento, a la hora de probar en https://developers.google.com/speed/pagespeed/insights me dió una gran mejoría.

Lo habré echo de una forma muy sencilla pero correcta? o lo habré hecho de una forma muy sencilla pero totalmente incorrecta?

ACTUALIZADO:

He refrescado el blog y se nota que lo hice mal :grumpy:

Science · 25 Jun 2012

Mustang007 dijo:
Pero estará mal la forma en como lo hice? :s (como explico en el mensaje anterior). Porque como les comento, a la hora de probar en https://developers.google.com/speed/pagespeed/insights me dió una gran mejoría.

Lo habré echo de una forma muy sencilla pero correcta? o lo habré hecho de una forma muy sencilla pero totalmente incorrecta?

ACTUALIZADO:

He refrescado el blog y se nota que lo hice mal :grumpy:

Todo tiene formas más sencillas de hacerlo. Yo suelo usar la que te conté por costumbre, pero también puedes entrar al gestor predeterminado de tu alojamiento web y cambiarlo desde allí, pero no sé como será porque cada alojamiento web es un mundo. Por ejemplo hostgator usa cpanel, ipage usa uno propio, godaddy otro propio totalmente diferente... Aunque el concepto es el mismo: entrar en el espacio de almacenamiento y hacer los cambios que indicaron arriba. Si lo hiciste y no funciona, mira que no sea un fallo de algún plugin de caché, como el W3 Total Caché, y dale a limpiar caché

renzo valenzuela · 17 Jul 2012

gracias por compartir la informacion! espero me sea de utilidad. saludos..

Joel Llerena · 2012-08-22T10:00:33-0500

Andaba buscando este tutorial, ya que mi blog anda un poco lento.

ciberutilidades · 8 Nov 2013

Esto ya no funciona? Porque lo intente en mi web de banahosting y no funciono :ambivalence:

Ze0 · 8 Nov 2013

Pero vamos a ver... esto en mi opinon es un poco... matar moscas a cañonazos. Si tenemos el mod_defalte de apache, pues con un .htaccess ya comprimimos todo lo que necesitemos, no sólo el css.

Si no tenemos el mod_deflate (cosa muy muy muy rara) aun nos quedan las opciones avanzadas de wordpress y activar la compresión.

El método que plantea deluxxin puede estar bien para un diseño que no es WordPress y en un servidor que no hay mod_deflate, sino yo creo que tenemos alternativas mucho mejores para comprimir los contenidos.

Lean aqui: Compresión Gzip sin plugins en WordPress - Vozidea.com

:encouragement:

Ahhh y se me olvidaba, aquellos que tengan muchas visitas, habilitando la compresión se disminuye el uso de ancho de banda, pero comprimir las cosas no es gratis, requiere el uso de CPU... asique no se extrañen si al activar la compresión GZIP aumenta el uso de CPU.

EdgarC · 8 Nov 2013

Buen tutorial seguro lo utilizare en algun momento

8:

Cicklow · 8 Nov 2013

Es mas facil usar: CSS Compressor, Free CSS Compressor and CSS Compression Tool
y listo, suben el nuevo CSS comprimido...

Angel Sanche · 11 Mar 2014

cicklow dijo:
Es mas facil usar: CSS Compressor, Free CSS Compressor and CSS Compression Tool
y listo, suben el nuevo CSS comprimido...

Esto puede ser utilizado para JavaScript, CSS y HTML? A mi me marca que si comparto estos tres puedo mejorar la carga de la web.

Cicklow · 11 Mar 2014

Angel Sanche dijo:
Esto puede ser utilizado para JavaScript, CSS y HTML? A mi me marca que si comparto estos tres puedo mejorar la carga de la web.

para js: Minify Javascript Online / Online JavaScript Packer
html: HTML Compressor - Speed up your web pages.

lo mejor es usar algun plugin que lo haga... ya que sino tenes que hacerlo a mano y en WP el html no podras a mano!

eddihondo · 30 Mar 2014

Ze0 dijo:
Pero vamos a ver... esto en mi opinon es un poco... matar moscas a cañonazos. Si tenemos el mod_defalte de apache, pues con un .htaccess ya comprimimos todo lo que necesitemos, no sólo el css.

Si no tenemos el mod_deflate (cosa muy muy muy rara) aun nos quedan las opciones avanzadas de wordpress y activar la compresión.

El método que plantea deluxxin puede estar bien para un diseño que no es WordPress y en un servidor que no hay mod_deflate, sino yo creo que tenemos alternativas mucho mejores para comprimir los contenidos.

Lean aqui: Compresión Gzip sin plugins en WordPress - Vozidea.com

:encouragement:

Ahhh y se me olvidaba, aquellos que tengan muchas visitas, habilitando la compresión se disminuye el uso de ancho de banda, pero comprimir las cosas no es gratis, requiere el uso de CPU... asique no se extrañen si al activar la compresión GZIP aumenta el uso de CPU.

Hoy estuve viendo el cpanel y vi la opción de optimización y justamente hace lo que explicas! Saludos

Enviado desde mi Nexus 7 mediante Tapatalk

anferro · 30 Mar 2014

muy buen tuto

Beck · 30 Mar 2014

Viendo esto se me acaba de ocurrir algo y funciono xD

Mini guia para comprimir con javascript mediante la consola del navegador

1) abren el css en el navegador por ejemplo este : http://forobeta.com/mobiquo/smartbanner/appbanner.css
2) abren la consola del navegador y escriben lo siguiente:

Insertar CODE, HTML o PHP:

var resultado = document.getElementsByTagName('PRE')[0].firstChild.data.replace(/(\r\n|\n|\r|\s+)/gm, '')
resultado;

y listo, css comprimido jajaja cada dia me divierto mas con este lenguaje carajo.

8:

Tutorial: Comprimir style.css con PHP

Usuario eliminado 24959

Usuario eliminado 24959