Acelerando WordPress

Siento la lata que os han dado mis compañeros con los otros capítulos, sé que estabais esperando el momento de leerme a mí y que mi capítulo ha quedado algo mal posicionado, un tanto irónico la verdad. Ahora sin bromas, os presento el tema de “Aaaaacelerando Wordpress”, en el que hablaremos de temas relacionados con la optimización de nuestra página para hacerla más rápida y por lo tanto más accesible a los motores de búsqueda y a nuestras visitas.

Algo que deberemos de tener en cuenta, es que la optimización de páginas no solo es realizable en el entorno de WordPress, sino que básicamente podemos aplicarlo a cualquier otra página que utilice cualquier otro CMS o incluso una programación propia (realmente no hace falta un script, las plantillas HTML/CSS también son optimizables).

Pues creo que como siempre me estoy alargando demasiado y ya empiezo a aburriros con tanta introducción, creo que lo mejor será que vayamos algo al grano y dejemos por fin paso al contenido del capítulo.

Importancia de la velocidad de carga y como medirla

¿Por qué está todo el mundo tan pesadito con la velocidad de carga? Puede que sea esta una de las preguntas que te hagas constantemente. Una web tiene muchísimos factores a la hora de posicionarse en un buscador, y lamentablemente la velocidad de carga es uno de ellos.

Los motores de búsqueda buscan lo que se llama contenido de calidad por cada una de las páginas por las que pasan diariamente. Este contenido de calidad viene dado por varias circunstancias como por ejemplo:

• Contenido con una perfecta coherencia léxica (lo que quita spinners, traducciones con aplicaciones como el translator de Google o de Bing, etc).
• Contenido único, lo que suprime la duplicidad de material en una misma búsqueda en un motor de búsqueda
• Perfecta accesibilidad al contenido, lo que incluye que no solo la página con el contenido cargue, sino que además cargue en tiempos aceptables.

¿Y cómo sabe cuánto tarda mi página en cargar un motor de búsqueda? Pues la respuesta a esta pregunta es bastante sencilla. Los motores de búsqueda llevan años haciendo visitas a nuestras páginas. Pongo en cursiva lo de visitas porque realmente son impresiones automáticas hechas por bots o como mejor los conocemos: “arañas”. Estas impresiones solo se hacen al código, no a la página.

La función de las arañas es la de recopilar datos y estadísticas de nuestras páginas y almacenarlas en el motor de búsqueda para que luego el algoritmo que empleen para el posicionamiento afecte según los datos recopilados. Interesante, ¿verdad?

Las arañas cuando acceden a nuestro sitio lo que regulan son:

• Actualizaciones del contenido, para ver si has añadido o eliminado contenido que tienen que indexar.
• Código de la página bien estructurado y comprensible
• Optimización del texto de cara al usuario (aunque tenemos la posibilidad de optimizarlo también de cara al motor de búsqueda)
• Contenido de calidad
• Velocidad de carga de la página web al completo, desde la consulta a la base de datos hasta la carga de los ficheros.

De todos estos puntos, los que nos importan en este capítulo son pocos, ya que de los otros puntos os hablarán o ya os han hablado mis compañeros. Pero primero, vamos a hacer una comprobación de los factores que tenemos que tocar para mejorar la velocidad de carga de una página de ejemplo. Para ello, vamos a utilizar dos herramientas:

• PageSpeed de Google. La función de esta herramienta es la de decirnos en qué aspecto nuestra página dificulta la experiencia de uso de las visitas en cuanto a velocidad. Es la herramienta más útil de cara al posicionamiento, ya que es Google el que nos está diciendo en qué falla nuestra página. Es la herramienta más crítica en mi opinión.
• Pingdom. Es una herramienta que te analiza menos aspectos que PageSpeed, pero que a mí personalmente me gusta más para analizar los archivos del servidor que están afectando más al tiempo de carga.

PageSpeed de Google

(PageSpeed de Google)

Actualmente me encuentro tratando de optimizar uno de mis sitios con temática “drones”. El sitio, al que ya le he puesto un bonito tema tocado por mí, le falta optimizar algunos aspectos para sacar mejor nota tanto en versión móvil como en versión para ordenadores. Dentro del análisis, me pide que arregle ciertos cosas para la versión móvil (optimización de imágenes, optimización de librerías javascript, tiempo del servidor, optimización del caché y minificar el javascript).

Para la versión del ordenador, por suerte, hemos sacado más nota:

Vemos que tanto la versión móvil como la versión de ordenador están relacionadas, pero no nos bastará con solucionar los fallos de la versión de ordenador para que la versión móvil saque mejor nota, también deberemos resolver problemas específicos en la versión móvil. En los siguientes apartados de este capítulo aprenderemos a solucionar detalladamente todos los errores marcados por el PageSpeed de Google.

