Tutorial: Optimizar carga CSS con PHP

  • Autor Autor deluxxin
  • Fecha de inicio Fecha de inicio
D

deluxxin

Zeta
Diseñador
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
 
Tema aprobado y agregado al listado de tutoriales.
 
solo para resumir los que tengan varios ccs pueden aplicar lo mismo no nada mas en el style.css salu2
 
¿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?
 
Última edición por un moderador:
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:
 
Última edición por un moderador:

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é 🙂
 
gracias por compartir la informacion! espero me sea de utilidad. saludos..
 
Andaba buscando este tutorial, ya que mi blog anda un poco lento.
 
Esto ya no funciona? Porque lo intente en mi web de banahosting y no funciono :ambivalence:
 
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.
 
Última edición:
Buen tutorial seguro lo utilizare en algun momento 😛8:
 

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
 
muy buen tuto
 
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:
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Tutorial: Tutorial básico para crear una página web utilizando HTML, CSS y JavaScript
Respuestas
2
Visitas
276
alfredodibalota
W
Optimizar carga web puede aportar al clima
Respuestas
0
Visitas
151
WilyV
W
J
Cómo optimizar carga de reproductores en mi página de películas
Respuestas
2
Visitas
475
jorelpoder
J
Cómo optimizar la carga de CSS en plantillas de Blogger mediante alojamiento en terceros
Respuestas
2
Visitas
489
CANIBAL
R
Optimización Carga CSS en WordPress - Plugin Velocidad
Respuestas
4
Visitas
278
ramonjosegn
R
Menú
Acceder
Registro