Cómo mejorar velocidad de una pagina web en 11 pasos

Si tu web no carga rápido, el usuario no esperará y acudirá a la página de tu competencia, por eso voy a contarte como mejorar la velocidad de carga de una página web en 11 pasos

Dicen que el usuario no aguanta más de 2 segundos en abrir una página, esto es muy relativo ya que depende de lo que este buscando esa persona.

Lo que si es importante es que hagamos una optimización de velocidad web para mejorar el posicionamiento en Google y de esta manera aumentar la velocidad de carga del sitio.

Puedes creer que no es para tanto si dos, tres, diez o veinte personas no tienen paciencia para esperar a que cargue tu web, he de decirte que si es importante.

¿Y si esa persona que no ha querido esperar te hubiera comprado si tu web hubiera tenido una buena velocidad de carga? Estarías dejando en el aire a un posible usuario o comprador.

 

Sabes que Amazon deja de ganar miles de Euros cada vez que su página sube 0,1 segundos.

 

Amazón deja de ganar mucho dinero cuando su web se ralentiza, es por ello que Google insiste tanto en dar valor y rapidez  al usuario a la hora de valorar el posicionamiento web de una empresa, esto forma parte del Seo y es fundamental.

Google tiene que dedicar más recursos a las páginas mal optimizadas, el tiempo que las arañas de Google pierden en tu web pudiendo rastrear más sitios impiden que muestren resultados de mejor calidad, aunque tampoco hay que alarmarse.

 

Si quieres optimizar al máximo tu web lo ideal es que contrates a un Consultor SEO Profesional pero si quieres hacerlo tú mismo, te voy a dar los puntos esenciales para hacer un buen WPO (Web Performance Optimization) y que consigas mejorar la velocidad de carga de tu web y aumentes tu posicionamiento Seo.

 

Opciones básicas para mejorar la velocidad de una página web

Tienes que tener en cuenta que cada web es diferente por eso voy a mostrarte diferentes métodos para aumentar la velocidad de una web en WordPress basado en plugins 100% gratis

Para el ejemplo voy a mostrarte como una web que en su momento pesaba casi 8 segundos y mejoré muchísimo la velocidad de carga con resultados de 2,2 segundos (según la herramienta Gtmetix y menos de 1 segundo según la herramienta Pingdom test).

 

---

Leer: Cómo hacer un test de velocidad de una página web

---

 

Actualmente tuwebdecero carga mucho más rápido pero para el artículo quiero mostrarte diferentes formas de que aprendas a optimizar una web

 

 

• No hagas tanto caso a Page Speed Insights

Las puntuaciones de Pagespeed son muy estrictas, no te obsesiones con ellas y analiza tu sitio con otras herramientas como Pingdom o Gtmetrix para calcular la velocidad en internet de las páginas web.

La herramienta de PageSpeed Insights no analiza la velocidad real de tu página web, en realidad, lo que analiza es la optimización de los recursos de tu página. Su objetivo es el de ayudarte a hacer que la página sea ligera pero sobre todo fácil de rastrear, por eso es tan exigente en su test.

 

Google Page Speed puede incluso llegar a ralentizar tu web como le hagas caso.  No tiene sentido por ejemplo que te diga que tienes que meter Google Analtics en el head por ejemplo y luego decirte que ralentiza tan arriba.

Además No puedes hacerle caso si te pide que renuncies a ciertos aspectos que realmente no están ralentizando tu web y pueden estar generándote ingresos por ejemplo.

Piensa que habrá ocasiones en que tendrás que medir eventos de analytics o insertar en tu web el pixel de Facebook ads si quieres crear una campaña publicitaria y todo esto resta velocidad y Page Speed lo valorar muy mal

 

• ¿Plugin de pago o plugins gratuitos para mejorar la velocidad de carga?

 

¿Entonces, me olvido de este tutorial? NO, Wp Rocket va a ahorrarte muchas pruebas ya que simplemente instalándolo los valores de tu web van a aumentar sin tener que ir haciendo distintas tareas como las que vamos a ver.

Pero si quieres optimizar mucho la web sin gastar dinero se puede hacer como vas a poder ver. Inténtalo y si no lo consigues, valora comprar Wp Rocket.

¡Vamos a ello!

11 Pasos para mejorar la velocidad de página web

Vamos a ver paso a paso cómo conseguí bajar a 2,2 segundos una web pesada y todo con plugins gratuitos sin tener en su momento tanta idea como ahora .TUTORIAL PARA NOVATOS