Pingdom

Esta es la segunda herramienta que utilizaremos dentro de este capítulo. Pingdom, como ya os dije, nos realiza un análisis más relacionado con los archivos que relentiza nuestra página web. Los archivos, indicados abajo, tienen un análisis de tamaño, tiempo que tarda el servidor en cargarlo y el tiempo que relentiza nuestra página. Gracias a este dato, podremos saber qué archivos debemos de optimizar (aunque en el peor de los casos tendremos que eliminarlos).

Todo sobre el caché

El caché (dentro del contexto de las páginas web) es el conjunto de todos los documentos de una página web (imágenes, peticiones al servidor, etc) que una vez que son procesados por primera vez, son almacenados en forma de copias y estas copias pueden ser reproducidas por los usuarios directamente desde el caché en vez de tener que volver a esperar una respuesta del servidor.

Traduciéndolo un poco (no soy bueno dando acepciones muy acertadas), podríamos decir que el caché es una manera de almacenar archivos que pueden ser ejecutados de una manera más rápida por el navegador de nuestras visitas, lo que significa que podemos dar respuestas de carga de nuestra página más rápidas.

El caché se puede utilizar de bastantes maneras diferentes, existe por ejemplo el caché privado (que solo sirve para un único usuario), los cachés compartidos (que se pueden usar para varios usuarios) y los cachés paralela (que no identifican a los usuarios de una página y los tratan a todos por igual). En nuestros blogs este será el que optimizaremos normalmente.

Para nuestros blogs WordPress, tenemos la gran suerte de disponer de cientos de plugins con los que podemos optimizar el caché de nuestro sitio y así tratar de disponer de visualizaciones rápidas para nuestras visitas. Nosotros por ejemplo, vamos a tratar de utilizar el plugin W3 Total Cache, que es un plugin cuyos primeros usos suelen ser algo complejos debido a la gran cantidad de opciones que trae, pero aquí lo explicaremos a fondo para que no os de ningún tipo de problemas.

Instalación de W3 Total Cache

Para instalar W3 Total Cache podemos hacerlo con dos métodos diferentes:

• Instalándolo desde el panel de control de WordPress. Nos vamos dentro del panel de administración a Plugins >> Añadir nuevo y ahí en el buscador de plugins escribimos “W3 Total Cache”. Una vez encontramos el plugin lo instalamos:

• Descargando el plugin desde una fuente externa de internet y subiéndolo vía FTP. Para ello, tendremos que subir el plugin a la carpeta wp-content

Una vez instalado el plugin solo deberemos activarlo desde el panel de control de WordPress para ponerlo en marcha

Poniendo en marcha W3 Total Cache

Una vez instalado el plugin, nos aparecerá en la barra lateral una nueva pestaña titulada “Performance”. Le daremos clic y nos iremos directamente a General Settings. Ahí seleccionaremos qué tipo de archivos queremos cachear, aunque generalmente seleccionaremos todos.

En cuanto a las demás opciones de la página de opciones generales están bien por defecto. Si estamos seguros de lo que hacemos podemos tocar sin problemas, pero yo os recomendaría dejarlo tal y como está, ya que las opciones más óptimas son las que están seleccionadas.

Habrá una especie de error que nos advierta sobre que no hemos indicado las claves de acceso de algunas APIs, pero realmente estas aplicaciones que nos dicen que añadamos son ajenas al proceso del caché y ayudan con otros temas (como monotorizar el PageSpeed u otros), así que podemos quitar las opciones al final de la página de configuración general.

Adentrándonos en la siguiente tanda de configuraciones, entramos en “Page Cache”. Aquí vamos a poder elegir qué páginas queremos cachear, aunque tal y como os dije antes yo suelo tener la mayoría en caché ya que reducirá el tiempo de carga en todas las páginas y consultas que elijamos y las optimizará. Después de las opciones de páginas que nos dan a cachear nos dan una última opción que sirve para que las páginas no sean cacheadas para ciertos rangos en WordPress. Si estás editando la plantilla o haciendo algún cambio, lo que te recomiendo es que pongas tu rango de WordPress ahí, ya que si no lo haces no podrás ver los cambios que estás haciendo sobre el tema de tu blog a no ser que estés constantemente borrando el caché.

Minify

Otra de las opciones de este plugin es “Minify”, una tendencia cuyo objetivo es el de reducir el tamaño de los archivos de estilo y que por lo tanto nuestra página cargue antes. Esta optimización es otro punto que suele recomendarnos el PageSpeed de Google.

