El cómo y el por qué acelerar una página web

De NachE
(Redirigido desde «Como acelerar página web»)
Saltar a: navegación, buscar

ARTÍCULO EN CONSTRUCCIÓN

La velocidad de una página web es un aspecto importante que cualquier desarrollador, webmaster o administrador web debería cuidar. Pero, ¿cuáles son los beneficios reales de estas prácticas?, veámoslo.

El por qué optimizar una página web

El usuario

Tan importante es el contenido como la velocidad de carga. Una página optimizada con cargas pequeñas proporcionará al usuario una experiencia agradable y ayudará, junto al contenido del sitio, que el usuario encuentre lo que busca y permanezca más tiempo explorando las diferentes páginas.

En caso contrario, una página lenta aumentará la frustración del usuario y probablemente se pierdan visitas. En páginas dedicadas a la venta online esto podría repercutir negativamente en el volumen de ventas.

El servidor

Uno de los puntos clave para la optimización de una página web pasa por la reducción de su tamaño en bites. Una página menos pesada permitirá más volumen de usuarios simultáneos. Recordemos que la capacidad de los servidores no es ni mucho menos ilimitada. Si un servidor nos permite X usuarios simultáneos por segundo cargando una página, nuestro objetivo pasa por reducir el tiempo de carga de cada usuario y así aumentar el número de usuarios por segundo.

Algunos hostings compartidos económicos sólo permiten unos 20 procesos simultáneos, por lo que si 20 usuarios cargan un archivo a la vez, el usuario número 21 obtendrá un bonito error 502. Todo esto sin tener en cuenta que cada página se compone de múltiples archivos. Explicado de otra forma, si nuestra página se compone de 20 archivos y tarda unos 10 segundos en cargar, únicamente dispondríamos de un usuario cada 10 segundos. En cambio si conseguimos reducir esa carga a 1 segundo, podríamos dar servicio a un usuario por segundo. Yo a esto lo llamo "pagar servidores caros vs hacer las cosas bien".

Otro punto clave para reducir el tiempo de carga es la programación optimizada en el lado del servidor (php, asp, python, perl, cgi, etc...). De nada nos sirve que nuestros archivos ocupen muy poco si la lógica tarda 10 segundos en generarlo.

El SEO

La velocidad de carga así como el tamaño de la página web es tenido muy en cuenta por los crawlers o arañas de rastreo de los diferentes motores de búsqueda a la hora de su posición en las -propiamente dicho- búsquedas. Los dos motivos principales se podrían clasificar en los siguientes:

A más rapidez, mejor servicio.

Los rastreadores al encontrar dos páginas que ofrecen el mismo contenido preferirán y posicionarán antes aquella que ofrezca dicho contenido de forma más rápida. Uno de los objetivos principales de estos motores de búsqueda es ofrecer un servicio de calidad por lo que ofrecer resultados lentos no encaja en esa filosofía. A día de hoy, los buscadores sólo utilizan la velocidad del servidor y el tamaño global de la página para determinar su rapidez. Esto es así porque aunque ya se está avanzando en este sentido, un rastreador difícilmente podrá determinar la rapidez con la que nuestro navegador renderiza el sitio. Una página puede ser perfectamente cargada en segundos, pero si toda la lógica (javascript, css, etc) es altamente compleja repercutirá negativamente en el usuario.

En este punto debemos tener cuidado en no caer en malas prácticas, nuestro objetivo es ofrecer un servicio de calidad, de nada nos sirve ser los primeros en las búsquedas si nuestro usuario se va por donde ha venido tras comprobar que ha de esperar demasiado para obtener lo que busca. Decir tiene también que algunos buscadores hacen seguimiento de los movimientos de los usuarios (discutible por otro lado). Esto significa que el buscador sabrá si presionamos el botón de retroceder del navegador.

A menos carga, más rastreo.

Los rastreadores no explorarán nuestro sitio de forma masiva, limitarán su intrusión teniendo en cuenta la cantidad de bites descargados y la cantidad de accesos a lo largo del día (entre otros muchos factores). Cuantos menos bites tenga que descargar en cada acceso, más accesos hará y más repercusión tendrá nuestro sitio en las búsquedas. Si tenemos un sitio excesivamente pesado corremos el riesgo de que el nuevo contenido publicado tarde dias, semanas o meses en aparecer en las búsquedas. Si queremos ser competitivos en SEO tendremos que preocuparnos por que el contenido del sitio aparezca antes en las búsquedas.

El cómo optimizar una página web

Una vez que hemos comprendido los motivos para optimizar una página web, llega el momento de ponernos manos a la obra. Existen varios puntos clave, algunos nos llevarán más tiempo que otros, así que paciencia y tesón.

La parte lógica o dinámica

La parte lógica puede encontrarse tanto en el lado del servidor como, más habitual últimamente, en el lado del navegador o cliente.

La parte lógica del lado del servidor

Antes de tocar el código del lado del servidor debemos tener en cuenta que si la página está basada en un CMS prefabricado posiblemente perdamos la posibilidad de actualización con el consecuente incremento de riesgos de seguridad. Un CMS avanzado nos brindará herramientas de optimización como cacheado, activación/desactivación de módulos, etc.

En caso de que el código interno de la página sea de nuestra propia fabricación y/o se nos permita su modificación (o te has aventurado a modificar el CMS), una de nuestras tareas será identificar qué partes son las que consumen más tiempo de CPU, o lo que es lo mismo, qué partes lógicas hacen que el archivo en cuestión tarde más de la cuenta en ser presentado al navegador. Para esta tarea suelo colocar diferentes print a lo largo del código indicando el tiempo y en qué parte del código se encuentra.

