02Ago 2010 3 Comments */?>

Como mejorar la velocidad de carga de tu página web

Categorías: Recursos, Tutoriales - Tags:

Hoy en día los buscadores están empezando a puntuar la velocidad de carga de las páginas webs para mostrar los diferentes resultados ( engrosando así sus algoritmos para mejorar la experiencia de los usuarios). Hay diversidad de formas de acelerar la carga de una página web pero podemos resumirlas en unas cuantas.

1. Buen diseño de código.

2. Buen diseño de base de datos.

En estos dos primeros puntos no les puedo ayudar más que ofreciendo tutoriales y recursos en mi blog.

Pero además de esto existen varios factores importantes que podemos mejorar. Una de las herramientas que más me gusta es YSlow, un complemento de Yahoo para el archiconocido addon de Firefox llamada Firebug.

Esta herramienta nos va a mostrar los “puntos flacos” que tiene nuestra web y la forma de mejorarlos.

El más importante en mi punto de vista es la compresión de todos los archivos. Con esto podemos reducir el tamaño de la web ( archivos php, css, js, etc) en un 75%-90% reduciendo la velocidad de descarga de la misma en el mismo porcentaje.

3.El método más comúnmente usado y eficaz es Gzip.

A continuación les voy a explicar como habilitarlo para php aunque también se puede habilitar desde apache si tienen privilegios.

Existen 3 métodos para habilitar zlib :

  1. Añadir en el .htaccess :
    php_flag zlib.output_compression On
  2. Añadir en php.ini:
    zlib.output_compression = On
  3. Añadir en cada script PHP antes de cualquier ouput:
    ini_set(‘zlib_output_compression’,’On’);

Una vez realizado cualquier de estos métodos todo archivo PHP pasara comprimido o Gzipped al usuario.

Que pasa si queremos comprimir otros archivos como javascript o css con Gzip?

Para ellos tenemos que cambiar la extensión de los archivos por php. Por ejemplo a script.js lo llamaríamos script.js.php y al principio del archivo añadiríamos la siguiente cabezera:

<php header("Content-type: text/js"); ?>

Luego lo incluiríamos en nuestros script de forma habitual:

1
<script language="javascript" src="script.js.php" type="text/javascript"></script>

Lo mismo sería para archivos CSS.

Ahora bien hay hosting que no soportan este método. Por ejemplo en mi hosting compartido de HostGator no puedo utilizar ninguna de estas opciones sin embargo desde el Cpanel del mismo existe una opción que se llama Optimize Web que se encuentra en la parte de servicios. Al habilitar dicha opción todos los archivos serán comprimidos antes de su descarga mejorando así la experiencia del usuario.

4.Añadir expires headers / cabezeras que expiren

Nuestros navegadores guardan en cache absolutamente todos(imágenes, archivos css, js, etc). Por lo que si no ponemos una fecha de caducidad en las cabezeras cada vez que el usuario descargue nuestra web estará descargando todo una y otra vez.

Podemos hacerlo de forma sencilla modificando el .htaccess para que añada un expire header a los archivos solicitados:

1
2
3
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"><br />
Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"<br />
</FilesMatch>

5.Cantidad de requests HTTP

Cada archivo, cada imagen que se carga es una descarga paralela o request http que hacemos al servidor. Por eso es conveniente juntar por ejemplo todos nuestros scripts js en un solo archivo y comprimirlos con minified, o juntar cada imagen y utilizar CSS Sprites que aunque el tamaño de la imagen resultante puede ser igual , la cantidad de requests al servidor se verá reducida.

6.Colocar las hojas de estilo al principio y los scripts de javascript al final.

Esta comprobado que al colocar las hojas de estilo al principio de la página entre las estiquetas hace que las páginas carguen más progresivamente dando una sensación de velocidad.

Igualmente cargas los archivos javascript al final de la página (siempre que sea posible) facilita que se descargue primero la parte visual de la web.

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus