Share on Facebook10Tweet about this on TwitterShare on Google+46Share on LinkedIn29Share on StumbleUpon0Buffer this page

Hace unos días tuve el gran privilegio de poder rediseñar la página web de Miguel Florido, Marketing And Web. Trabajamos codo con codo para renovar por completo el diseño de su blog, y finalmente esta semana hemos lanzado la nueva versión. La web ahora es más rápida que nunca, y si no la has visto ya deberías hacerlo.

Puesto que se ha sido una experiencia bastante interesante, he pensado que sería una buena idea compartir aquí la experiencia de renovar y optimizar una página web al máximo.

Hemos aprendido bastante de este proyecto, descubriendo cosas nuevas sobre WordPress y maneras de optimizar una página web que no son tan obvias.

Cómo optimizar una página web, correctamente

Se ha hablado much acerca de la optimización de la velocidad de carga hasta la fecha. Es un factor muy importante para hacer que tu página sobresalga por encima del resto, e incluso Google ha apostado por ello.

Para hacer que tu página web en WordPress sea rápida, hay muchos elementos a tener en cuenta. Y en el caso de Marketing and Web, hicimos una revisión exhaustiva de todo lo que se podía mejorar.

¿El resultado? Una calificación de un 94% en PageSpeed.

marketing-performance

Realmente no hemos hecho magia. No utilizamos ningún truco secreto– sólo invertimos mucho tiempo y esfuerzo, combinados con los conocimientos necesarios para optimizar la página.

Aquí te muestro cada uno de los pasos que dimos, para que puedas hacer lo mismo en tu página.

1. Elegir un buen hosting

El primer y más importante paso que realizamos fue emplear un buen servicio de hosting. Si echas un vistazo a otros blogs de habla hispana, verás que muchos de ellos hablan de lo importante que es contratar un proveedor de calidad para tu página web.

Y es que es totalmente cierto.

El servicio de hosting es quizás el factor más importante para optimizar la carga de tu página web. Es el responsable de responder y transferir toda la información necesaria para mostrar tus contenidos, y por esa misma razón no hay que escatimar en gastos a la hora de contratar.

En el caso de Marketing And Web, tuve la suerte de que Miguel ya contaba de por sí con un proveedor muy bueno: Raiola Networks. Durante el tiempo que he podido trabajar con su infraestructura, la calidad del hosting ha sido increíble:

  • La capacidad de procesamiento (CPU) es muy buena.
  • El tiempo de respuesta y de resolución de DNS es ágil.
  • Está bien configurado para correr WordPress.
  • Y sobre todo, no ha habido caída alguna del servicio.
  • La velocidad de transferencia es muy buena y no está limitada.

Otros bloggers como Dean Romero ya habían hablado bien de Raiola, pero verlo de cerca es otra cosa. Tras probar de primera mano el rendimiento del hosting, es muy probable que yo también acabe trasladando mi blog a este proveedor.

raiola-networks

En resumen, el hosting es sumamente importante para tu web. Ya sea con Raiola o con otro servicio, te recomiendo encarecidamente que inviertas el dinero necesario en tener un alojamiento de calidad para tu web. Los dolores de cabeza que te ahorrarás lo compensará con creces.

2. Utilizar un tema WordPress optimizado

El segundo paso para optimizar la web fue crear un tema WordPress hecho a medida. Como si de un traje se tratara.

Antes, el blog funcionaba con una plantilla genérica que era poco visual, y como resultado la experiencia de usuario no era la mejor. La nueva versión de Marketing And Web tiene un diseño personalizado y desde cero.

marketing-and-web

Aquí es donde aprovechamos para hacer bastantes mejoras visuales. El tamaño de letra ahora es mucho mayor. El interlineado ha sido retocado para mejorar la lectura. Y elementos como los botones sociales se funden con el resto de la página. Todo esto ayuda a crear una mejor experiencia de usuario– el objetivo es que te sientas cómodo al leer los artículos del blog, no que sea un martirio.

Pero sin duda, lo más importante del tema WordPress es que está optimizado para ser rápido.

Pese a tener un diseño a medida, el tema funciona con el mismo framework que todas las plantillas de CPOthemes. Este framework no es más que la base que usamos para crear todos nuestros temas, y que estamos siempre mejorando y retocando.