En este video puedes ver el proceso y seguir todos los pasos y conocer los plugins que explico dentro del artículo.

 

 

Un buen Hosting es de vital importancia para mejorar la velocidad de carga

Un servidor de calidad es fundamental, de él va a depender en un porcentaje muy  alto la velocidad de tu sitio web.

Un mal servidor como 1and1 puede ser el primer lastre en la optimización de la velocidad de carga de tu web.

Si no quieres gastarte mucho opta por servidores económicos pero de calidad

 

Que debe tener un buen hosting para darnos rapidez en internet:

• El servidor a ser posible, debe estar en tu país o cerca de el, de esta manera el tiempo de respuesta será menor y los problemas relacionados con la conectividad de la red serán mucho más bajos.

• Es importante que el Hosting que uses cuente con discos SSD. El acceso a los datos de tu web será más rápido usando gracias a estos discos.

• Un hosting que tenga las últimas tecnologías a nivel servidor es muy importante.  Contar con la última versión de PHP.

 Asegúrate que tu hosting cuenta con la versión PHP última o penúltima y que esta activado por tu servidor o actívalo tu mismo desde su panel de control.

• Normalmente cuando contratas un servidor, este es compartido, es lo normal, pero tiene el inconveniente que cuando otro cliente que comparte contigo ese alojamiento, tenga un alto pico de visitas o un elevado consumo de recursos, la velocidad de tu web se podría ver afectada; para evitar esto es importante que tu hosting cuente con un sistema que genere departamentos para cada cliente (enjaulado de cuentas)

• Las imágenes son importantísimas como vamos a ver después, hay que reducirlas siempre al máximo antes de subirlas, esto le dará a tu web muchísima puntuación (es de los principales factores de velocidad), si tu hosting (como es el caso de Webempresa con su sistema imgOptimizer) lo tiene, optimizarás todavía más las imágenes subidas

• Aunque no te parezca que tiene que ver con la velocidad, el que un Hosting utilice cortafuegos para detectar el tráfico SPAM es importante. Tu web será más fluida ya que evitarás intentos de login innecesarios que acabarían retardando tu sitio.

 

Como ves son pequeños factores que ayudaran cada uno en su medida aportando un granito de velocidad.

Como siempre digo un poquito de cada cosa «hace un mucho».

 

Estos son algunos de los factores determinantes a la hora de elegir hosting que hará que juegues con ventaja respecto a tu competencia, si quieres saber más datos sobre webempresa y conocer porque deberías elegirlos como una buena opción de garantía para tu web puedes leer el artículo sobre el mejor hosting para wordpress

 

Si tienes un hosting malo, ya estás tardando en mudarte a uno de los mejores hosting para WordPress

 

Usa una plantilla rápida

Usar una plantilla con un buen código y optimizado es otro de los factores predeterminados para conseguir que tu wordpress sea rápido.

Shortcodes o sliders no hará otra cosa que sobrecargar el tema y pueden generar bloqueos de contenido con excesivo javascript

 

La solución a ese javascript es que cargue el contenido al final de la página o que lo hagan de forma asíncrona, para esto hay plugins que verás al final de artículo pero pueden crear problemas de visualización y no siempre son fáciles de optimizar.

 

Ten en cuenta que son muchos los datos que vas a ir insertando en tu sitio web, el que estos no generen «errores» en página harán que tu sitio fluya mucha mejor por eso todo lo que evites mejor.

Es muy normal optar por plantillas tematizadas pensando que es la mejor opción y estas normalmente llevan opciones innecesarias y pesadas. La mejor opción son las plantillas Multiproposito.

No caigas en la tentación de elegir un tema por su inclusión de demos, sin duda pueden aligerar la tarea al tomarlos como base pero la cantidad de recursos que consumen es enorme, imágenes, videos o plugins por defecto que harán que antes de meter contenido tu web ya este perdiendo valores de velocidad.

 

¿Te gustan las tipografías verdad? Ten en cuenta que las tipografías que la plantilla incluye y que se alojan en el servidor ralentizarán menos la web que las que son de google fonts, estas últimas realizan llamadas externas y salvo que las incluyas con código dentro del theme jugaran un poco en tu contra al optimizar la velocidad de la web.

 

Utiliza un plugin de Caché

 

El que se sirva toda la información de tu web rápido se consigue con un plugin de caché.

Tu web se mostrará mediante una copia sin tener que recurrir a servirla completa evitando así la carga innecesaria de recursos.

 

