Como optimizar la velocidad de carga web de tu wordpress

 In Analitica Web, Desarrollo Web, Wordpress

Que tal amigos de cobde.com, hoy hablaremos de un tema muy importante y esencial en muchos caso dentro del mundo del blogging, como optimizar la velocidad de carga de tu sitio web.

El mundo del blogging es cada vez más una realidad en nuevos países como aquí en Perú, mi patria, cuando comenzamos e incluso cuando tenemos un tiempo en internet aprendemos muchas cosas, sabemos acerca de difusión de contenidos, aprendemos algo de diseño, redes sociales e incluso SEO, pero muchos solemos descuidar algo muy importante y en muchos casos determinante tanto para el SEO como para conseguir una buena experiencia de nuestros visitantes, la velocidad de carga web.

Siguiendo con la serie de artículos de esta temporada ya me tocaba hacer este post, claro claro le estuve dando vueltas a la idea pero no me daba tiempo entre otras cosas por fin llego el día 😀 . La temática de hoy está enfocada a mejorar cada uno de los aspectos modificables que influirán de forma positiva en la velocidad de carga de tu sitio o tu blog wordpress

I. ¿Por qué optimizar la velocidad de carga de mi wordpress?

Por qué optimizar la velocidad de mi wordpressHay muchas razones por las que esta debería ser una de tus prioridades al momento de trabajar tu blog o sitio wordpress, comenzaremos con el aspecto SEO no sé si lo sepas mi amigo pero en SEO la velocidad de carga de un sitio es uno de los factores que influye en el posicionamiento web, te recomiendo personalmente que tengas como objetivo mínimo que tu web cargue en menos de 2 segundos y si puede ser menos de 1s. Mucho mejor.

[Tweet “Cada segundo cuenta, aprendiendo a optimizar la velocidad de mi wordpress”]

Por otro lado debes tener en cuenta que el tiempo de carga es una parte importante en la experiencia del usuario, un visitante optara por cerrar tu web si tarda mucho en cargar por mas chula que esté, hoy en día funciona así de simple, lamentablemente muchas veces en búsqueda de un diseño más bonito terminamos por perjudicar este aspecto.

Esto significa que si no llegan a un punto de equilibrio entre estética y funcionalidad podrías perder tráfico web, clientes, compradores y posibles aliados estratégicos. Si tienes un blog, una tienda virtual, una agencia online o cualquier otro tipo de proyecto online SERIO debes considerar optimizar tu velocidad de carga web.

II. Antes de comenzar

Antes de comenzar a mejorar tu web y dejarla PRO vamos a ver algunos aspectos que son igualmente importantes.

a. Hablemos del Hosting

hostingPrimero que nada estoy en la fase en la que soy un fanático de wordpress, creo que todo lo necesario esta aquí no se puede pedir más ¿no? jeje, seguro alguien por aquí estar criticándome por no hablar de otros gestores de contenido.

En fin, toda la optimización está enfocada a tu sitio web wordpress, blog, pagina empresaria, lo que sea.

Hay dos cosas que influyen en la velocidad de carga de tu web, una está en la parte del servidor donde está alojado tu sitio y la otra parte está en la estructura de tu web, con respecto a la primera (hosting) puedes mejorar la velocidad carga considerablemente si contratas un servicio de servidor dedicado, pero todos sabemos que cuando inicias no va al caso estar pagando 200$ a 350$ mensuales por un sitio que no genera ingresos, así que por ahora lo dejaremos así

Seamos realistas con el hosting (servidor donde estará alojado tu sitio wordpress) que puedes usar para comenzar con pie derecho, entre estos tenemos a webempresa y hostgator(el que uso por ahora) y Raiola Networks(VPS barato :D), el precio de estos hostings es modesto comenzando desde los 5$ mensuales aproximadamente, soportaran una buena cantidad de tráfico, buena calidad de atención y velocidad de carga para tu sitio wordpress que está comenzando 😀 , valen la pena hasta que puedas invertir en un servidor VPS o dedicado

Con respecto a la estructura, las principales variables que influyen son, las imágenes pesadas, plugins que podrías causar conflictos con tu web, código irrelevante, información multimedia entre otros, ahora nos enfocaremos en arreglar cada uno de estos aspectos y más en detalle.

b. Herramientas para optimizar la velocidad de carga web

Ahora veremos algunas herramientas muy recomendadas para que puedas comenzar a analizar y optimizar la velocidad de carga de tu web worpdress 😀

google plagespeedb.1 Google PageSpeed Insights, Una poderosa herramienta que he descubierto hace poco, cabe decir que como es de google me inspira aún más confianza, al ingresar la URL de tu web inicia el análisis y la herramienta te mostrara varias secciones, entre ellas un resumen de las sugerencias a mejorar en tu web tanto para móvil como para la velocidad de carga web en ordenadores.

Lo genial de esta herramienta es que te muestra todo en detalle y como plus las formas de corregir cada una de las observaciones que hace.

pingdom toolsb.2 Pingdom tools, Esta herramienta es casi completa, con ella puedes analizar la velocidad de carga de cada uno de los componentes de tu web en detalle, dándote al final del análisis el tiempo total de carga de tu web.

Supongamos que en tu wordpress hay un plugin o una imagen que pese o cree conflictos y que haga que tu página tarde más en cargar, tomándote tu tiempo podrás saber exactamente cuál es la causa e ir solucionando, a mi parecer una de las herramientas más útiles a la hora de optimizar la velocidad de carga de tu web wordpress.

[Tweet “Con estas 4 herramientas puede conseguir un informe completo de la velocidad de carga web”]

gtmetrixb.3 GTMetrix, Esta herramienta tiene un sistema de calificaciones en cascada desde cero hasta cien, de esta forma evalua la velocidad de carga web, en el caso de tener alguno de los ítems de tu web una calificación baja significa que requiere optimización y si desglosas cada ítem te dará aún más detalles de que mejorar.

P3 (Plugin Performance Profiler)b.4 P3 (Plugin Performance Profiler), Hay infinidades de plugins en la red, muchos definitivamente útiles y otros sin lugar a dudas un fiasco, seguro te preguntaras ¿Cómo saber que plugins son los adecuados?. Este P3 lo que hace es analizar cada uno de los plugins de tu sitio, la velocidad de carga de estos, si generan conflictos con tu wordpress, etc.

Te recomiendo mi lista de los mejores plugins wordpress para que sepas con cuales comenzar, la cual voy actualizando constantemente, una métrica en la cual me baso antes de aventurarme a usar nuevos es ver cuanta gente lo ha descargado, tal vez te ayude saberlo 😀 .

III. Optimizando la velocidad de carga de mi web, manos a la obra

Ahora te compartiré 6 formas para que optimices tu sitio web como los Pro.

1. Comencemos por las imágenes

velocidad de carga web - optimizando imagenesTodos sabemos que las imágenes son algo esencial para nuestro sitio, como suelen decir todo entra por los ojos ¿no? :D, un error muy común en las personas que inician en internet es tratar de poner demasiadas imágenes PESADAS en nuestro sito. Claro, tu sitio se verá genial pero ¿De qué sirve todo esto si va a demorar 10 segundos en cargar?, muchos simplemente decidirán cerrar la ventana de tu sitio

Considera bastante un equilibrio entre estética y funcionalidad, lo ideal sería que tu sitio cargue en menos de un segundo, busquemos eso 😀

Una métrica que he notado y que funciona bastante bien es usar imágenes que no pesen más de 150kb (para imágenes bien grandes), incluso si va a ser una imagen de aproximadamente 600 x 300 megapíxeles bastara con que pese 60kb, por otro lado he visto sitios que tienen videos que se auto reproducen al cargar, por ejemplo entre los slides de la homepage, a mi parecer esto hará más lenta aun la velocidad y preferiría no tenerlo en mi sitio, estoy optando algo no tan llamativo. Adivina cuánto pesa este pequeño video, 1 a 2 mb, no creo que merezca la pena sacrificar este tiempo de carga solo para que se vea más alucinante, te lo dejo a tu criterio mi amigo 😀

Procura usar las dimensiones ideales de acuerdo del tamaño real que se mostrara en tu web, no subas una imagen de 1000 x 500 pixeles si se mostrara en un tamaño de 300 x 150

Actualmente los formatos de imagen que más se ven son los .JPGE y los .PNG uno más útil de otro dependiendo del tipo de imagen, Por otro lado te recomiendo que tengas mucho cuidado con las imágenes .GIF o animadas, estas pueden llegar a pesar 5mb, analiza bien sus características antes de usarlas, debes aprender a poner en una balanza la practicidad vs la estética perfecta.

Entre las herramientas que puedes usar para optimizar las imágenes de tu wordpress tenemos: D

1.1 Photoshop, este programa me mola mucho porque puedo hacer lo que quiera con las imágenes que me encuentro por ahí, no solo eso al final cuando quiero guardar la imagen puedes escoger el formato de imagen, las dimensiones y la calidad de estas, lo cual se expresara en un peso más acorde a tu sitio.

1.2 TinyPNG (online), esta herramienta online es un compresor de imágenes, simplemente subes las imágenes y la herramienta hará su trabajo, la pérdida de calidad no se notara.

1.3 Compressnow (online), esta herramienta al igual que la anterior es un compresor de imágenes online, la facilidad que tiene es que tú puedes escoger o calibrar que tanto tamaño vas a reducir, me convence mucho más que la anterior

1.4 Compressor.io (online), otra herramienta de compresión, es parecida a TinyPNG, no notaras mucha diferencia luego de que se comprima tu imagen, solo ciertos cambios en algunos tonos pero nada notorio

1.5 Smush.it (plugin), uno de los plugins más conocidos y recomendados, un optimizador de imágenes que trabajara dentro de tu wordpress, puedes hacer una combinación de herramientas y primero usar las que son online para finalmente usar esta dentro de tu web y asi tener un efecto sobre las imágenes mucho mayor.

2. Usa plugins para acelerar tu wordpress

optimizando velocidad de carga web con plugins2.1 Plugins analizadores, bueno aquí hablaremos de P3 Plugin Performance Profiler, ya hemos hablado de para qué sirve más arriba pero aquí te aconsejare que no lo tengas siempre activado, solo actívalo cuando vaya a usarlo (hacer mantenimiento a tu web) es decir cada cierta temporada en que hayas instalado nuevos plugins y quieras sabes si valen la pena o no por la velocidad de carga.

2.2 Plugins de Cache para tu wordpress, algo casi esencial hoy en día es tener un plugin de cache en tu wordpress, la razón es simple con este tipo de plugins haces que tu sitio no tenga que cargar de nuevo toda tu página cada vez que la visitas ya que algunos de los elementos se guardaran en la memoria cache, de esta forma tu web cargara mucho más rápido.

[Tweet ” Los plugins de cache más recomendables son W3 Total Cache y ​WP Super Cache”]

Entre los plugins más recomendables están W3 Total Cache y ​WP Super Cache uno o el otro, ambos son geniales a su manera. Por otro lado hace un tiempo escribí un artículo de los 15 mejores plugins de seguridad wordpress donde mencionaba a wordfence security un plugin bastante útil que mantenía tu sitio protegido, el cual incluso venía con su cache incorporado 😀 podrías matar dos pajaros de un tiro ¿no crees?

2.3 Plugin optimizador de base de datos, aquí el protagonista es WP optimizer, el problema está en que con el tiempo la base de datos de tu wordpress puede ir degradándose, quedándose almacenadas revisiones, residuos de configuraciones de plugins que hayas instalado en el pasado, etc , este plugin lo que hace es limpia tu base de datos de todo esto

3. Activa la compresión Gzip

activar GzipCon esta opción conseguiremos una reducción de las peticiones en el servidor y por ende mejoraremos la velocidad de carga de nuestro wordpress, para esto tenemos dos opciones una que es usando un plugin como lo es W3 Total Cache, para lo cual si tienes instalado WP Super Cache tendrás que reemplazarlo por el anterior. He visto que muchas instalaciones wordpress con paginas asistentes traen consigo instalado a WP Super Cache si este es tu caso y no quieres cambiar nada entonces te queda la opción manual.

Para esto ve a > http://tudominio.com/wp-admin/options.php > Busca la palabra Gzip > Cambiar el valor “0” a “1“ > Guardar los cambios realizados y listo

