Velocidad WEB

Inicio > Diseño Web > Velocidad WEB

Velocidad de carga de una web

Todos estamos de acuerdo que en SEO la velocidad de carga de una web es fundamental; por ello he apostado desde hace tiempo por algo que se ha convertido en una especie de obsesión; entregar los diseños que efectuamos al máximo de optimizados. En el caso de hoy vamos a ver como mejorar la carga de una web hecha con WordPress.

Optimizar la velocidad de carga web es totalmente necesario; la mejora de la velocidad de carga es, en algunos hosting, un auténtico suplicio; sin entrar en valoraciones de hostings, hoy quiero compartir como hacer la optimización independientemente del hosting donde se encuentre alojada la web; para conseguir nuestro objetivo nos vamos a centrar en tres puntos:

  1. Un buen plugin de caché
  2. La optimización del contenido
  3. Utilizar un CDN

Los plugin de caché

He realizado pruebas con distintos plugin que podemos encontrar en el repositorio de WordPress:

  • W3 Total Caché
  • WP Supercaché
  • WP Rocket

W3 Total Caché

De los tres plugin W3 Total Caché sea, seguramente, el más popular, tiene multitud de posibilidades de configuración. Es un plugin utilizado por defecto en muchas de las preinstalaciones que te aportan los hosting y, incluso en su configuración por defecto devuelve datos muy buenos de velocidad de carga.

El plugin W3 Total Caché parece haber tomado como referencia los resultados de la PageSpeed Insights de Google; no seré yo quien lleve la contraria al buscador, pero estoy seguro que los expertos en SEO estarán de acuerdo conmigo en que es muy difícil, por no decir imposible, conseguir acercarse a la perfección. Puntos como “Priorizar el contenido visible”, o “Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página”; son una auténtica locura. Intentar optimizar estos puntos, después de dar muchas vueltas al tema, se había llegado a convertir en una obsesión. Personalmente he conseguido en muchos casos acercarme a la puntuación de 90 sobre 100 en escritorio y 85 sobre 100 en móvil; pero esto no mejoraba de forma substancial la velocidad de carga de la web.

En este mismo artículo voy a hablar más a fondo de los aspectos fundamentales que debes cumplir en la optimización con PageSpeed Insights.

WP Supercaché

Sin duda WP Supercaché es el plugin más sencillo de configurar; su funcionamiento es parecido al de W3 Total Caché. La parte que más me gusta es que, en el modo “Easy”, la configuración básica ya te aporta una muy buena optimización. Bajo mi punto de vista, incluso mejores que W3 Total Caché. El plugin es, en cierto modo, “inteligente”; y da prioridad a las páginas más visitadas de tu página web. Controla los distintos “hits” que se producen en las páginas y guarda esa información para servir esas páginas de forma más rápida. Y es en este punto donde el hosting cobra protagonismo; no todos los hosting del mercado soportan bien esta opción y, por lo tanto debemos desactivarla; con lo cual perdemos parte de las virtudes que este magnífico plugin nos ofrece.

WP Rocket

Mi plugin favorito sin lugar a dudas; el único problema es que se trata de un plugin Premium (de pago), y deberás obtener una licencia y renovarla anualmente. Estamos acostumbrados a los recursos gratuitos, pero si nos queremos diferenciar, en muchas ocasiones, debemos acudir a este tipo de recursos de pago para conseguir mejores resultados.

WP Rocket es terriblemente sencillo de configurar, se tarda apenas unos minutos y los resultados son sencillamente espectaculares. No está tan centrado en los aspectos que requiere PageSpeed Insights, me atrevería a decir que les da un poco igual, ya que el objetivo es mejorar la UX, la experiencia de usuario; esa experiencia con la que Google nos viene advirtiendo desde hace años.

Las opciones básicas contienen las cargas aplazadas de imagen, la compresión de HTML y los correspondientes archivos CSS y JS. Además de tener una caché específica para móvil, muy interesante en Themes diseñados para móvil o si trabajas con determinados plugin de optimización para este tipo de dispositivos.

Mejorar la velocidad de carga de la página web

Tal y como apuntaba al principio tenemos distintas pautas para mejorar la velocidad de carga; en mi criterio debemos combinar tres herramientas para hacer un buen test de velocidad web; en primer lugar vamos a analizar la velocidad; para analizar la velocidad de forma eficaz lo mejor es siempre usar los mismos criterios y en las mismas herramientas:

 

Analizar con PageSpeed Insights:

Personalmente me gusta medir varias urls, siempre empezando por la Home; a continuación una o varias de las url que mayor número de recursos de imagen, css personalizados y recursos externos utilice; y, para terminar varios post del blog o productos si se trata de un ecommerce.

Al analizar la velocidad web de cualquier página que queramos mejorar su velocidad; lo primero que observamos es un conjunto de errores y advertencias que es conveniente resolver, pero cuidado, sin obsesionarse, ya que como veremos más adelante no es realmente significativo.

Para hacer los test de velocidad de carga web, hemos utilizado nuestro propio dominio, al analizar con PageSpeed Insights puede dar la sensación de que está fatal de optimización, tal y como se muestra en la próxima imagen.

test de velocidad web

Como podemos observar está muy lejos de lo que sería una correcta WPO; pero sigamos con el análisis con otra herramienta, en este caso GTmetrix

Análisis con GTmetrix

Esta es mi herramienta favorita cuando se trata de analizar la velocidad de carga de una web; así como de ver el grado de optimización. Creo que el análisis que devuelve es muy correcto, aunque si queremos tener toda la información, como siempre, hay que pasar por caja. De todas formas, con la versión gratuita, es suficiente en la mayoría de los test que podamos realizar sobre una página web.