El framework no guarda ningún secreto. Más bien, es el resultado de utilizar buenas prácticas de diseño:

  • No tiene miles de opciones, sólo las que hacen falta.
  • Carga los archivos que necesita de forma inteligente (más sobre esto luego).
  • Es conservador y no se pasa con funciones superficiales.
  • Se integra muy bien con plugins en lugar de intentar hacerlo todo solo.

En resumen, el tema está creado para aportar valor al usuario y velar por su sitio web. La velocidad de carga es sólo un bonus.

site-cpothemes

Compara esto con los temas multiuso de Themeforest, que traen un centenar de opciones, varios sliders potencialmente inseguros, o que llenan la página de efectos y animaciones muy pesadas. Tanto código acaba dando más problemas que soluciones.

Es mejor emplear un tema que hace una única cosa bien, en lugar de buscar una mega-plantilla definitiva.

3. Utilizar un plugin de caché

Tener un sistema de caché en tu sitio web es esencial si quieres obtener una buena velocidad de carga.

Explicado de una forma muy simple, el caché guarda una copia ya preparada de lost contenidos de tu sitio– y entonces se la muestra a tus visitantes en lugar  de generarlos desde cero. Es un mecanismo que puede marcar la diferencia entre una web lenta, y una que va como un tiro.

En WordPress, tienes varios plugins a tu disposición para implementar el caché:

Habiendo probado las tres opciones en diferentes sitios, yo diría que WP Rocket es la mejor elección. Siendo un plugin de pago, es la alternativa con la mejor relación resultados-dificultad. Es absurdamente fácil de configurar, y da resultados casi comparables a W3 Total Cache.

w3-total-cache

Para Marketing And Web, decidimos usar W3 Total Cache. Ya que se trata de una web a medida, queríamos aprovechar su inmensa cantidad de opciones para configurarlo retocarlo todo manualmente:

  • El caché de página
  • El caché del navegador
  • Minificación de archivos
  • El Content Delivery Network
  • Caché de la Transients API

Francamente, W3TC es un plugin bastante avanzado que no se lo recomiendo a casi nadie que no sea un desarrollador. A menos que sepas exactamente lo que haces, puedes pasarte horas con esta herramienta sin lograr gran cosa.

4. Utilizar un CDN

Los CDN son bastante importantes para impulsar tu velocidad de carga por un motivo: las conexiones simultáneas.

¿Sabías que tu navegador tiene un límite de archivos que puede descargar al mismo tiempo? Cuando cargas una página, cada imagen, hoja de estilos o script, necesita emplear una conexión para descargarse. Y el límite de conexiones simultáneas de los navegadores modernos es de unas 6, de forma que sólo se pueden descargar 6 elementos a la vez.

Aunque en M@W utilizamos CloudFront, mi preferencia personal es KeyCDN.

Aunque en M@W utilizamos CloudFront, mi preferencia personal es KeyCDN.

Por suerte, una forma de sobrepasar este límite es emplear subdominios para cargar tus archivos, como cdn.marketingandweb.es. Esto, combinado con un CDN que reparte tus archivos por todo el mundo, puede ayudar bastante a agilizar la carga.

Para Marketing And Web, empleamos el servicio de CDN de CloudFront. Así, los archivos estáticos como fotos y hojas de estilo CSS se descargan a través de la infraestructura de Amazon. Sobra decir que la velocidad de transferencia es imbatible.

4. Carga inteligente de CSS y JS

carga-inteligenteCada plugin que utilizas en WordPress puede cargar archivos CSS y JS adicionales a tu página web. Esto en principio no es malo; el problema llega cuando estos archivos se cargan de forma indiscriminada.

¿Recuerdas lo que he mencionado antes sobre la carga inteligente de archivos en el tema WordPress?

Una parte muy importante de la optimización es cargar sólo los archivos que vayas a necesitar. Por ejemplo, si no te hace falta utilizar un formulario de contacto en tu página de inicio, entonces no deberías cargar las hojas de estilo ni los códigos que hacen que funcione. Parece simple, ¿no?

Pues no tanto. Existen muchos plugins de WordPress que, pese a ser utilizados en miles de sitios, no cargan de forma selecta sus archivos.

