trucos para agilizar la carga de tu web (parte 4)
Reduciendo código de la hoja de estilos CSS
Muchas de las propiedades de los estilos CSS las podemos agrupar en una sola linea, para reducir el código y aligerar la carga de la web
En el siguiente ejemplo agruparemos varias propiedades de background
Sin agrupar:
-
background-image: url('../img/imagen.gif');
-
background-position: 10px 10px;
-
background-repeat: no-repeat;
Agrupado:
-
background: 10px 10px url('../img/imagen.gif') no-repeat;
Anteriormente había publicado varios artículos sobre el tema:
trucos para agilizar la carga de tu web (parte 3)
Reducir código de la plantilla CSS
En la web de aNieto2k encontrareis un articulo muy interesante
Hay otras maneras de reducir código automáticamente utilizando herramientas on-line, eso si, no esperes a que te corrijan los errores de validación
Antes de continuar, comprueba tu CSS
Una vez este libre de errores y advertencias, puedes utilizar una de las siguiente herramientas:
- Clean CSS - Reduce el código y además muestra los cambios realizados
- CSS Tweak - El que mejor comprime
Si es que decides comprimir el css al máximo y dejarlo en una sola linea, antes de subir el fichero al ftp, haz una copia del css original no hagas como yo jeje
trucos para agilizar la carga de tu web (parte 2)
separar CSS del codigo HTML
usar menos las etiquetas <style>, si pones los estilos en un fichero .css, el navegador los podra guardar en la cache y te permitira cargar mas rapidamente cada una de las paginas.
por lo contrario, si tienes en cada pagina una etiqueta <style> con los estilos obligaras al usuario a cargar una y otra vez los estilos
caso practico:
si utilizas plugins para wordpress, podras ver que algunos de estos te añaden una etiqueta <style> con los estilos necesarios para el funcionamiento del plugin
solucion:
- mira el codigo fuente de tu pagina principal
- busca alguna si hay alguna etiqueta <style>
- normalmente se muestra el nombre del plugin, apunta el nombre
- copia los estilos que hay dentro de <style> y los pegas en tu plantilla css principal
- ahora dirigete a la carpeta:
/wp-content/plugins - busca el fichero correspondiente al plugin, normalmente el nombre del fichero es el mismo que el del plugin
- abre el fichero y busca la etiqueta <style>, encontraras algo parecido a esto:
PHP:
-
function wpv_actualizacion_css()
-
{
-
//estilo para el plugin
-
echo ' <style type="text/css" media="screen"> /* estilo plugin ultima modificacion */ .lbl_actualizacion {font-weight:bold;color:green;} </style>';}
-
- seguramente estara dentro de una funcion, copia el nombre de la funcion en el ejemplo de arriba wpv_actualizacion_css y buscas el nombre en el mismo fichero, seguramente te saldra algo asi:
PHP:
-
add_filter('wp_head', 'wpv_actualizacion_css');
-
- para desactivarlo solo tienes que poner dos barras // que en PHP significa que es un comentario, quedando asi:
PHP:
-
//add_filter('wp_head', 'wpv_actualizacion_css');
-
trucos para agilizar la carga de tu web (parte 1)
sé que de momento viciao2k3 tarda bastante en cargar, pero eso se puede mejorar y segun vaya optimizando el sitio voy a publicar una serie de consejos para que tu sitio se cargue fluidamente
¿porque es importante?
ahora mas a menos casi todo el mundo tiene ADSL, pero eso no significa que todos esten preparados
si tu web tarda mucho en cargar, el usuario impaciente puede cerrar la pagina y seguramente no volvera
agilizar carga de javascripts
normalmente en las paginas web, todo el javascript se pone en la cabecera, exactamente entre las etiquetas <HEAD> y </HEAD>
pienso que esta mal, ya que obligas al usuario a cargar funciones que posiblemente luego no se utilicen.
si tienes muchos javascripts en un fichero, deberías dividir las funciones en 2 grupos:
- primarias: funciones que se ejecutan en el evento onload
- secundarias: las que no necesitan cargarse al principio.
Por ejemplo, una funcion que muestra un mensaje al hacer clic a un boton
las funciones primarias puedes hacer que se carguen en la cabecera de la pagina y las secundarias antes de la etiqueta </body>
caso practico:
el codigo javascript de Google Analytics, yo recomiendo ponerlo antes de cerrar la etiqueta </body>, ya que si lo pones despues de <body>, estas obligando al usuario a esperar a que se carguen 6,09 KB (6.232 bytes) para luego cargar con el resto del documento
y 
Yo también recomiendo la serie sin lugar a dudas!
Realmente genial!