La misma url, el mismo día y sin realizar ningún cambio; nos devuelve unos datos ciertamente interesantes al realizar el test de velocidad de carga con esta herramienta.

análisis velocidad carga web

Se supone que los datos correspondientes a PageSpeed los obtiene de la misma Base de Datos; no obstante observamos una diferencia substancial en el análisis de la página web. Como decía al inicio; no voy a entrar en analizar en profundidad este resultado del test de velocidad de carga de la página web; no es el objetivo de este post, que está centrado en como conseguir mejorar la velocidad. Por lo que respecta a la velocidad de carga de la página web si que nos da un dato interesante; los usuarios situados en Vancouver tardan en visualizar completamente la página 2,6 segundos, no está nada mal teniendo en cuenta que está lo suficientemente lejos; además hay que añadir que el público objetivo de esta página web no se encuentra en aquellas latitudes.

Para tener un análisis más justo necesitamos una tercera opinión, en este caso vamos a hacer el test de velocidad de carga web con Pingdom.

Test de velocidad de carga con Pingdom

La herramienta definitiva en cuanto a velocidad se refiere; Pingdom nos permite decidir desde donde queremos hacer el test de velocidad de carga de la página web; hasta hace relativamente poco contabamos con cinco localizaciones.

Melbourne, lo suficientemente lejos como para darnos una idea de como estamos cargando en otras zonas.

Dallas, por su proximidad con Mountain View (sede de Google), no está de más tener unos buenos tiempos de carga en esa zona. No es relevante al 100%, ya que los test de velocidad de carga que hacen los distintos bots de Google se realizan desde cientos de sitios repartidos por el mundo.

New York, un punto más de medida, apenas lo utilizo a menos que la WPO sea para una página web con influencia en los EEUU.

Las dos más interesantes si nos centramos en España; Amsterdam, cuyo DataCenter ya no se utiliza y que nos aportaba una visión muy clara de la velocidad que estabamos sirviendo desde Hosting españoles; y, para finalizar, Estocolmo. En este momento Estocolmo es el punto de test de velocidad de carga más cercano que tenemos con Pingdom; pero como veréis una buena carga en ese DataCenter nos da mucha información de lo que sucede al cargar más cerca.

Análisis de velocidad por ciudades

Veamos en las mismas condiciones el test desde las distintas ciudades:

velocidad de carga web

Test desde Melbourne

Bien, parece que Melbourne está lo suficientemente lejos, sin embargo la página está cargando en 3,81 segundos; según el análisis de velocidad de carga con un grado de optimización de 80 sobre 100, bastante lejos de los datos que nos devolvía el análisis con PageSpeed Insights; de ahí mi deducción de que no es el mejor test en la actualidad. Hasta hace un tiempo ponía como muestra el análisis de la propia página de Google en el test, los resultados eran desastrosos, a día de hoy no se puede realizar el test, inmediatamente te banea.

velocidad carga web

Test desde Dallas

Los datos del análisis de la velocidad de carga de la página web desde Dallas tampoco están nada mal, está cargando en menos de 2 segundos; un tiempo que según todos los expertos en SEO consultados es más que óptimo.

test de velocidad web

Test desde Estocolmo

Y por último el mismo test de velocidad de carga realizado desde Estocolmo; un análisis de velocidad de carga y optimización que es el que nos interesa; en primer lugar por proximidad y en segundo lugar por ser el que más se acerca a nuestro público objetivo que, en este momento es de ámbito europeo.

Conclusión sobre el análisis de velocidad

Como hemos podido comprobar, un contenido optimizado es ideal para mejorar los rendimientos en todos los análisis de velocidad de carga; pero estos resultados no son sólo gracias a optimización; el secreto radica en el uso de CDN combinado con todas las optimizaciones de código, de imágenes, etc.

¿Qué es un CDN?

De forma resumida; un CDN (del inglés, Content Delivery Network), no es más que un conjunto de puntos de distribución de contenido a nivel global. Estos puntos de distribución de contenido almacenan en caché las páginas de tu sitio web para servirlas de una forma más rápida a los usuarios. Usar un CDN tiene diversas ventajas, evidentemente la primera de ellas es la velocidad con que se suministra los contenidos a los usuarios de la página web; pero también tiene algunos inconvenientes, el primero de ellos su elección.

En la actualidad hay muchos proveedores de CDN; el mismo Google te ofrece este producto aprovechando su red. De los más populares quizá Cloudflare sea el que se lleva la palma, no obstante este popular CDN debe usarse con precaución. Cloudflare tiene unas muy buenas opciones de caché, pero si hay una característica espectacular es en cuanto a seguridad y Firewall. A continuación MaxCdn, debo confesar que es mi favorito, aunque estoy viendo la opción de OVH por tener una mejor red en Europa; de la última frase ya obtenemos la gran deducción, MaxCdn no cuenta con una infrestrucutra óptima en Europa, aunque con los datos que he aportado antes vemos que es más que suficiente.

Otro de los inconvenientes que plantean estos CDN son sus planes de precios, todos ellos muy similares, en torno a los 10€ hasta 1Tb; pero a partir de 1Tb los precios se disparan y echo en falta precios intermedios, el salto de 1Tb a 10 Tb me parece excesivo. Pero no nos desviemos del tema.

¿Qué CDN elegir?

Como he apuntado anteriormente, en mi caso utilizo MaxCdn; la respuesta a la elección es simple: me devuelve una velocidad de carga de las páginas web cacheadas en ese CDN óptimas para los proyectos en que estoy trabajando. Su configuración es sencilla; el soporte técnico es de mucha calidad y rapidez; bajo mi punto de vista criterios suficientes para elegirlo como opción. (No, no tengo ninguna comisión). La combinación, además, de WP Rocket con MaxCdn es genial en cuanto a resultados; simplifica la gestion de los servidores y mejora la velocidad de carga de la página web de forma impresionante.

