Remarketingo

Optimizar la velocidad de carga WordPress [Guía definitiva]

Alin Barla
·
9 De 2020

Hoy te voy a enseñar todos los pasos para optimizar la velocidad de carga de tu sitio WordPress.

Y muy poca gente los conoce.

De hecho, estos pasos hicieron que Remarketingo consiguiera 100/100  en ambos, tanto Performancia como en Estructura en GTmetrix.

… y lograr tener una velocidad de carga de 415 milesimas de segundo ?.

Así que si estas cansado de leer los mismos consejos, este artículo te va a encantar.

Comenzemos.

De Velocidad de carga «Caracol» a velocidad «Supersonica»

Cuando construí mi primer sitio con WordPress y empecé a medir su velocidad de carga con herramientas como Google Speed Insights, GTmetrix y Pingdom Tools los resultados eran desastrosos.

La verdad es que ni supe por dónde empezar.

Así que busqué en Google: mejorar la velocidad de carga wordpress.

Tomé el primer resultado  de la SERP de Google y empecé a documentarme.

Que fue lo que encontré?

Nada concreto!

Para empezar, testé la velocidad de carga de esa misma página.

Primero con GTmetrix.

Después con Google Speed Insights (dispositivos móviles).

… y por fin con Pingdom Tools.

Y los resultados hablan por si mismos.

En pocas palabras recomendaban procesos muy generales como: tener un hosting super rápido, optimizar las imágenes, escoger un tema WordPress super ligero y super rápido, utilizar menos plugins posibles, vaciar periodicamente la papelera, activar la cache etc.

No digo que no sean importantes, pero si quieres llevar la velocidad de carga de tu sitio WordPress a otro nivel, no es suficiente.

Así que tomé todas las recomendaciones de Google Speed Insights una por una.

Y empecé a buscar fuentes fiables y a estudiar solo.

El Centro de la búsqueda de Google es un buen lugar para empezar.

Fue un largo proceso…

…pero al final aprendí como mejorar la velocidad de mi sitio WordPress de manera correcta.

En especifico, aprendí practicas que muy pocos saben y que para Google son muy importantes.

Te recomiendo que te tomes el tiempo necesario para poner en practica cada tip en esta guía y tu sitio WordPress pueda cargarse hasta 10 veces más rápido.

Y con esto vamos a entrar en el contenido.

Tip #1: Usa los fonts de sistema

Este es mi preferido.

Un estudio dirigido por MatchMetrics demuenstra que los fonts pueden afectar los tiempos de carga.

De hecho puede ser que hayas encontrado esta advertencia:

Cómo resolver la «Latencia de ruta crítica máxima»?

¡Muy sencillo!

En vez de dejar que el tema WordPress cargue fonts externos, obligamos que los fonts de nuetro sitio web sean los fonts nativos del dispositivo de aquel que visita nuestro sitio web.

Tendrás que abrir la Dashboard de WordPress > Apariencia > Personalizar:

CSS adicional:

Y añadir este codigo:

 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
 } 

… y clicar Publicar obviamente ?.

Así de sencillo.

#Tip 2: Desactivar los Dashicons en WordPress

De la serie Copia y Pega ? tenemos la desactivación de los Dashicons.

¿Que son los Dashicons?

Estos.

¿Por que desactivarlos?

Porque disminuyen la velocidad de carga de tu sitio.

⚠️ Atención! ⚠️ Desactivar los Dashicons puede hacer que tu sitio cambie el aspecto que tenía.

En alternativa a los dashicons te recomiendo el uso de los iconos SVG.

Esos sí que ayudarán a que tu blog cargue más rápido.

¿Cómo desactivar los dashicons en WordPress?

Primero hay que buscar y abrir el file functions.php de tu tema WordPress activo.

Se puede hacer de dos maneras (la primera es la más fácil).

1. Abrir functions.php de tu tema a traves del Escritorio WordPress:

En el menú del escritorio WordPress ir a Apariencia -> Editor de Temas:

Escoge el tema activo en tu sitio wordpress

Abre el file functions.php 

Algunos hosting no permiten la modifación de los archivos directamente desde el escritorio.

Así que aquí te dejo la segunda opción.

2. Abrir functions.php de tu tema atraves de cPanel:

Abre el cPanel del hosting de tu sitio WordPress y ve a File Manager

3. Abre la carpeta de instalación de tu sitio WordPress y abre wp-content

Después abre la carpeta -> themes

Abre la carpeta de tu tema activo (en nuestro caso remarketingo-child)

y busca el file functions.php

Si haz logrado abrir functions.php ya te pueden dar tu licenciatura en WordPress ?.

Si no…

Regresa cuando se te pase la cervecita ?.

Ahora, para desactivar los Dashicons en WordPress y mejorar la velocidad de carga WordPress, vas a tener que copiar y pegar el siguente código en functions.php

 add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
 function my_deregister_styles()    {
    //wp_deregister_style( 'amethyst-dashicons-style' );
    wp_deregister_style( 'dashicons' ); 
 } 

¿Dónde?

El lugar más indicado para no dañar nada es en la segunda línea del archivo, justo después de <?php

El último paso es guardar el archivo.

y…

voilá!

#Tip 3: Cargar el file JQuery desde los servidores de Google

¿Que es jQuery?

jQuery es una libreria de codigo Javascript que permite implementar funciones de interactividad y dinamicidad a tu sitio.

Según W3Techs, 77,2% de los sitios en el mundo usan jQuery.

Así que muy probablemente tu tema también usa jQuery.

El problema principal es que esta libreria es gigante y al cargarla puede disminuir la velocidad de carga de tu sitio.

¿Que hacer entonces?

No cargar jQuery directamente de tu tema.

Pedimos a Google que lo cargue desde el servidor más cercano geograficamente de la persona que visita nuestro sitio WordPress.

¿Cómo cargar jQuery desde los servidores Google?

Añadiendo este codigo a tu file functions.php:

 add_action('init', 'use_jquery_from_google')
 function use_jquery_from_google () {
                 if (is_admin()) {
                                return;
                 }
                 global $wp_scripts;
                 if (isset($wp_scripts->registered['jquery']->ver)) {
                                $ver = $wp_scripts->registered['jquery']->ver;
                 $ver = str_replace("-wp", "", $ver);
                 } else {
                                $ver = '1.12.4';
                 }
                 wp_deregister_script('jquery');
                 wp_register_script('jquery', "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", false, $ver);
 } 

Cargando jQuery desde los servidores de Google hará que tu sitio cargue mucho más rápido.

#Tip 4: Usar CDN

¿Que es una CDN?

Una CDN (Content Delivery Network) es una red de entrega de contenidos.

O sea…

Usando una CDN, las imágenes y otros contenidos estáticos, se van a cargar desde el servidor mas cercano de la persona que visita tu sitio.

Además de optimizar la velocidad de carga añade una capa extra de seguridad.

El  CDN que te recomiendo (es el que usamos en Remarketingo) es Cloudflare.

Cloudflare es uno de los mejores CDN y además tiene un plan completamente gratuito bastante generoso.

El proceso para usar CDN en tu sitio WordPress es muy sencillo.

¿Cómo añadir Cloudflare a tu sitio WordPress?

Tienes que crear una cuenta Cloudflare.

Añadir tu sitio

Escoger el plan gratuito

Y cambiar los nameserver de tu dominio con los nameservers que te da Cloudflare.

Este proceso depende mucho de donde registraste tu dominio.

En el caso de Remarketingo, en el mismo super hosting que tenemos.

Seleccionas la opción «Use custom nameservers» .

Y agregas los nameservers que Cloudflare te dio.

Después de cambiar los nameservers y guardar los cambios, regresa a Cloudflare y checa si se cambiaron.

Ahora tu sitio esta activo y la CDN Cloudflare funciona perfectamente.

Ahora puedes hacer todos los cambios que desees en Cloudflare para optimizar la velocidad de carga y otros factores.

#Tip 5: Usar la más reciente versión de PHP

¿Que es PHP?

PHP es el lenguaje de programación que WordPress usa para generar sus páginas.

Y Google requiere páginas cada vez más rápidas

Así que el lenguaje mismo tiene que evolucionar.

Con el team Remarketingo nos pusimos a analizar el puntaje Benchmark de cada versión de PHP.

¿La conclusión de nuestra análisis?

Mientras más reciente sea la versión PHP de tu sitio WordPress, más alta será la velocidad de carga de tu sitio.

¿Como cambiar la versión PHP en WordPress?

Muy sencillo.

Tendrás que abrir el cPanel de tu hosting.

Ir a Software -> Select PHP Version.

Y selccionar la mas reciente version de PHP disponible en tu hosting.

Este tip va a incrementar la velocidad de carga de tu sitio de manera instantanea.

#Tip 6: Usar los mejores plugins de optimización

Tengo muchos otros tips, pero ponerlos en practica requeriría conocimiento de lenguaje php y Javascript.

Pero no todos somo desarolladores web.

Así que…

Te voy a aconsejar 3 plugins que usamos en Remarketingo y van a optimizar la velocidad de carga WordPress de manera automatica.

El mejor plugin de optimización WP Rocket

Te lo digo de una vez…

Cuesta 49$ (USD)

Pero serán los mejores dolares que gastarás para tu sitio web.

Después de la instalación y activación  WP Rocket aplicará  en modo automático el 80% de las prácticas recomendadas.

Y para empezar es todo más que suficiente.

Tu blog empezará literalmente a volar.

Algunas caracteristicas que hacen de WP Rocketel mejor plugin de optimizacion WordPress:

Precarga de caché

El rastreador de WP Rocket simula una visita para precargar el caché. 

De este modo la indexación por los motores de búsqueda se mejora instantáneamente.

Compresión de archivos estáticos

WP Rocket reduce el tamaño de los archivos JavaScript, HTML y CSS mediante la minificación.

¡Archivos más ligeros = optimizar la velocidad de carga de tu sitio WordPress!

Lazy Load

Las imágenes se cargan solo cuando el visitante se desplaza hacia abajo en la página.

Está opción ayudara a optimizar la velocidad de carga WordPress.

Otras opciónes WP Rocket:

·         Almacenamiento en caché de la página

·         Precarga de caché

·         Precarga del mapa del sitio

·         Compresión GZIP

·         Almacenamiento en caché del navegador

·         Optimización de la base de datos

·         Optimización de fuentes de Google

·         Eliminar cadenas de consulta de recursos estáticos

·         Aplazar la carga de JS

·         Detección móvil

·         Compatibilidad con varios sitios 

Autoptimize

Autoptimize es un plugin de optimización WordPress completamente gratuito.

En Remarketingo usamos Autoptimize en paralelo con WP Rocket.

Y para nosotros funciona muy bien.

De hecho hemos activado la optimización de código Javascript

la optimizacion de codigo CSS

y la optimización de código HTML.

Imagify

Estamos viviendo una era en donde la representación visual es de fundamental importancia para el éxito de una página web.

Según httpArchive, las imágenes representan el 26,3 del tiempo total de carga de un sitio web.

Y si alguna vez te preocupó la velocidad de carga de tu sitio WordPress, muy probablemente has tenido que optimizar tus imágenes antes de subirlas.

Probablemente haz usado herramientas como Compressor.io, TinyPNG, ImageCompressor, Kraken etc.

Con Imagify todo esto no será más necesario.

Porque Imagify tiene dos funciones espectaculares:

1. Optimiza automaticamente las imágenes al subirlas (y las que tienes ya en el sitio)

y su plan gratuito es suficiente para un blog pequeño-medio.

2. Trasforma automaticamente cualquier formato que subas (.jpg, .png, .etc) en el mejor formato .webp.

Si el navegador del visitante no soporta el formato .webp le va a mostrar las imágenes en el formato original pero optimizadas.

Conclusión

Con estas acciones remarketingo pasó de velocidad de carga «Caracol» a velocidad «Supersonica».

Espero que esta guía para optimizar la velocidadWordPress te haya sido útil.

Ahora me gustarías saber de ti:

Conoces otros tips para optimizar la velocidad de carga de un sitio WordPress?

o…

Has obtenido resultado con estos tips?

Cualquiera que sea tu respuesta, me encantaría abrir un dialogo aquí abajo.

…y porqué no, ayudarte personalmente si lo necesitarás.

Paper airplane flying through the air, indicating a message being sent.

Más de +3.700 personas reciben mis consejos marketing

Recibe contenido marketing exclusivo que no encontrarás en el blog Remarketingo.

Loading...