print ("<!-- inicio de la página -->");
[...]
Código de la página
[...]
print("<!-- Antes de funcion_cualquiera(), date() -->");
[...]
Más código
print("<!-- Después de funcion_cualquiera(), date() -->");
[...]
print("<!-- Fin de la página date() -->");

Esto nos permitirá, desde el navegador y viendo el código fuente, identificar qué partes son las que están relentizando la generación de la página.

Una vez identificado el problema, una solución podría pasar por utilizar un rudimentario caché donde, si el resultado no cambia con asiduidad, lo almacenamos en un archivo para posteriormente recuperarlo evitando así todo el cálculo.

Si esto no es posible, deberemos hacer uso de nuestras mejores prácticas de programador para conseguir reducir el uso de recursos y mostrar el mismo resultado.

En caso de utilizar PHP como lenguaje de programación, existen diferentes reglas a tener en cuenta:

  • Existen funciones que hacen lo mismo, unas más rápidas que otras. The PHP Benchmark
  • Evitar en la medida de lo posible los bucles.
  • Las consultas SQL son muy potentes, quizás con una sola consulta muy larga puedas prescindir de líneas y líneas de código PHP
  • Plantéate la posibilidad de utilizar memcache y/o smarty.
  • Explora el código, con menos puedes hacer lo mismo.

Aquí más sobre optimización de PHP

La parte lógica del lado del cliente

Con parte lógica en el lado del cliente o navegador, nos referimos a javascript, css y algunos aspectos de HTML. Todo relaccionado con el renderizado.

  • jQuery es una librería muy útil, no osbtante abusar de efectos con javascript puede hacer que la experiencia de usuario se vea mermada. Recordemos que no todos los navegadores son igual de rápidos y que no todas las máquinas cuentan con la misma potencia. Usar jQuery/javascript es una buena opción siempre que no repercuta negativamente en la experiencia de usuario.
  • CSS es una forma fantástica de dar estilo a un código html insulso, pero hay que tener cuidado con los :hover o los background-image ya que obligan al navegador a modificar el DOM relentizando así todo el conjunto. Una buena práctica además es utilizar estilos para objetos globales y no redeclarar sentencias.
div{padding: 0px;}
#caja1, #caja2, #caja3{position: absolute; width: 10px; height: 10px;}
#caja1{top: 10px;}
#caja2{top: 20px;}
#caja3{top: 30px;}
  • Las imágenes en una página son una buena herramienta. Es recomendable no usar imágenes excesivamente grandes (sobre todo en fondos). Además se recomienda declarar su tamaño en el código html permitiendo así al navegador reservar el espacio necesario mientras se dibuja la página.
<img src="img/archivo.jpg" alt="una imagen cualquiera" width="120px" height="140px" />

Reducir el tamaño de los archivos

El llamado minification en inglés, es el proceso por el cual se eliminan carácteres innecesarios del código.

Reducir el tamaño de HTML y CSS

Tanto en HTML como en CSS los saltos de línea como los espacios son innecesarios, se puede reducir considerablemente el tamaño de un HTML o un CSS eliminando estos carácteres. De este modo el siguiente código:

<html>
  <head>
     <title>Titulo de la web</title>
  <head>
<body>
  <div>
     <p>texto</p>
  </div>
</body>

es exáctamente el mismo código que este:

<html><head><title>Titulo de la web</title><head><body><div><p>texto</p></div></body>

Con la diferende de que hemos eliminado 18 espacios y 9 saltos de línea. Lo mismo ocurre con CSS, este código:

body
{
   font-size: 10px;
   font-family: verdana;
   margin: 0px;
   padding: 0px;
}

es exáctamente el mismo código que este:

body{font-size:10px;font-family:verdana;margin:0px;padding:0px;}

Estos scripts os ayudarán a eliminar carácteres innecesarios:

  • minify.sh <"archivo [archivo archivo *.extension ...]">
#!/bin/bash
for i in `ls $1`; do
e="${i}-orig"
  if [ -f $e ]
  then
    cat $e | sed s/'\t'/' '/g | sed s/'  '/' '/g | sed s/'^ '//g | sed -n -e '1x;1!H;${x;s-\n- -gp}' | sed s/'\r'//g | sed s/'\n'//g | sed s/'  '/' '/g | sed s/'   '/' '/g | sed s/'  '/' '/g  >$i
    echo -e "Optimizado\t:)\t$i"
  else
    cp $i $e
    echo "$i no optimizado, copiado a $i-orig. Ejecuta el script otra vez."
  fi
done


  • removeLR.py <archivo>
#!/usr/bin/env python
import os, sys
f = open(sys.argv[1], 'r')
newFile = f.read()
newMod = newFile.replace("\x0a",)
print newMod

(Lo sé, los scripts son mejorables. En un futuro los mejoraré)

Reducir el tamaño de JavaScript

Para reducir el tamaño de los archivos JavaScript existe una herramienta bastante avanzada llamada Closure Compiler (de Google) que además de eliminar carácteres innecesarios modificará los nombres de nuestras funciones y variables entre otras cosas. Esta herramienta permite generar un solo archivo a partir de varios, lo que resulta altamente interesante.

Reducir el tamaño de las imágenes