¿Como configurar WP Rocket con MaxCdn?

Vamos por partes; a pesar de dar por supuesto que ya te has descargado WP Rocket y has adquirido la licencia, te dejo el enlace a WP Rocket.

Instalamos WP Rocket en nuestra página web y a continuación accedemos a su configuración; la configuración es sencilla, me atrevería a decir que con las opciones básicas ya vas a notar una gran mejora en la velocidad de carga de tu página web.

Así es como se muestra el panel:

Mejorar la velocidad web con WP Rocket

Las opciones que recomiendan los autores del plugin son acertadas; en este caso la opción de LazyLoad, tanto para imágenes, iframes y videos funciona muy bien; anteriormente había probado algunos pulgin con la misma utilidad y los resultados fueron bastante peores.

Configuración básica de WP Rocket

A continuación tenemos las opciones de archivos; no hay muchas opciones de configuración, minimiza y concatena de forma automática; otros plugin, como por ejemplo W3 Total Caché, tienen multitud de opciones en este apartado, en el caso de Wp Rocket el plugin hace todo por nosotros y la verdad es que sin muchos problemas adicionales; por ejemplo uno de los problemas más habituales al minimizar archivos CSS y JS es que en función del Theme instalado este presenta problemas, llegando incluso a mostrar un sitio web roto.

En el caso de WP Rocket si actuamos con cuidado en dos clics tenemos todo configurado. Otro de los puntos fuertes es la posibilidad de minificar las fuentes de Google, en los plugin mencionados anteriormente había que ir con mucho cuidado ya que a veces las tipografías se mostraban de forma incorrecta; llegando en algunos casos a mostrar Open Sans que suele ser la fuente por defecto en la mayoría de Themes.

Minificar CSS y JS ya depende de nuestras necesidades; si hemos optimizado estos archivos a mano las diferencias no van a ser muchas; pero si lo nuestro no es la programación, es mucho mejor que el plugin lo haga por nosotros; va a eliminar de un plumazo los espacios en blanco y los comentarios de código no necesarios, con ello el peso de los archivos va a bajar unos cuantos Kb.

Configuración ideal del plugin WP Rocket

La configuración ideal, en mi caso, quedaría como sigue:

configurar el plugin WP Rocket

Precisamente por las propiedades del Theme usado en nuestra web, no hemos minificado los JS.

Como muestra una imagen; que vale más que todo lo que yo pueda explicar sobre las ventajas de este plugin, para mejorar la velocidad de carga; como siempre, el test de velocidad de carga desde Melbourne:

Antes de instalar wp rocket

Antes de instalar y configurar WP Rocket

Después de instalar WP Rocket

Después de instalar y configurar WP Rocket

Como podemos observar, la diferencia es abismal, hemos ganado algo más de 4 segundos de velocidad de carga de la página web; pero aún nos queda configurar el CDN.

Configurar MaxCdn con WP Rocket

En primer lugar deberemos tener una cuenta abierta en MaxCdn, aquí tienes el enlace a MaxCdn

Una vez dentro del escritorio de MaxCdn, encontramos distintas opciones; lo primero que debemos hacer es crear una Pull Zone, las zonas pull son las que van a contener los datos de tu sitio web, digamos que los más habituales como imágenes, archivos CSS y JS.

Podemos configurar también zonas Push para aquellos elementos más pesados, como puedan ser documentos en PDF, EBooks, etc. Y por último zonas VOD, realmente útiles para transmisiones en streaming.

Configurar una zona Pull en MaxCdn

zonas pull en MaxCdn

En la zona de configuración pulsamos sobre Create Pull Zone

En la pantalla de configuración tenemos que cubrir tres puntos básicos, añadir un nombre a la zona en Custom Domains; aquí podemos añadir tantos dominios como vayamos a necesitar, en nuestro caso es suficiente con uno; el sistema te devuelve una url en el campo CNAME, esta url la vamos a necesitar después para la configuración de CDN en WP Rocket. El último paso, y muy importante es habilitar la compresión GZIP, de esa forma nuestros contenidos se sirven comprimidos, mejorando por lo tanto, la velocidad de la web.

crear una Pull Zone en Maxcdn

Ahora toca esperar a que se expandan las nuevas DNS, mientras se expanden regresamos al panel de administración de nuestra web y vamos a incorporar el registro CNAME a la configuración del plugin.

IMPORTANTE: en algunos servidores vamos a necesitar crear también un registro CNAME en nuestro cPanel, consulta con tu proveedor de Hosting si no sabes como hacerlo.

Configurar CDN en Wp Rocket

configurar maxcdn en wp rocket

Activamos la opción “Activar Content Delivery Network”; e introducimos la url que nos ha proporcionado MaxCdn. Podemos comprobar la expansión de las DNS si introducimos la url que acabamos de configurar en cualquier navegador; si hemos efectuado todo el proceso de forma correcta nos debería mostrar nuestra página web.

Con todo este proceso terminado debemos tener nuestra página web “volando” desde prácticamente cualquier lugar del mundo; como habréis podido comprobar no he prestado ninguna, o casi ninguna, atención a las recomendaciones de optimización de PageSpeed Insights.

¿Significa eso que no sea importante?

Al contrario, lo es y mucho, y afecta al posicionamiento de nuestra web; recuerda que a Google le gustan las cosas ordenadas, todo en su sitio y de forma que mejore la experiencia de usuario; pero esto no significa que deba convertirse en una obsesión. En SEO cada décima de punto cuenta, y por supuesto toda optimización que hagamos sobre nuestra página web va a ser positiva.

Conclusión

Sin duda la velocidad de carga es uno de los factores más importantes; los distintos directivos de Google preguntados al respecto así lo confirman; pero lo más importante, también confirmado por Google es la experiencia de usuario; por lo tanto, si los usuarios quieren que las páginas web a las que acceden carguen rápido; debemos trabajar para conseguirlo, ya que el porcentaje de rebote va a bajar y la permanencia en nuestra página va a aumentar; todo ello gracias a que nuestra página web tienen una velocidad de carga óptima.

Importancia de la velocidad web en SEO

La velocidad de carga de una web se está convirtiendo, si no lo es ya, en uno de los factores que pueden determinar un buen posicionamiento SEO, si bien, como veremos más adelante Google parece tener una clara tendencia en este aspecto, pienso que el factor más importante al que afecta la velocidad de carga de una web, es el que determina la experiencia de usuario.

El hecho de no tener que esperar a que la web cargue para poder utilizar sus recursos, tener la web visible en tiempos nunca superiores a 2 segundos, si, 2 segundos, y la navegación desde dispositivos móviles desde los cuales hay que pensar en el consumo de datos que una web lenta comporta, parece quedar claro que una web bien optimizada juega con ventaja a la hora de posicionarse, ante Google evidentemente, pero entre los usuarios de forma determinante. Veamos como influye la velocidad de una web en el posicionamiento y como adquirir ventaja con respecto a nuestros competidores.

Optimización del diseño de la web

Conversando con compañeros SEO, todos coinciden en la importancia que ha adquirido desde hace tiempo que nuestra web tenga una buena velocidad de carga, en la velocidad de la web influyen no pocos factores que vamos a poner al descubierto y tratar de hacer una buena optimización del diseño web. De todas formas tampoco pienso que deba ser una obsesión, si estás pensando en mejorar la velocidad de tu web para conseguir una mejor experiencia de usuario, adelante, este post es para ti, pero si lo que quieres es que cargue rápido, sólo para SEO, evidentemente te equivocas de post, el motivo de está afirmación es que la velocidad de carga sólo representa el 1% sobre el posicionamiento de tu página web, por tanto piensa en cubrir el resto de factores antes de pensar en una buena WPO, aunque quizá sea una buena estrategia hacer todo de forma coordinada.

Medir la velocidad web

Tenemos que pensar en que las herramientas para medir la velocidad web no son extremadamente exactas, si bien nos podemos hacer una idea bastante concreta de cómo está cargando la web, su velocidad y que factores impiden que sea más rápida, antes de empezar a sacar conclusiones mira desde donde hace el test la herramienta y piensa donde tienes localizado tu servidor, este factor, por rápido que sea el servidor que tengas contratado va a pesar en el resultado final, no es lo mismo medir con una herramienta que hace el test desde EEUU que una que hace el test desde Europa, la velocidad puede variar en más de un segundo, y cuando vamos a arañar velocidad milésima a milésima ese es un punto a tener muy en cuenta.

Personalmente utilizo tres herramientas para medir; cada una de ellas me da información substancial sobre los puntos que debo corregir en cada web que me llega para optimizar:

  • PageSpeed Insights

    • Cómo no, de Google, la pongo en primer lugar porque la información que aporta tiene mucho que ver en cómo Google está tratando nuestra página web. Hace un completo test tanto a nivel de recursos como de mejoras en código y te devuelve un paquete de sugerencias para llevar a cabo la optimización.
  • Pingdom

    • Mi favorita a la hora de trabajar con la velocidad de una web, te permite medir desde distintos servidores, con lo cual puedes resolver en parte los problemas que te explicaba antes. Si bien el principal atractivo es conocer la velocidad con la que la página web es descargada desde distintos puntos de test, la verdad es que una de las opciones que más me gusta es la que nos proporciona en la pestaña Performance grade y que te deja claro los aspectos que están menos optimizados y que pueden suponer una mejora en la velocidad, no te obsesiones con conseguir la máxima puntuación en todo (100), es imposible, por lo menos para mi.
  • GTmetrix

    • La que mayor cantidad de datos aporta y que te permite obtener un resultado más profundo para un buen análisis, la opción de pago es inmejorable y muy recomendada. Las comparaciones son odiosas, pero en este caso es necesario mencionar que GTmetrix toma los datos de Pagespeed como referencia y los compara con Yslow, la cantidad de consejos que aporta son de gran utilidad, sobr todo cuando ya has agotado la paciencia tratando de mejorar los puntos básicos.

Optimizar la velocidad de la web

Bien, ya hemos medido y tenemos un montón de sugerencias para mejorar la velocidad de nuestra página, ha llegado el momento de ponerse manos a la obra. Todos los programadores tenemos nuestros recursos; por lo tanto es complejo definir con exactitud todos los puntos que deberá contener la optimizacion de la velocidad de la página web; sin embargo hay una serie de recursos que siempre solemos dejar sin optimizar; para nosotros son de mucha utilidad durante la construcción de la página; pero una vez puesta en producción nos podemos ahorrar.

Cómo soy de los que antes dejaba un montón de comentarios y saltos en blanco en la página para definir los campos de trabajo; el primer punto para mejorar la carga es ordenar los recursos y eliminar los comentarios en la medida de lo posible; nos ahorraremos trabajo posterior.

