Análisis y Efectos de las Peticiones HTTP en la Performance de WordPress

En la realidad actual, los sitios web rápidos, dirigen a un mayor compromiso de los visitantes, retención y conversiones. Hay muchos factores que contribuyen a la velocidad de un sitio web; uno de ellos es el número de Peticiones HTTP.

En este tutorial, explicaré qué son las Peticiones HTTP, cómo determinar el número de peticiones HTTP, los efectos que tienen en la performance de WordPress, cómo los plugins y temas no son de ayuda, y soluciones al problema.

¿Qué es una Petición HTTP?

Cuando un navegdor está renderizando una página web, le envía una petición para recursos estáticos o componentes (tales como imágenes, CSS y JavaScript) al servidor web via HTTP, y el servidor responde y envía los archivos al buscador. De este modo, a una petición enviada por el buscador usando HTTP se le denomina petición HTTP.

Análisis de una petición HTTP

Para un mejor entendimiento de qué significa una petición HTTP, mira el código HTML de una simple página web.

En la imágen de arriba, podrás ver que hay un total de cuatro peticiones HTTP.

El Efecto de las Peticiones HTTP en WordPress

De acuerdo a la regla de performance de Yahoo:

El 80% del tiempo de respuesta de los usuarios finales se gasta en el front-end. La mayoría de este tiempo es ocupado en descargar todos los componentes de la página: imágenes, hojas de estilo, scripts, Flash, etc. Reduciendo el número de componentes por turno, reduce el número de peticiones HTTP requeridas para renderizar la página. Esta es la clave para páginas más rápidas.

Del extracto de arriba, estamos en lo correcto deduciendo que, cuanto menor sea el número de peticiones HTTP, más rápido será el sitio web; por lo tanto, un sitio WordPress con muchas imágenes y archivos CSS y JavaScript referenciados externamente, tiende a ser lento.

Contando el Número de Peticiones HTTP

Usando la extensión Firebug de Firefox y la herramienta Inspeccionar Elemento de Google Chrome y Opera, puedes determinar sin esfuerzo el número de peticiones HTTP de una página web.

Veamos cómo chequear el número de peticiones HTTP de nuestro blog WordPress.

Usando Firefox

Asegúrate que tienes la extensión Firebug instalada.

• Carga tu blog WordPress y presiona la tecla F12 para abrir la consola de Firebug.
• Navega al panel de Red. Si está deshabilitado, simplemente habilítalo.
• Recarga tu sitio WordPress para que el panel de Red capture y grabe las peticiones HTTP.
• Deberías ver el número de peticiones HTTP en la parte inferior.
  

  

Usando Chrome y Opera

A diferencia de Firefox, en Chrome y Opera no necesitas una extensión para chequear las peticiones HTTP, en vez se usa la herramienta integral Inspeccionar Elemento.

Los pasos siguientes son válidos tanto para Chrome como Opera.

• Carga tu blog WordPress.
• Haz click derecho y selecciona Inspeccionar Elemento.
• Navega al panel de Red y recarga tu sitio WordPress.
• Deberías ver el número de peticiones HTTP en la parte de abajo.
  

  

¿Sabías que instalando muchos plugins de WordPress incrementa el número de componentes en la página, y por lo tanto el número de peticiones HTTP?

Cómo los Plugins y Temas Incrementan las Peticiones HTTP

Muchos plugins que instalamos aumentan el número de peticiones HTTP sin que lo sepamos.

La mayoría de los plugins dependen de sus propios archivos de imágen, CSS y JavaScript para funcionar. Ésto lo hacen agregando un link que referencia estos componentes a WordPress, el cual incrementa el número de peticiones HTTP.

Como caso de estudio, usaremos el Formulario de suscripción de WP para entender por completo cómo los plugins aumentan las peticiones HTTP.

Al activar el plugin, se agregará un formulario de suscripción al final del contenido del post y a su vez incluirá un link a su hoja de estilos externa a WordPress.

Viendo el código fuente de tu sitio WordPress luego de la activación del plugin, revelará que se agregó un nuevo componente CSS como se muestra abajo, lo que significa un aumento en las peticiones HTTP.

1

<link rel="stylesheet" type="text/css" href="http://example.dev/wp-content/plugins/wp-subscriber-form/subscriber-form.css" />

Al igual que los plugins, los temas de WordPress contienen muchos componentes CSS y JavaScript. Un tema típico consiste de fuentes, componentes CSS y JavaScript embebidos, lo que lleva a un aumento en el número de peticiones. 

Relación Entre Minificación y Peticiones HTTP

El tamaño de cada componente del sitio también tiene un efecto en la performance de WordPress. A menor tamaño, más rápido se completa la petición al componente porque el buscador gasta menos tiempo descargandolo, por ser más pequeño.
El tamaño de los componentes CSS y JavaScript puede ser reducido por minificación (removiendo los caracteres y espacios en blanco innecesarios del código fuente.

Cómo Reducir las Peticiones HTTP en WordPress

Para reducir el número de peticiones HTTP, necesitamos  reducir el número de archivos de imágen, CSS y JavaScript en WordPress.

Entiendo que la idea de reducir el número de imágenes en tu blog puede no gustarnos a algunos, pero deberías intentar eliminar algunas imágenes que no sean críticas para el diseño de nuestro sitio.

Los temas de WordPress usan imágenes de fondo (background-images) en su código CSS para mejorar su apariencia. Puedes reducir el número de imágenes transformándolas en sprites. Vé este tutorial de A List Apart y este Screencast de Tuts+ para comprender cómo funcionan los sprites en CSS.

La performance de WordPress puede ser mejorada signifcantemente cuando el CSS y JavaScript de los temas son combinados y minificados respectivamente.

Hay varios plugins de WordPress como WP Minify y Better WordPress Minify (yo los he usado y los recomiendo) que respectivamente combinan JavaScript y CSS en un solo archivo, reduciendo el número de peticiones HTTP.

Si estás usando el plugin W3 Total Cache, no necesitas instalar los plugins anteriores porque este tiene una opción para minificar y combinar CSS y JavaScript.

Como desarrollador, edito plugins que agregan componentes extra a mi blog de WordPress, cortando el CSS y JavaScript agregado por los plugins y pegándolos en el CSS y JavaScript de mi tema para que estén unificados.

Conclusión

La importancia de la velocidad del sitio no debe ser sobre enfatizada. Un sitio lento ahuyenta a los visitantes.

Hay muchas prácticas para aumentar la velocidad de un sitio, y una de ellas es reducir el número de peticiones HTTP, lo que aprendimos en este artículo.