Con un plugin de Caché, cuando un usuario vuelve a visitar tu página no necesitará descargar esos ficheros de nuevo desde Internet, sino que los descarga de su propio navegador, con la consiguiente ganancia en velocidad.

 

Existen varios tipos de plugin de caché.

Wp Rocket como te he comentado al principio del post es el que uso en la actualidad y sin lugar a dudas el mejor plugin de caché. Si me pides consejo invertiría sin duda en él y te diría que lo compraras ahora mismo.

Yo hasta conocer Rocket he usado Wp supercache, es el que muestro en la optimización de este tutorial funciona realmente bien, aunque en algunos proyectos uso Wp Rocket y merece la pena, aunque como te digo, hay veces que depende del sitio, algunos plugins de caché funcionan mejor o peor.

Puedes ver cómo configurar este optimizador a través de esta Guía sobre Cómo configurar WP Supercache.

 

Los plugin de caché deberían reducir los archivos javascript y los archivos CSS para evitar hacer tantas peticiones al servidor y esto a veces se hace mal.

 

Puedes ver como te digo a través del enlace a la configuración de Wp Supercache las opciones que debes marcar, pero es importante que compruebes que tienes habilitada la opción compresión GZip (compress pages so they´re served more quickly to visitors)

De esta manera el contenido de tu sitio o blog se muestra comprimido y la página carga antes, además de ahorrar ancho de banda.

 

* En el punto 6 veremos otro plugin de caché que hace una optimización muy buena de CSS y Js.

 

Compresión Gzip desde el panel de control de tu hosting para mejorar la velocidad web

Como antes te he hablado de la importancia de un buen servidor, hay hosting que ofrecen una compresión en los archivos (Gzip). Esto lo que hace es comprimir la información que está en el servidor para servírsela al usuario de manera más rápida.

Esto se inyecta en el fichero .htaccess de tu directorio home y agiliza la carga de estos tipos de ficheros.

 

Para activarlo (en el caso de webempresa) puede solicitarlo o activarlo tu mismo de la siguiente manera (algunos hosting lo activan por defecto):

Accede al panel de control de tu hosting.

Para el ejemplo es Cpanel.

 

 

Haz clic en optimizar el sitio web.

En la siguiente pantalla señala «comprimir todo el contenido y después clic en actualizar configuración»

Haciendo esto, comprimirás el contenido de tu sitio web sirviendo la información más rápido.

 

 

 

Usa el plugin Wp Optimize

 

Este plugin Wp Optimize hace limpieza de tu base de datos eliminando datos innecesarios, spam, metadatos, elementos temporales, residuos…

Instalar y desinstalar plugins puede dejar suciedad en tu wordpress. Elimínalos con Wp Optimize y verás como mejorar la velocidad de tu sitio.

 

Aunque Wp Optimize los elimina, te recomiendo que desactives en la opción comentarios de tu wordpress los pingbacks y trackbacks, además de que evitarás el spam, será un puntito a favor de la velocidad.

Desactiva este plugin una vez lo uses, no consumirá recursos.

 

Estudia que plugins necesitas realmente

Estudia que plugins realmente no necesitas y elimínalos 

Ya he comentado en más de una ocasión que la sobrecarga de plugin no es buena para tu web.

Influye el peso da cada uno más que la cantidad que tengas.

 

He usado web con más de 25 plugins instalados y son webs más rápidas que otras que usan 10. Evita los plugins pesados.

En mi caso a pesar de que Sumome es un plugin wordpress de captación de suscriptores muy efectivo y tiene una barra lateral flotante de redes sociales muy usable, me dí cuenta que consumía cada vez más recursos,yo no hacía uso de más de la mitad de sus opciones, al final  he optado por eliminarlo.

Voy a mostrarte el aumento de velocidad al desinstalar el mismo

 

Para ello vamos a utilizar la herramienta de test de velocidad Gtmetrix para comprobar la velocidad de carga. Con esta herramienta podrás hacer test de velocidad gratis.

 

Aunque no es imprescindible, te recomiendo que para que el resultado del test sea mas efectivo, te registres con un email y contraseña,haciendo esto podrás marcar que el estudio se haga desde Londres en vez de Canada. Además haz el análisis en modo incognito

 

Archivos CSS y JavaScripts son factores negativos en la velocidad de tu web

 

Utiliza el plugin Autoptimize

 

Autoptimize es un plugin para optimizar el código HTML, Javascript y CSS, estos son llamadas de tu web y consumen recursos.

Autoptimize permite cachear todo este código optimizado para que no sea necesario cargarlo cada vez que un visitante acuda a tu página.

 

Su funcionamiento es muy sencillo, simplemente tienes que activar las siguientes opciones que aparecerán al hacer clic en opciones avanzadas(parte superior de plugin)

 

 

La reducción de la cantidad de archivos CSS y JS en cada carga traerá como consecuencia una gran diferencia en la velocidad de su página.

Google page speed es más sensible que Gtmetrix y aconseja tener el Css y Javascript en un servidor independiente. Esto lo hace Autoptimize, optimizar la entrega de css wordpress.

 

 

 

Las imágenes optimizadas son el principal motor de una buena velocidad

 

Reduce el peso de las imágenes al máximo

Las imágenes es el factor más importante de la valoración en lo test de velocidad. El que las imágenes pesen poco, va a marcar el tanto por ciento más alto del mejor o peor rendimiento de tu web.

• Si usas Sliders o multitud de imágenes subidas sin reducción, afectará mucho a la velocidad de tu web, hay proyectos en los que el cliente los quiere para su webs ya que siguen siendo visuales pero hay que saber que consumen muchos recursos.

• Tienes que subir a tu wordpress  las imágenes con las dimensiones idóneas, existen page buider que pueden servir la imagen escalada, la reducción aunque represente menos tamaño siguen llamando a la imagen grande; hay que evitar esto pues reduce mucho el tiempo de carga.

En la actualidad el mejor Constructor por su personalización, opciones, ligereza y velocidad de carga es Elementor.

• No es nada recomendable cambiar el tamaño de las imágenes con CSS porque estaríamos enviando muchos bytes de forma innecesaria.

•  Reduce las imágenes todo lo posible antes de subirlas al servidor, si Webempresa u otro proveedor de hosting ofrece además esta opción de reducirlas más, mejor aún.

Para reducir las imágenes puedes leer el post del blog sobre cómo usar las imágenes en Wordpress en los que también hablo de los formatos en imágenes png, jpg etc..

 

 

• Puedes usar un plugin para optimizar imágenes wordpress como WP SMUSH, Este reducirá y hará un proceso para comprimir imágenes sin perder calidad aun mas de manera automática en tus fotos subidas en wordpress.

 

En mi caso uso en mi wordpress Wp smush, el funcionamiento es muy sencillo, simplemente haces clic en el botón y optimizará todas las imágenes que tiene tu web (al usar la versión gratuita, cada 50 imágenes se para y tienes que volver a darle al botón para continuar)

 

 

Elimina plugin sociales

Los plugin wordpress de redes sociales consumen mucho, hay que hacer que las páginas posean el menor número posible de JavaScripts y archivos CSS.

Evita usar botones sociales por toda la web, al ser unos elementos esenciales intenta ubicarlos sólo en los sitios que realmente necesites.

 

Si quieres usar las cajas de redes sociales usa los códigos que suministra cada red social, evita usar plugins que te dicen cuantos seguidores tienes en redes sociales, caras de los seguidores, comentarios de facebook etc, prescindir de esto subirás algo tu velocidad.

Observa los resultados tras eliminar el plugin new badge de google+

 

 

¿Es necesario usar CDN?

Los valores de yahoo en  Gtmetrix recomiendan que usemos CDN´S para subir sus valores (Red de Distribución de Contenidos).

Los CDN´s consisten en almacenar copias de los archivos que no necesitan actualización permanente en la caché de múltiples servidores externos repartidos geográficamente.

 

Los CDN´s pueden resultar muy beneficiosos cuando son correctamente utilizados (una tienda online con miles de productos por ejemplo o un sitio con mucho contenido multimedia) pero pueden ser muy malos si nuestro sitio esta mal configurado o no tiene demasiado contenido de peso.

Yo por el momento no lo uso ni mi hosting Webempresa me indica que debo usarlo.

 

Los resultados de velocidad sin usar CDN son muy buenos, y no es el definitivo como al final del post veremos.

 

Prueba de plugins de velocidad

A partir de este momento,he realizado configuraciones de caché, limpieza de nuevo de wp optimize etc…

Todos los plugins de los que te voy a hablarte, en el caso de Tu web de cero no ha mejorado los valores (si en la otra web explicada en el video del principio)

 

Estos plugins son muy útiles para  solventar el principal problema de reducción de valores CSS y Java y que debería aumentar los valores de tu web.

Errores como la carga del sitio usando plugins asincronos o para minificar el css son muy habituales.

 

Todos estos plugin nodeberian de producir problemas, yo los he probado todos, si tu web no se muestra correctamente solo tienes que eliminarlo y volverá a la normalidad. Aun así, haz siempre copia de seguridad antes

 

BJ Lazy Load

 

Otro plugin que vamos a probar es Bj Lazy load, este muestra tus imágenes según vas haciendo scroll, esto evitará tener que cargar imágenes innecesarias.

En mi caso no mejoro pero es un plugin a tener en cuenta ya que evita sobrecarga .

 

Utiliza varios plugins hasta que des con la tecla de la mejor velocidad

 

Speed Booster pack

 

Speed Booster pack es un plugin multiuso que hace las siguientes funciones:

• Elimina  el bloqueo de javascript y css en el contenido y mueve comandos al pie de página.

• Utiliza la carga asíncrona  para cargar la hoja de estilos principal y luego elegir qué archivos CSS no son vitales o que elementos de plugins o iconos  se cargarán después.

• Minimiza código de estilos CSS con el fin de moverlos al pie de página para mejorar la velocidad de carga de página.

Plugin Js&Css Scripts Optimizer

El plugin Js Css scripts optimizer

• Agrupa varios scripts en uno solo para minimizar las peticiones http y lo carga al final de la página.
• Agrupa los CSS y eliminia espacios, saltos etc…

La configuración es la siguiente:

 

En mi caso desconfiguraba igual que el plugin anterior la cabecera y el pie de página pero me llego a mostrar 96 y 90 en gtmetrix .

Simplemente si no funciona en tu caso lo desinstalas.

 

Wp Deferred JavaScripts

EL plugin Deferred javascripts

Este plugin difiere la carga de todos los archivos JavaScript

Es muy fácil ya que instalas y listo.

En mi caso no hizo nada

 

Async JavaScript

Asyncjavascript trabaja mano a mano con Autoptimize

La función de este plugin es definir qué CSS se carga y en qué momento para organizar el tráfico de este código en tu web.

 

Cuando el código javascript se carga en la cabecera de una página es necesario que termine de hacerlo antes de cargar el contenido visible de la web, esto produce un retraso en la muestra de ese contenido.

La sugerencia que da google es muy estricta, tener un archivo CSSpequeño al inicio o tener CSS como parte del documento y el resto de CSS cargarlo al final, la mayoría de los temas no la contemplan esto. Este plugin fuerza ese proceso.

 

La configuración es la siguiente:

 

Con esta herramienta de aceleración conseguí valores muy buenos en las pruebas de carga de velocidad pero eliminaba varios colores y detalles en el encabezado y colores en el marco que hacían la web un poco más «fea» pero funcionar funciona muy bien.

Puedes probar porque como te comento no todas las web generan los mismos problemas con el java y el CSS.

 

Remove query strings from static resources.

 

Remove query strings from static resources elimina los archivos CSS y JS.

Su misión es decirle a los navegadores que detengan el almacenamiento en caché y no muestren las cadenas de consulta.

 

Cache enabler-wordpress cache:

 

Cache enabler-wordpress cache  es una alternativa o complemento a Wp supercache.

Es una herramienta wordpress muy simple y recomendable si tu sitio tiene movimiento en el blog y no es muy cargada.

Minimiza recursos y se aplica a HTML, CSS y JavaScript para conseguir acelerar la descarga reduciendo el tamaño.

 

La configuración es tan simple como rellenar estos campos:

 

 

Resultado final Test de velocidad

Tras pasar por todos lo pasos y limpiar la cache, optimizar con wp optimize y solicitar una nueva reducción de imágenes a Webempresa los resultados de la prueba de velocidad para el wordpress de Tu web de cero fueron los siguientes:

 

 

 

Hasta aquí los 11 pasos para mejorar la velocidad web, como has podido ver, la velocidad es muy importante que este optimizada en tu sitio.

Una mejor usabilidad y una menor tasa de rebote por parte del usuario mejorará el Seo e indicará a Google que tu web es navegable tras acelerar la carga de páginas web.

 

Acelerar wordpress e intentar conseguir los mejores resultados para optimizar tu web al máximo es una tarea indispensable.

Realiza test de velocidad, observa lo errores y prueba estos pasos que te he indicado para ver si eres capaz de conseguir los mejores resultados para aumentar tu velocidad.

 

Cuéntame ¿Qué otros puntos consideras necesarios para que tu sitio sea veloz? ¿Usas otros plugins para formularios wordpress aparte de los de la lista que te he mostrado?  ¿Sabes otros métodos sobre cómo hacer que una página cargue más rápido?

¡Compártelo y déjame un comentario!