velocidad web

  • Optimizar HTML

  • Lo apuntaba antes; eliminar los saltos de línea y todos aquellos comentarios que no sean realmente imprescindibles para la carga de la página.

  • Optimizar CSS

  • Vital para la velocidad de carga en nuestra web, las hojas de estilo que empleamos; acostumbran a tener también un montón de comentarios; trata de suprimirlos al máximo y verás como la mejora es importante. A su vez hay recursos que se pueden compartir y que no es necesario que ocupen una nueva hoja de estilos; trata de minificar al máximo el uso de más hojas de estilo de las estrictamente necesarias; si aún así, y por la complejidad del proyecto, se hace imprescindible el uso de varias hojas de estilo; quizá sea una buena idea subirlas a un CDN para que su carga sea mejor; independientemente del lugar desde el cual se descargue la página.

  • Optimizar JS

  • Los recursos de JavaScript son otro de esos puntos delicados a la hora de hacer una buena optimización de carga y velocidad; son recursos imprescindibles y por lo tanto es complicado hacer una depuración del contenido de estos recursos; lo mejor en la mayoría de los casos es aplazar su carga y hacer que se carguen al final; de esa forma la página es visible y utilizable desde el primer momento y los recursos que precisan de JS se mostraran al finalizar la carga. En este caso también he probado a enviar estos recursos a un CDN; no obstante los resultados de velocidad no han sido para tirar cohetes, así que me conformo con aplazarlos.

  • Optimizar imágenes

  • Nos gusta que nuestras imágenes tengan la mejor calidad posible; pero no siempre es necesario utilizar una imagen muy grande, si lo que se va a mostrar es una miniatura; mi consejo es utilizar el tamaño exacto según la ubicación de la imagen y así no tener jugando con un monton de recursos CSS para cambiar los tamaños de las imágenes; bastará con los necesarios para cada versión de explorador y dispositivo. Si a pesar de haber optimizado las imágenes, sigues con problemas de velocidad de carga en la web; una buena idea es cargar las imágenes en algun servidor CDN; seguro que te sorprende el resultado.

  • Activar Gzip

  • La compresión es otro de los puntos que hay que tener muy en cuenta en la velocidad de carga de una web; si comprimes los recursos que lo permiten, y tu servidor los sirve comprimidos; el tiempo de carga va a disminuir de forma sensible; hay muchas formas de comprimir con Gzip, yo ataco directamente al servidor para ello.

  • Mejorar los tiempos de respuesta del servidor

  • Evidentemente cada servidor es distinto y sus recursos también; en mi caso recomiendo que antes de contratar un Hosting, te asegures de que utiliza discos SSD y que dispone de la suficiente memoria RAM; diría que si además es un servidor Apache; lo ideal es enviar un comando DEFLATE con todo aquello que quieres que tenga prioridad en la carga. Si no tienes claro como hacerlo te recomiendo que consultes con el servidor de tu web y te ofrecerá la mejor opción según las características que tengas contratadas.

  • Carga de los recursos externos

  • Y aquí tenemos el talón de Aquiles de la velocidad; hoy todos utilizamos recursos sociales, de suscripción, recursos de remarketing; hasta aquí bien, utiliza los que quieras, pero recuerda que van a influir en la velocidad de carga; la decisión es fácil, si lo que buscas son conversiones necesitas algunos, bastantes, de estos recursos; entonces debes estar dispuesto a sacrificar algo de velocidad. Sin embargo si pensamos en el usuario, lo mejor será que utilices cuantos menos posible.

Optimizar WordPress

Optimizar WordPress para que presente una velocidad de carga aceptable y Google te asigne un Pagespeed razonable te obliga a introducir una serie de medidas las cuales no debemos olvidar a la hora de optimizar.

Optimizar WordPress, puede parecer un tanto complicado, pero la verdad es que en estos años como programador de diseño web he usado este popular CMS de forma recurrente en mis diseños, los resultados han ido mejorando, son actualmente muchos clientes los cuales nos solicitan información para hacer una correcta optimización de su página hecha con WordPress, es cierto que este mismo trabajo se puede hacer con otros CMS, iré introduciendo post sobre ellos en próximos post. Una buena WPO requiere de algunos requisitos los cuales voy a tratar de detallar con ejemplos, de todas maneras, no existe una única técnica, debes comprender el Core de WordPress para poder hacer una buena optimización, tener conocimientos de CSS y PhP, y sobre todo grandes dosis de paciencia, no hay un único estandard de optimización de WordPress.

Va a afectar mucho como se haya diseñado la web, el trabajo realizado con objetivo de posicionar esa web en buscadores, el número de categorías, la cantidad de html generado por la plantilla, y la cantidad de aplicaciones de terceros utilizadas, widgets de Facebook, Twitter y demás redes no vas a poder controlarlos de forma 100% efectiva, estas aplicaciones vienen con sus propias hojas de estilo y están pensadas para atraer público hacia redes sociales. Antes de empezar valora si realmente quieres lanzar público de tu web hacia las redes o justo lo contrario, una vez has tomado la decisión piensa si es realmente necesario usar estos widgets los cuales te van a ralentizar la carga en casi un segundo por widget, o si por el contrario quieres una web cargando a velocidades increibles. Piensa también en los usuarios de móvil, estos van a marcar las diferencias entre el éxito y el fracaso de tu web, un tiempo de carga superior a dos segundos en móvil es una barbaridad si tenemos en cuenta los tiempos de navegación de los usuarios de móvil, según las últimas tendencias nunca es superior al minuto de duración, por tanto si tenemos un minuto para conseguir del usuario de móvil la visualización del contenido e interactúe, cuanto más rápido presentemos el contenido, mucho mejor va a funcionar tu web y más conversiones vas a conseguir, ademas de rebajar la cantidad de recursos a optimizar.