4. Quitando algunas cosas

velocidad de carga web - eliminando lo que no sirveCuando llegas a cierto conocimiento en internet te das cuenta que hay algunas cosas que es mejor no tenerlas en tus sitio, por más bien que se vea, la razón es simple: no es práctico, es inútil y en muchos casos podría perjudicar tu velocidad de carga por ejemplo, entre estas tenemos:

4.1 Botones y cajas de fans o seguidores en redes sociales, me he dado cuenta de esto en las últimas semanas, los botones sociales o cajas de fans como por ejemplo en Facebook, Google plus, etc. se ven bien ¿no? Claro cuando un visitante llega y ve que hay varias personas siguiéndote, pero y si ahora nos fijamos en el otro aspecto, el retraso que pueden generar en la carga web ya que para mostrar estos números o datos deben hacer peticiones a las redes sociales en cuestión y por ende será tiempo en tu contra. Es así que este fin de semana los voy a quitar, creo que será lo mejor.

Claro claro muchos me diran que no, que si uso plugins y es y lo otro, pero veámoslo asi, si ya tienes popularidad o si tu contenido es bueno ¿hace falta poner cuantos fans tienes?, que tal si solo pones los iconos de tus redes sociales y listo, definitivamente los interesados en ti, le darán clic a estos iconos sociales y te seguirán desde la red social de su preferencia.

4.2 Cuidado con plugins que pueden ralentizar tu vida 😀 , Llegado cierto tiempo si no tenemos cuidado podríamos terminar inundándonos de plugins que ni usamos, para esto es bueno hacer un mantenimiento periódico e ir eliminando plugins que no son realmente necesarios, suele pasar que hay momentos en los cuales nos gustaría experimentar con nuevos plugins, el problema está que en algunos casos estos pueden causar problemas, conflictos con el template usado o simplemente causan una sobre carga y ralentización de nuestro sitio wordpress,

Entre los plugins con los que deberías tener cuidado están: Broken Link Checker, Google XML Sitemaps, Yet Another Related Posts Plugin, WP-PostViews y WordPress Popular Posts, seguro ahora por ahí alguien estará criticándome, claro yo no digo que estos plugins sean malos, en absoluto, el problema está en que si estas un servicio de hosting compartido (shared hosting), al alcanzar alto tráfico estos plugins pueden llegarte a consumir muchos recursos y ralentizar tu web así que úsalos con cuidado.

Ahora viene mi venganza jeje, hace un par de meses instale el plugin ShareThis en un sitio que tengo y te cuento que la experiencia fue desastrosa, el sitio en cuestión antes de esto tardaba aproximadamente 2 segundos en cargar y luego de la instalación este tiempo aumento a 6 segundos, incluso algunas veces 9, creo que hasta ahora no me he encontrado con un plugin así. No lo recomiendo para nada, lo siento pero esa mala experiencia tenía que compartirla ya que no me gustaría que alguien pase por lo mismo.

Por poco olvido esto, hace un mes más o menor también tuve un problema parecido con un plugin para captar suscriptores, claro yo de novato experimentando jajaja, en fin no recuerdo que plugin era pero si te pasa lo mismo haz lo que yo, borra todo rastro del mismo y busca alternativas, siempre habrá algo mejor.

4.3 Cuidado con publicidad, muchos de nosotros nos habremos decidido en cierto momento por poner publicidad a nuestro blog o sitio wordpress, con la finalidad de monetizarlo, te recomiendo analices muy bien el peso de las imágenes de los banners que pondrás ya que podría darse el caso de imágenes muy pesadas que lo veo raro pero podría pasar.

5. Template wordpress que usas.

velocidad de carga web - template wordpressEsto es un error muy común, yo lo cometía también, eso de instalar el témplate más chulo sin considerar nada más, y luego te das cuenta que tu wordpress se toma 10 segundos o más en cargar, ¿te suena de algo?. Es cierto que podemos enamorarnos de un template a primera vista pero debemos ver más allá.

Lamentablemente entre los themes gratuitos suele pasar, incluso en los de pago, por esto te recomiendo que para comenzar hagas una pequeña inversión en un template Premium(están aproximadamente 50 dólares), pero antes de esto te recomiendo le des una revisión a este post de cómo elegir la mejor plantilla de wordpress.

Una vez tengas una idea del template perfecto para ti, haz la inversión :D, por otro lado he visto que muchos recomiendan a Genesis Framework ya que las líneas de código qe lo conformas son mucho menores que el resto y por ende la velocidad de carga web de la plantilla con la que trabaja es más rápida. Particular mente aun no lo he probado así que no te aconsejare nada aunque podrías investigar y luego contarme por Facebook, Twitter, correo o en los comentarios 😀

6. Usa CloudFlare

velocidad de carga web - cloudflareJusto de esto hablaba con un amigo hace unos días, la verdad es que aún no lo uso aquí en cobde pero he recibido muy buenos comentarios al respecto.

La lógica de funcionamiento de esta CDN es simple, cloud flare es un cloud proxi que se pone entre los usuarios y tu web, está distribuida por todo el mundo así que obviamente mejorará la velocidad de carga web para tus visitantes ya que los datos o la información será cargara en sus ordenadores desde sitios más cercanos a ellos. Además claro que proporciona restricción y protección contra robots maliciosos, claro esos que simulan visitas o que solo tiene como objetivos agotar los recursos de un web objetivo.

Bueno amigo creo que esto es todo lo que puedo compartirte con respecto a la optimización de la velocidad de carga en tu web, estos días estuve hablando con algunos nuevos amigos por Facebook y se me ocurrió que podrían compartir sus consejos relacionados a la temática de este post así que demos paso a los invitados 😀

IV. Consejos Geniales de Personas Geniales 😀

Para hacer algo más completo tengo algunos invitados, personas geniales que he ido convirtiendo en mis contactos y espero que en el futuro amigos, los respeto y admiro, ellos tienen mucho más tiempo que yo en el mundo del blogging de seguro los conoces :D:

1. Jesus Pernas Alonso

jesus pernasCuando Juan Carlos me planteó la elección de un consejo para mejorar la velocidad de carga de una página en WordPress lo primero que pensé fue: “Pues lo mismo que cualquier otra página: lo importante es el usuario”.

Desde este punto de vista me vi tentado a explicar que lo importante no es el tiempo que tarda tu página en cargar, sino la forma en la que tu página carga y la experiencia de usuario que este proceso provoca.

Los que me han escuchado hablar de WPO me han oído repetir una y otra vez que yo prefiero una página que tarda 10 segundos en cargar completamente pero en la que el usuario tarda 0,5 seg. en poder interactuar que otra página que tarda 3,5 seg. pero que hasta que la página está cargada no se puede utilizar.

Desde este punto de vista tal vez debiera dar un consejo que explicase cómo cargar el css al principio, cargar los css con <link> y no con @import, cargar el java script al final o utilizar la carga asíncrona… pero hoy voy a dejar salir el SEO que llevo dentro y lo voy a enfocar desde el punto de vista de Google.

Lo que te voy a dar un consejo para conseguir un mejor TTFB (o Time To First Bite).

El Time To First Byte es el tiempo que el usuario tarda en recibir el primer byte en el navegador desde que solicita la carga de la página.

¿Por qué es tan importante el TTFB para el SEO?

Este dato es el que Google utiliza realmente para determinar si una página se carga rápido o no (tal y como demostró Moz en un exhaustivo experimento realizado a mediados de 2013)

El único motivo por el que seguramente Google utiliza el TTFB y no otro parámetro es porque este se puede medir sin depender de tantas variables como otros.

Una forma sencilla de conocer nuestro TTFB es utilizando la herramienta WebPageTest

img 1¿Qué podemos hacer para reducir el TTFB?

Bueno, pues aparte de escoger un servidor con suficientes recursos o usar un CDN, lo más inmediato y tal vez lo más sencillo es optimizar la base de datos sobre la que corre nuestro WordPress.

En nuestra base de datos de WP se van generando registros como pingbacks spam, o las revisiones del proceso de edición de nuestros posts que poco a poco van haciendo más pesada nuestra base de datos y esto afectará al TTFB

¿Cómo optimizamos la base de datos?

Pues te voy a mostrar dos formas de optimizar la base de datos de WordPress que harán que tu TTFB mejore bastante en algunas ocasiones.

1. La forma fácil

Modificando el archivo wp-config.php de WordPress y utilizando su función para reparar y optimizar la base de datos.

Lo primero que tenemos que hacer es agregar el siguiente código al final del archivo wp-config.php

define(‘WP_ALLOW_REPAIR’, true);

Una vez hecho esto accede a

http://TUSITIOWEB.COM/wp-admin/maint/repair.php

(obviamente sustituyendo TUSITIOWEB.COM por tu dominio), Ahora te aparecerá una página como esta en la que podrás reparar y optimizar tu base de datos.

img 22. La forma superfácil

..vale, he empezado por la forma complicada porque no soy muy partidario de sobrecargar nuestro WP con más plugins de los necesarios… pero también se puede hacer con plugins (por supuesto)

Así, que si eres de los que prefiere el camino fácil te aconsejaría el plugin WP-Optimize. En este vídeo de Webempresa explican de forma muy sencilla cómo utilizar este útil plugin.

Con este plugin no solo podemos hacer una limpieza y optimización de nuestra base de datos sino que también podemos automatizar el proceso para que se repita con cierta frecuencia. Realmente cómodo (pero con un plugin más 😉 )

2. Miguel Ángel Florido

velocidad de carga web - miguel floridoPor mi experiencia existen muchos mecanismos para mejorar y optimizar la velocidad de carga de una página web o Blog pero estos son los aspectos que considero claves;

1.- Servidor. Si piensas que da igual la elección de la empresa de hosting, estás muy equivocado, ya que es una decisión que afectará mucho a la velocidad de carga que tengamos.

Yo tengo mi Blog en Raiola Networks y puedo decir que son auténticos expertos en ofrecer hosting muy optimizados en velocidad de carga.

2.- CDN. Contar con un CDN puede ser de gran ayuda para mejorar la velocidad de carga y no por eso tenemos que desembolsar grandes cantidades de dinero. Por ejemplo, Amazon ofrece el CDN Cloudfront con el que vamos a tener 50 GB de transferencia el primer año, así que por qué no probarlo. Yo lo tengo en mi Blog y funciona genial.

3.- Comprimir y unificar javascript y css. Con toda seguridad es la parte más completa y técnica de hacer, por la sencilla razón de que puede generar incompatibilidades con alguno de los elementos que queremos unir. Del mismo modo retrasar la carga de los javascript también nos puede dar un plus de velocidad.

4.- El Theme o Plantilla elegida. Cuando vayas a elegir una plantilla, te recomiendo que le pases antes el page speed de Google a la versión demo antes de comprarla, y así te asegurarás que tienes una base que optimizar.

Cuando analices la versión online de una plantilla, un page speed por encima de 70 es un buen indicador.

5.- Optimizar la versión móvil. Por defecto, en la mayoría de plantillas la velocidad de carga no viene optimizada y es un aspecto fundamental si queremos que los usuarios móviles visiten nuestra página y tengan una buena experiencia de visita.

Te sugiero que hagas una simple prueba, calcula el tiempo que tarda tu página web desde un Smartphone y con conexión 3G, y luego piensa si tú mismo estarías ese tiempo esperando que se cargue cualquier otra página que normalmente consultes desde el móvil.

Bueno espero que estos 5 consejos te ayuden a mejorar la experiencia

Un gran agradecimiento a Jesus Pernas y Miguel Florido por la colaboración 😀 , bueno amigo lector esto fue todo por este post acerca de la velocidad de carga web, espero que toda esta información te sea de mucha utilidad, no olvides comentar y compartir este post dándole clic a los botones sociales que se muestran aquí abajo, también te invito a visitar los blogs de nuestros invitados :D, si quieres enterarte de lo último de cobde sígueme en las redes sociales, hasta la próxima.

 

Recent Posts
Showing 4 comments

Leave a Comment

Time limit is exhausted. Please reload CAPTCHA.

Envíanos un Mensaje

Envianos Un Correo con Tus Dudas aqui Mismo y te Responderemos lo mas rapido Posible. Juan:)

Not readable? Change text.

Start typing and press Enter to search