Cuando entramos en la pestaña de Minify en W3 Total Cache, la primera opción que encontramos es la reescritura de la dirección de nuestros documentos de estilo y javascript. Esto hará que nuestros links a las hojas de estilo sean conseguidos mediante variables en vez de aparecer directamente los links.

Ya cuando empezamos a navegar por las siguientes opciones, ya encontramos las relacionadas con el Minify.

La primera opción a optimizar es el HTML y XML. Lo primero es activarlo, hacer que la minificación haga de los archivos que aparezca todo el código en la misma línea y que lo mismo pase con el javascript (podéis ver las opciones que yo elegí en la imagen).

Luego tenemos las opciones de javascript y css:

Aquí vamos a seleccionar estas opciones, ya que por lo general tener activado el Minify da errores con muchos temas de WordPress (incluyo el tema que utilizo en mi blog). Finalmente seleccionaremos las mismas opciones que en la imagen con el tema del CSS.

Finalmente vemos cómo ha subido nuestra nota en el pingdom:

Hemos conseguido reducir el tamaño y el tiempo de carga, lo que nos deja en una buena nota (nuestra página carga más rápido que el 97% de las páginas que ha analizado pingdom).

Carga en paralelo

Normalmente en nuestras páginas web todos los objetos se cargan uno detrás de otro, y cada uno de los objetos crea una petición en nuestro servidor. La carga en paralelo hace que en vez de cargarse los objetos en serie se cargen todos al mismo tiempo.

Para ayudarnos un poco, vamos a hacer uso de un plugin llamado WP Parallel Load (instalamos el plugin como un plugin normal y corriente en el buscador de plugins de WordPress).

WP Parallel Load no tiene un panel de administración, tan solo lo instalamos y veremos en el análisis de Pingdom por ejemplo la carga de archivos que se empieza a hacer en paralelo:

Compresión de imágenes

Tal y como el título indica, la compresión de imágenes sirve para reducir el tamaño de las imágenes sin que estas pierdan calidad. En Wordpress podemos comprimir las imágenes con bastantes plugins, aunque yo el que recomiendo por su facilidad y por ser automático WP Smush.it. Podemos encontrar el plugin en el directorio de WordPress o buscándolo desde nuestro blog.

Una vez lo hayamos instalado, yéndonos a Medios >> Wp Smush.it encontramos la interfaz principal del plugin:

Seleccionaremos la opciónm de Automatically process on upload (para comprimir directamente las imágenes cuando las cargamos). Guardamos y si queremos empezar a comprimir las imágenes que habíamos subido antes de utilizar este plugin podemos utilizar el último botón del a página que pone “Bulk Smush all my images”. Cuantas más imágenes tengas más tiempo tardará y además no podrás abandonar la ventana hasta que la operación finalice.

Compresión Gzip

La compresión Gzip es otro de los métodos de reducir el tamaño de los archivos de nuestro servidor para que estos ocupen menos espacio y carguen antes a nuestras visitas. En WordPress podemos habilitar la compresión de dos maneras muy sencillas sin tener que hacer uso de pesados plugins.

¡OJO! Si estamos utilizando W3 Total Cache no tendremos que cambiar nada, ya que el mismo plugin nos añade esta opción dentro del .htaccess.

Compresión Gzip desde el .htaccess

En toda página web podemos tener o crear un archivo .htaccess que establece una primera configuración rápida de nuestra página web. En este archivo podemos indicar varios parámetros, como la página que queremos como página principal (o index) u otras funciones divididas en módulos como es el caso de la compresión Gzip. Para localizar el archivo tendremos que ir a nuestra carpeta en la que instalamos nuestra página wordpress vía Filezilla o desde el administrador de archivos de nuestro cpanel.

Abrimos el archivo y añadimos el siguiente código:

# BEGIN GZIP

<ifmodule mod_deflate.c>

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

</ifmodule>

# END GZIP

Compresión Gzip desde el options.php

WordPress tiene un panel de opciones oculto que se localiza en http://miurl.com/wp-admin/options.php. Ahí se almacenan muchos datos en forma de variables y podemos acceder y cambiarlos. Uno de los datos que podemos cambiar es la opción de activar o desactivar la compresión Gzip. Vamos a acceder al panel y a buscar gzipcompression. Una vez lo encontramos podemos activarlo cambiando el 0 por un 1:

Abajo del todo tenemos el botón para guardar las opciones.

Optimización de plantillas de WordPress

Como último punto en el tema de la optimización vamos a aprender a optimizar nuestras plantillas de WordPress. Esto significa que vamos a reducir el tiempo de carga de las páginas consiguiendo reducir las imágenes.

Tenemos que tener en cuenta que hoy en día la mayoría de los temas vienen optimizados, pero en el caso de que no sea tu caso y que tengas un tema a medida o un tema antiguo, este punto es muy recomendable que lo cumplas.

Vale, genial, vamos a ponernos manos a la obra. Lo primero que tendremos que ver es qué imágenes podemos optimizar. Vamos a darle un rápido vistazo a nuestro blog y vamos con Google Chrome y el visor del código de fuente (Control+U) a ver cómo está puesta cada imagen:

Lo primero que vemos es una imagen cuya calidad es perfecta (no tiene nada de pixelado). Esta imagen ocupa un espacio dentro del blog de 390px * 234px, pero la realidad es que tal y como se indica en el visor del código de fuente la imagen tiene unas dimensiones reales de 250px * 150px. Significa que estamos cargando imágenes pequeñas y las estamos ampliando sin que afecte a la calidad de la imagen. Esto hace que carguemos imágenes que ocupan menos espacio y que por lo tanto la página cargue antes.

El problema que se nos plantea es que estas imágenes tienen que ser generadas automáticamente por WordPress cada vez que nosotros subamos una imagen, ya que es así como WordPress funciona: nosotros subimos una imagen y WordPress por defecto a parte de tu imagen crea otras 3 de tamaño grande, medio y pequeña y estas imágenes se utilizan para diferentes fines. Nosotros vamos a incluir nuevas resoluciones de imágenes predeterminadas para intentar optimizar esto que os acabo de decir.

Vamos a ir al editor de plantillas ubicado en Apariencia >> Editor y ahí vamos a buscar el archivo functions.php. Vamos a irnos al final del archivo y vamos a añadir la siguiente línea: add_image_size( imagenreducida, 300, 250, true );

Ahora podemos ir a cualquier página de la plantilla que utilice por ejemplo thumbnails (como el index) y cambiar la imagen predeterminada que aparece ahí por la nuestra que acabamos de generar:

Y en nuestro código de fuente del blog nos aparecería “inicioblog” (que es el nombre de mis nuevos thumbnails:

Con todo esto no solo hemos logrado que la herramienta de análisis de pingdom haya reconocido un aumento en la velocidad de nuestro sitio, sino que también hayamos solucionado varios de los problemas del PageSpeed de Google.

Ya que realmente no hemos hablado del PageSpeed que es en realidad más importante que el pingdom, ahora voy a hacer una lista de los factores que intervienen en la falta de puntuación en el PageSpeed y qué hacer para mejorarlos.

Centrándonos en el PageSpeed

Como ya os he dicho antes, me gustaría dedicar también parte de mi capítulo al PageSpeed de Google, ya que es la herramienta que nos confiesa en qué aspectos Google se fija en nuestra página en cuanto a optimización de esta. Son puntos que casi son exigidos por Google, y por eso mismo tenemos que arreglar los fallos de optimización para que Google tome nuestra página como una página limpia, rápida y que ofrece una gran experiencia de uso a las visitas.

Ya que no estamos en un ebook diseño y entiendo que no todas las páginas son responsive todavía, no nos vamos a centrar en la parte de navegación móvil, sino en la versión de escritorio (realmente ambas versiones están ligadas y la optimización de estas es la misma, pero en la versión responsive te dicen de algunos fallos que tiene la versión de móvil).

Fallos de optimización que suele reconocer el PageSpeed

1. Optimización de imágenes. Aquí el PageSpeed nos dice que nuestras imágenes a pesar de haberle pasado dos plugins de compresión de imágenes siguen sin estar optimizadas, por lo que para comprimir aún más las imágenes sin reducir la calidad de estas, vamos a hacer uso de varios programas por los que pasaremos las imágenes antes de subirlos. Google recomienda http://jpegclub.org/
2. Eliminar el Javascript que bloquea la visualización y el css del contenido de la mitad de la página. Esto significa que hay documentos que hasta que no son cargados la página no se muestra. Para evitar esto, los scripts javascript y algún que otro documentos de estilo se pueden mover al fondo de la página para que carguen después de que la página sea mostrada. Esto se puede hacer desde el editor de archivos, donde podremos localizar las hojas de estilo y ponerlas debajo de </body>. Hay una etiqueta php localizable en el header.php que es <?php wp_head(); ?> que lo que contiene es todas las hojas de estilo y todo los documentos javascript que mete el tema en nuestro blog. Podemos ir a las funciones del tema para localizar todos los archivos que se han introducido en nuestro header y quitarlos uno a uno y ponerlos en el footer:

Y las demás reglas ya han sido realizadas por el plugin de caché W3 Total Cache, solo que quedará algún que otro archivo que no habrá sido simplificado. En mi caso es el javascript de dos plugins que tendré que simplificar manualmente y minificarlo.