Voy a tratar de que este no se convierta en un tutorial más para optimizar una web WordPress, mi intención es que con las instrucciones que te voy a aportar puedas, de forma sencilla y práctica llevar a cabo las modificaciones necesarias para optimizar WordPress con facilidad. En el tiempo que llevo realizando WPO para distintos CMS he ido creando una técnica la cual da excelentes resultados, y lo realmente importante es compartir la experiencia en beneficio de todos, he recibido mucha ayuda durante mi carrera profesional, ayuda desinteresada a la cual quiero corresponder con este post, para optimizar WordPress solo vas a necesitar unos pequeños conocimientos, nada extraordinario, pero si al final tienes alguna duda de como implementar estas mejoras que te voy a indicar, no dudes en comentarlo y sin duda te ayudaré en aquello que esté en mi mano. Optimizar una web WordPress no es ni ha de ser ningún secreto.

WordPress es, seguramente el CMS más popular a la hora de diseñar páginas web destinadas a blogs, en la actualidad, son multitud de programadores que han elegido esta plataforma para diseñar páginas web más complejas y ello requiere de algunos requisitos fundamentales, wordpress como CMS presenta, sobretodo en sus últimas versiones, algunas mejoras en el código las cuales ya permiten obtener algunos resultados mucho mejores que hace algunos años, no obstante no es solo wordpress quien interviene en la optimización, el uso excesivo de plugins, la utilización de plantillas no optimizadas y la gran variedad de widgets a presentar en pantalla hacen que, toda la optimización hecha sobre el código abierto pase prácticamente inadvertida y resulte muy complicado optimizar. Con este punto como partida vamos a ver algunas cuestiones a tener en cuenta antes de empezar a optimizar nuestra página hecha con wordpress. Hay que tener en cuenta a la hora de comprar una plantilla de WordPress y pensando en optimizar WordPress después, la cantidad de peticiones php hechas por la plantilla en cuestión al servidor, se puede comparar de forma fácil el número de peticiones editando el archivo functions.php de vuestra plantilla.

  1. ¿El tema elegido para tu web, está optimizado? Las templates de pago lo están casi todas, unas más y otras menos, pero la mayoría de las free presentan una serie de dificultades como exceso de js y css muy dificiles de controlar los cuales van a optimizar wordpressdificultar la posterior optimización. Optimizar WordPress no es cosa de milagros técnicos, si la base es mala nuestros esfuerzos serán vanos. Te recomiendo elegir una de las muchas template de pago que encontrarás en el mercado y que sin duda te harán la tarea de optimizar mucho más fácil.
  2. Plugins. ¿Son necesarios todos estos plugins instalados en tu web? Seguramente no, plantea seriamente cuales necesitas y cuales no, los que no utilizas no te conformes con desactivarlos, borralos y asegurate bien de no dejar rastros de esos plugins entre tus archivos en el Ftp.
  3. Aplicaciones de terceros. Aplicaciones como el muro de Facebook en nuestros sidebar o Footer, nuestro TL de Twitter y todos aquellos sujetos a la conexión a un servidor exterior ralentizan la carga de la página. Valora con detenimiento si quieres mostrarlos o prefieres mantener un enlace a tus redes sociales y que se allí donde se visaualice ese contenido. Esta información la expongo después de comprobar como en la mayoría de sitios web estas aplicaciones de terceros quedán estéticamente muy bien pero no aportan nada a la página, prácticamente nadie interactúa y, a modo de reflexión, si tu página tiene algún call to action, lo más probable quede desapercibido ante tal cantidad de información.
  4. Vamos a dar por supuesto que tu hosting es lo suficientemente veloz, si te planteas cambiarlo tenemos el mejor hosting al mejor precio, puedes comprobar nuestros precios y características

Optimizar Worpress para que tu web vuele.

En primer lugar para optimizar WordPress daremos por supuesto que todas tus imágenes están optimizadas para web, si no lo están os recomiendo crear una rutina con Photoshop y poder editar vuestra carpeta de Uploads de una sola vez.

El proceso es sencillo, descargas vía Ftp tu carpeta de Uploads (Wp-content -> Uploads), la copias a una carpeta nueva, es importante guardar la original ante posibles fallos para recuperar en caso necesario y tratas TODAS las imágenes con Photoshop o cualquier otro programa el cual pueda tener una opción de edición masiva.

Las vuelves a subir a la misma carpeta por FTP con la instrucción sobrescribir y ya tienes tus imágenes optimizadas.

Vamos a tomar como punto de partida para optimizar WordPress, Pagespeed y la herramienta de test de Pingdom y vamos a centrar el análisis en resultados para ordenador, más adelante veremos la optimización para móvil, aunque no difiere mucho.

Para ilustrar este ejemplo he instalado un WordPress limpio en un dominio ficticio al cual le he subido contenido ficticio también para mostrar una web coherente, en este caso una de las demo adjuntas al theme y aquí te muestro el primer resultado:

optimizar wordpress

optimizar1

De los resultados resaltados en rojo vamos a empezar con la optimización de imágenes, descargamos la carpeta uploads y copiamos a una nueva carpeta su contenido.

Nota: al optimizar las imágenes te va a convertir los archivos png en jpg, por tanto si no quieres que haga esta conversión solo copia a la nueva carpeta para optimizar las imágenes jpg. Puedes optimizar los archivos png con otras herramientas, a mi personalmente me gusta mucho para optimizar png la herramienta online de Tiny.com

Tras haber optimizado las imágenes el tiempo de carga ya ha disminuido y los elementos a reparar para optimizar también son menos. Si queréis optimizar aún más las imágenes os recomiendo el plugin Smush.it pero sinceramente ya la mejora va a ser escasa, sin embargo estoy utilizando actualmente el plugin Shortpixel y ha mejorado considerablemente.

Vamos a entrar de lleno a optimizar WordPress