De hecho, la cosa es un poco alarmante ya que investigando la carga de Marketing And Web encontramos bastantes recursos que no servían para nada:

  • Contact Form 7
  • KK Star Ratings
  • Table of Contents
  • Click To Tweet
  • WordPress Related Posts

Sólo con activar estos plugins, vimos que se cargaban más de 400Kb de datos que no tenían ningún uso. En una página que no tenga muchas imágenes, eso puede llegar a ser más del 50% del peso total. Si no se usaran estos archivos, tus páginas podrían ser dos veces más ligeras, y gastar muchos menos recursos de tu servidor.

Así que hubo que solucionarlo.

Como por suerte WordPress usa una forma bastante inteligente de cargar recursos, añadimos algo de código personalizado para quitar los archivos JS y CSS que no fuesen necesarios. Esta parte se hizo a medida para Marketing And Web. Por ejemplo:

  • En la home, quitamos los formularios de contacto y ratings.
  • En páginas que no fueran del blog, quitamos Click To Tweet.
  • Sólo cargamos los posts relacionados en… bueno, posts.

Después de todo esto, pudimos aligerar bastante las páginas. Hay que tener en cuenta algo muy importante: quitando archivos no sólo reducimos el peso total, sino también las conexiones al servidor.

5. Revisar el tamaño de las imágenes

Las imágenes son casi siempre lo que más pesa dentro de una página web, así que es otra oportunidad para optimizar.

foto-optimizada

Revisando la biblioteca multimedia, vimos que habían fotos y archivos que pesaban más de 200Kb, así que los optimizamos y reducimos de forma manual. Un buen ejemplo de esto es la diapositiva que hay ahora en la home– en lugar de emplear dos imágenes separadas (una de ellas muy pesada al tener fondo transparente), creamos una foto JPG a medida.

Cabe decir que la gran mayoría de fotos se hicieron a medida, utilizando Photoshop para optimizar su peso. Sin embargo, tu también puedes hacer este tipo de cosas con plugins como EWWW.

¡Sólo recuerda que la calidad de imagen se puede perder si optimizas demasiado!

6. Reorganizar la entrega de Javascript

Trabajando un poco más la carga de los archivos JS, decidimos mover la carga de Javascript al pié de página.

Con esto se evita bloquear el renderizado de la página– es decir, hacemos que los scripts se carguen después de los elementos más visuales. Este truco nos permite tardar un poco menos en mostrar la página al usuario, ya que el navegador no tiene que procesar tantos elementos antes de empezar a generar la cabecera del sitio.

Sólo hay un problema. Muchos plugins añaden el Javascript en la cabecera sin tener esto en cuenta.

Para optimizar la entrega de archivos, tuvimos que desarrollar algo de código a medida que desplazase el lugar en el que se generan los scripts– de la etiqueta <head>, al pié de la página. Se trata de algo más bien avanzado, ya que hubo que asegurarse de no romper nada en la página.

Con esto conseguimos una mejor valoración en PageSpeed y GTMetrix, ya que el renderizado es uno de los factores más importantes para la velocidad.

Un gran rediseño

En resumen, optimizar al máximo la velocidad de carga de una página no es tarea fácil.

Un sitio hecho en WordPress tiene muchos elements que son sencillos de optimizar– por ejemplo, con sólo instalar WP Rocket ya se nota una gran diferencia. Pero conforme vas optimizando la web, se hace más y más difícil. En muchos casos, tuvimos que implementar código hecho a medida para ganar unas milésimas de segundo.

De este proyecto he aprendido bastante. Y en particular, me he dado cuenta de que muchos de los plugins que utilizamos a diario todavía pueden mejorar mucho más.

¿Has optimizado ya tu página web?

Share on Facebook10Tweet about this on TwitterShare on Google+46Share on LinkedIn29Share on StumbleUpon0Buffer this page

Crea tu página web como hacen los expertos.

Apúntate a un curso de 5 días que te enseñará a crear tu página web en WordPress. Sin tener que programar, y utilizando herramientas que te ahorrarán horas de trabajo.

An error occurred. Please try again and make sure all form fields are filled out.
¡Ahora estás apuntado! Revisa tu email.