Optimizar WordPress tiene algunos secretos más, se puede hacer con plugins de caché, en mi caso el favorito es W3 Total Cache, pero antes de empezar a instalar plugins, también le van a dar peso a la web, vamos a modificar algunas cosas a nivel de código:

Volvemos a conectarnos vía Ftp y editamos el archivo .htaccess, soy muy pesado, pero haced una copia del archivo original.

Si la instalación está limpia nuestro .htaccess ha de tener una apariencia como la que sigue:

#BEGIN WordPress

# BEGIN WordPress

RewriteEngine On

RewriteBase /

RewriteRule ^index\.php$ – [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

# END WordPress

A continuación seguimos avanzando en como optimizar WordPress, vamos a habilitar la compresión Gzip, esto hará que nuestros recursos se compriman y reduzcan el tiempo de carga. Se puede hacer con multitud de plugins pero después de muchas pruebas he optado por implementar este código directamente en htaccess para optimizar WordPress es muchísimo más efectivo.

El código para habilitar la compresión Gzip es el siguiente:

# BEGIN GZIP COMPRESSION

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^application/x-javascript.*

mod_gzip_item_exclude mime ^image/.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

# END GZIP COMPRESSION

Copiaremos este código justo después del cierre de WordPress en nuestro archivo .htacces (# END WordPress)

De ese modo cualquier modificación o actualización hecha en nuestro WordPress no va a afectar al código añadido.

A continuación a la hora de optimizar wordpress, y si nuestro servidor es Apache le aplico un instrucción deflate, para mejorar la compresión, es Apache quien prepara la respuesta de entrega al cliente en varias etapas. Esta parte se puede optimizar con distintas directivas las cuales trataremos en un próximo artículo y nos permite optimizar tanto la entrega en distintos navegadores que pudieran presentar problemas, así como definir el nivel de compresión.

El código quedaría así, lo copiamos a continuación del Gzip en nuestro archivo .htaccess

# BEGIN DEFLATE COMPRESSION

AddOutputFilterByType DEFLATE “application/atom+xml” \

“application/javascript” \

“application/json” \

“application/ld+json” \

“application/manifest+json” \

“application/rdf+xml” \

“application/rss+xml” \

“application/schema+json” \

“application/vnd.geo+json” \

“application/vnd.ms-fontobject” \

“application/x-font-ttf” \

“application/x-javascript” \

“application/x-web-app-manifest+json” \

“application/xhtml+xml” \

“application/xml” \

“font/eot” \

“font/opentype” \

“image/bmp” \

“image/svg+xml” \

“image/vnd.microsoft.icon” \

“image/x-icon” \

“text/cache-manifest” \

“text/css” \

“text/html” \

“text/javascript” \

“text/plain” \

“text/vcard” \

“text/vnd.rim.location.xloc” \

“text/vtt” \

“text/x-component” \

“text/x-cross-domain-policy” \

“text/xml”

# END DEFLATE COMPRESSION#

Con estos tres sencillos pasos para optimizar WordPress los resultados ya empiezan a ser interesantes:

  • Hemos optimizado las imágenes de nuestro WordPress
  • Hemos habilitado la compresión Gzip para optimizar la entrega de recursos

optimizar wordpress

optimizar2-post-gzip

Y aún no hemos rebajado la cache ni configurado ningún plugin, veamos los resultados:

Ya tenemos nuestra web cargando en 6 segundos, pero eso sigue siendo demasiado, aun queda bastante por optimizar.

Vamos a optimizar WordPress más aún, para ello instalamos y activamos el plugin W3 Total Cache.

Nota: este plugin tiene multitud de opciones, vamos a poner en marcha las necesarias y después entraremos en un apartado más avanzado.

  1. Vamos a la pestaña de ajustes generales y activamos las siguientes opciones:
    1. Page cache
    2. Minify, en esta sección podemos optar por dos modos, automático o manual, yo prefiero trabajar en modo manual, nos permite decidir que recursos js y css vamos a minificar. El método de cache lo vamos a dejar en Disk y el resto de opciones de este apartado tal y como vienen por defecto.
    3. Object cache, si nuestro site va a ser muy dinámico, con muchos contenidos cambiantes en el blog etc. Es recomendable activarlo para optimizar mejor.
    4. Browser cache, este punto es uno de los más críticos, va a ser quien nos permita decidir qué y cuando el servidor va a almacenar y optimizar la entrega de páginas en cache
    5. El resto de opciones las dejamos tal y como vienen por defecto, salvo extrañas excepciones no vamos a necesitar activarlos
  2. Guardamos todos los cambios, y vaciamos la cache, primero la minify y después la de página. Una vez hecho esto volvemos a lanzar el test en las dos herramientas. (es recomendable para ver de forma óptima vaciar también la cache del navegador donde estás haciendo el test).

Después de esto aun no podemos esperar resultados mucho mejores a los anteriores, apenas hemos empezado a configurar el plugin, vamos al siguiente paso para optimizar wordpress.

Pinchamos en la pestaña Minify, como recordareis, seleccionamos la configuración “manual” por tanto vamos a ver como se hace, por ahora la pestaña Page cache la dejamos como viene por defecto.

La pestaña Minify presenta multitud de opciones, en primer lugar vamos a la parte de HTML & XML y activamos:

  • HTML minify settings
  • Inline CSS minificatión
  • Line break removal, este punto hará que las líneas en blanco entre código desaparezcan, de modo que el código aparezca más compacto y por tanto la página se sirva mucho más rápidamente.

Guardamos los cambios y vaciamos la cache

Nota: Durante los ajustes de la pestaña Minify es recomendable además de ver los resultados de los test comprobar la funcionalidad de la página, hay determinados recursos los cuales pueden comportarse de forma extraña dando algunos errores de visualización y provocar errores en lugar de optimizar WordPress adecuadamente.

Vamos a entrar de lleno a optimizar los recursos de js y CSS, aquí el plugin nos “ayuda” a elegir, aunque esta ayuda no es del todo confiable, los recursos que nos va a mostrar tienen varias combinaciones posibles y es necesario ir probando con el objetivo de saber cual es la que mejor se ajusta a nuestra plantilla y a nuestros contenidos, para obtener tan preciada ayuda pulsaremos en el botón help, esto nos mostrará un listado de recursos js y CSS disponibles a fin y efecto de ser minificados. A partir de aquí es donde empiezan las prueba – error, mi consejo es activar todos los js excepto aquellos los cuales hacen referencia a los slider para asegurar que la primera parte de la página carga adecuadamente y rápido.

En el apartado de CSS exactamente lo mismo, en principio y como primera prueba activaremos todos los recursos CSS excepto los slider y los que hacen referencia a las fuentes, al ser (normalmente) aplicaciones de terceros tipo Google fonts o Fonts Awesome al minimizarlas el efecto es un desastre en nuestros contenidos. Si no tenéis más remedio que minimizar estos archivos os aconsejo cargar vuestras propias fuentes y apuntar el js a la carpeta correspondiente. Personalmente tampoco acostumbro a incluir la hoja de estilos general de la plantilla, prefiero optimizarla manualmente evitando al máximo los comentarios del desarrollador y los saltos en blanco, esto ya es opción avanzada

Aquí os aconsejo hacer pruebas arrastrando arriba y abajo los recursos para ver cuales son los mejores resultados, os llevará un cierto tiempo, pero una vez tengáis una estructura válida seguramente os valga para multitud de optimizaciones. Es necesario tener en cuenta el orden en el cual se cargan los recursos con objetivo de optimizarlos según las peticiones php y de esa forma optimizar por orden también.

Guardamos los cambios y vaciamos las distintas cache nuevamente.

optimizar wordpress

final-pagespeed1

Como vemos en unos pocos pasos tenemos nuestra página prácticamente optimizada, ahora ya podemos entrar a depurar según los errores mostrados cómo aconsejables de corregir.

  1. Optimización de imágenes, como hemos visto en el primer paso para optimizar WordPress, una de las vertientes principales es optimizar las imágenes, como solo hemos optimizado las jpg, ahora se trata de reducir las imágenes png las cuales por necesidad tengamos en nuestra web, vamos a instalar el plugin Smush it, este plugin puede funcionar de forma automática o manual, os recomiendo el modo automático de esa forma no os tendréis que preocupar de la reducción de tamaño de imágenes en el futuro, tal y como las vayáis cargando el plugin realizará la optimización. Activamos el plugin y vamos a la pestaña de entradas donde encontramos la pestaña WP Smush, clicamos sobre la opción de comprimir todas las imágenes y nos preparamos una taza de café, el plugin tardará más o menos en función del número de imágenes contenidas en nuestra web.

Vaciamos la cache y comprobamos el resultado:

resultado-final1ping

optimizar wordpress

Obviamente podemos trabajar hasta dejar el resultado próximo a 90, pero pienso que con el tutorial no os será dificil optimizar WordPress y que vuestra web vuele.

Hasta aquí hemos visto como optimizar WordPress y conseguir excelentes resultados de carga, hay variables las cuales no podemos controlar y a veces es necesario volver sobre nuestros pasos para completar el proceso de optimización de WordPress, si hemos tenido en cuenta hacer las correspondientes copias de seguridad bastará con restaurar la copia y volveremos a estar como al inicio, a modo de recomendación final voy a añadir que debemos hacer distintas pruebas de optimización y no es necesario obsesionarse con los resultados a la primera, aveces una buena optimización de wordpress lleva muchas horas de trabajo y es aconsejable dejar la labor de optimizar y retomarla en otro momento, cuando nos atascamos en configuraciones cómo la de W3 total caché acabamos empeorando las cosas, por tanto si consigues una buena optimización guarda un backup de esa optimización para probarlas cuando tengas que optimizar otro WordPress, seguramente deberás hacer modificaciones pero la mayoría de recursos te van a servir. Optimizar WordPress no es sencillo las primeras veces, una vez le cojas el procedimiento el resto de tareas de optimizar otras web hechas con WordPress va a ser sumamente más simple, se trata de empezar y hacer muchas pruebas hasta conseguir la optimización perfecta.

Ahora os toca a vosotros optimizar WordPress, y si os apetece, dejad vuestro comentario sobre vuestra experiencia al optimizar WordPress.

Espero os resulte útil.

Solicita información sobre los servicios optimización web

Ayúdame a optimizar WordPress

Teléfono (opcional)

Si lo prefieres contactaremos por email (necesario)

Tu página web actual

¿Qué tipo de información necesitas?

¿Necesitas aportar algún detalle?

He leido y acepto la información sobre política de privacidad

Un último punto para usuarios avanzados; recuerda que todas las peticiones PHP que realiza tu página web ralentizan la velocidad de carga; por lo tanto, trata de resumir al máximo el número de peticiones al servidor para que este tiempo se reduzca.

Seguramente hay otros puntos para mejorar la velocidad de una web; pero en este post lo que trato es de dar luz sobre aquellos puntos que más influyen en el SEO; de todas formas cada caso es distinto y por lo tanto; si necesitas ayuda estaremos encantados en Jardín de Ideas de ayudarte a optimizar tu página web; te aseguramos los mejores resultados al mejor precio posible.

Rating: 5.0. From 53 votes.
Please wait...
2017-05-19T07:40:02+00:00

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies