\u00bfC\u00f3mo probar la velocidad m\u00f3vil de tu sitio WordPress?<\/h2>\n\n\n\n
Hay muchos m\u00e9todos para probar la velocidad m\u00f3vil de tu sitio web. El que usamos es PageSpeed Insights<\/a> de Google. Todo lo que ten\u00e9s que hacer es pegar la URL de tu sitio y obtendr\u00e1s una puntuaci\u00f3n para el rendimiento (velocidad), la usabilidad, las mejores pr\u00e1cticas y el SEO. <\/p>\n\n\n\n Los resultados se separan en dos pesta\u00f1as, escritorio y m\u00f3vil, por lo que dependiendo de c\u00f3mo funcione tu sitio, pod\u00e9s obtener dos resultados muy diferentes. Si desplaz\u00e1s hacia abajo, encontrar\u00e1s algunas recomendaciones para mejoras, ayud\u00e1ndote a informar el proceso en adelante.<\/p>\n\n\n\n Por cierto, no creas que tu sitio es r\u00e1pido solo porque no tarda en cargar en tus dispositivos. Si frecuentemente visitas un sitio web, tu navegador guardar\u00e1 en cach\u00e9 los datos y los tendr\u00e1 listos para la pr\u00f3xima visita, reduciendo significativamente los tiempos de carga. Los usuarios que visitan tu sitio por primera vez tienen que cargarlo desde cero, incrementando el tiempo de espera.<\/p>\n\n\n\n Si la prueba devuelve una puntuaci\u00f3n de rendimiento por debajo de 90, considera aplicar las recomendaciones de PageSpeed Insights e intentar los siguientes m\u00e9todos para aumentar la velocidad de tu sitio WordPress.<\/p>\n\n\n\n Para mejorar el rendimiento de tu sitio de WordPress en todas las plataformas, primero deb\u00e9s actualizar los archivos centrales de WordPress y la versi\u00f3n de PHP. Las actualizaciones introducen parches de seguridad para vulnerabilidades conocidas y proporcionan nuevas funciones, estabilidad, mejoras de compatibilidad y, por supuesto, mejoras de rendimiento.<\/p>\n\n\n\n El c\u00f3digo optimizado, las correcciones de errores y las mejoras en el uso de la memoria aumentan la velocidad de tu sitio web.<\/p>\n\n\n\n Los temas determinan el dise\u00f1o, la disposici\u00f3n y la funcionalidad de un sitio web de WordPress al proporcionar una plantilla de c\u00f3mo funcionar\u00e1 con archivos PHP, CSS y JavaScript. La optimizaci\u00f3n de un tema influye en cu\u00e1n eficientemente funciona y depende de m\u00faltiples factores, entre ellos, lo ligero y eficiente que sea el c\u00f3digo, si contiene un marcado amigable para SEO, su compatibilidad con plugins populares de WordPress, y otras variables de rendimiento como la optimizaci\u00f3n de im\u00e1genes, mecanismos de almacenamiento en cach\u00e9 y m\u00e1s.<\/p>\n\n\n\n Por otro lado, el tema tambi\u00e9n debe ser responsive, o no clasificar\u00e1 tan bien en los motores de b\u00fasqueda. Un tema no responsive puede alejar a los usuarios, incluso si es muy r\u00e1pido.<\/p>\n\n\n\n La capacidad de respuesta depende de c\u00f3mo se adapta la p\u00e1gina para optimizar la experiencia del usuario en varios dispositivos, a menudo enfatizando el m\u00f3vil. Si est\u00e1s pensando en codificar un tema desde cero, estas son las seis claves para un tema de WordPress responsive que deb\u00e9s tener en cuenta:<\/p>\n\n\n\n Si no est\u00e1s del todo listo para codificar un tema, la alternativa m\u00e1s r\u00e1pida es licenciar un tema premium de alta calidad, cuyo costo var\u00eda entre 40 y 100 d\u00f3lares por una licencia permanente. Incluso pod\u00e9s compartir la licencia en todos los sitios de tu red multisite<\/a>.<\/p>\n\n\n\n Finalmente, pod\u00e9s contratar una agencia de WordPress<\/a> para crear un tema personalizado para tu sitio web. Esta es, de lejos, la opci\u00f3n m\u00e1s costosa, pero si quer\u00e9s que tu sitio disfrute de un rendimiento de calidad profesional y no ten\u00e9s el tiempo o las habilidades para hacerlo vos mismo, esta es la opci\u00f3n para vos.<\/p>\n\n\n\n Al elegir un hosting web de alto rendimiento, deb\u00e9s considerar cuatro factores principales: las necesidades de rendimiento de tu sitio, los planes de hosting web, las ubicaciones de los servidores y la tecnolog\u00eda del servidor.<\/p>\n\n\n\n Primero, deb\u00e9s determinar cu\u00e1n intensivo en recursos ser\u00e1 tu sitio<\/strong>. Para ello, deb\u00e9s explorar factores como la cantidad de p\u00e1ginas que contendr\u00e1, qu\u00e9 tan rico en contenido multimedia ser\u00e1 (videos, audio, animaciones y otros medios \u201cpesados\u201d), si necesitar\u00e1 funcionalidad de ecommerce, con qu\u00e9 frecuencia se actualizar\u00e1 el contenido y cu\u00e1ntos visitantes esper\u00e1s. Estas necesidades te ayudan a determinar tu plan de hosting web ideal para una velocidad \u00f3ptima. <\/p>\n\n\n\n Ahora es momento de explorar planes de hosting<\/strong> y ver cu\u00e1l se adapta mejor a tus necesidades. Los planes de hosting web m\u00e1s comunes son el hosting compartido (econ\u00f3mico pero con l\u00edmite de tr\u00e1fico bajo), el hosting en la nube (escalable y flexible, adecuado para tr\u00e1fico inconsistente), VPS hosting (una secci\u00f3n dedicada de un servidor compartido para mejor rendimiento), hosting dedicado (ideal para sitios grandes y complejos), y hosting gestionado de WordPress (hosting configurado especialmente para hosting, lo que lo hace de alto rendimiento pero tambi\u00e9n m\u00e1s costoso).<\/p>\n\n\n\n Finalmente, las ubicaciones y la tecnolog\u00eda del servidor <\/strong>tambi\u00e9n influencian el rendimiento del sitio. Idealmente, elegir\u00edas servidores que utilicen discos s\u00f3lidos (SSDs) y est\u00e9n cerca de la mayor parte de tu audiencia objetivo, minimizando el retraso por distancia.<\/p>\n\n\n\n Explorar todos estos factores y c\u00f3mo se ajustan a tu sitio puede llevar tiempo, pero valdr\u00e1 la pena en t\u00e9rminos de rendimiento.<\/p>\n\n\n\n El almacenamiento en cach\u00e9 de p\u00e1ginas de WordPress consiste en almacenar el HTML de una p\u00e1gina web y proporcionarlo directamente a los usuarios al solicitarlo en lugar de pasar por el proceso de generar din\u00e1micamente la p\u00e1gina. Saltarse el proceso de generar una p\u00e1gina web mejora el rendimiento de tu sitio web, especialmente cuando muchos usuarios solicitan p\u00e1ginas web simult\u00e1neamente.<\/p>\n\n\n\n Tambi\u00e9n pod\u00e9s almacenar en cach\u00e9 objetos como consultas a bases de datos y respuestas de API para mejorar a\u00fan m\u00e1s el rendimiento de tu sitio. Combinado con el almacenamiento en cach\u00e9 de p\u00e1ginas, pod\u00e9s reducir los tiempos de carga de tu sitio web a una fracci\u00f3n de lo que sol\u00edan ser.<\/p>\n\n\n\n Para obtener los beneficios de rendimiento del almacenamiento en cach\u00e9, podr\u00edas probar algunos de los plugins de cach\u00e9 m\u00e1s populares, como WP Rocket<\/a>, WP Super Cache<\/a>, y W3 Total Cache<\/a>. Adem\u00e1s, algunos hostings de WordPress como Bluehost y SiteGround proporcionan cach\u00e9 para WordPress.<\/p>\n\n\n\n Hotlinking<\/a>, enlace en l\u00ednea o piggybacking es cuando una p\u00e1gina web de un sitio incrusta un recurso (generalmente una imagen) de otra ubicaci\u00f3n al enlazarlo directamente. Eso significa que en lugar de descargar la imagen y alojarla en su propio servidor, el que hace hotlink muestra un recurso multimedia en su sitio que en realidad es proporcionado por un servidor externo, consumiendo su ancho de banda en el proceso.<\/p>\n\n\n\n Si el recurso incrustado forma parte de una p\u00e1gina con alto tr\u00e1fico, la carga excesiva en tu servidor podr\u00eda afectar el rendimiento hasta el punto de hacer que tu sitio se bloquee y potencialmente aumentar los costos de hosting.<\/p>\n\n\n\n La mejor forma de prevenir el hotlinking es agregar instrucciones a tu servidor para que sirva im\u00e1genes solo a un grupo espec\u00edfico de dominios. Este grupo incluye el dominio de tu sitio web y motores de b\u00fasqueda, para que a\u00fan puedan dirigir tr\u00e1fico org\u00e1nico a tu sitio a trav\u00e9s de la funci\u00f3n de b\u00fasqueda de im\u00e1genes.<\/p>\n\n\n\n En servidores Nginx, agreg\u00e1 el siguiente c\u00f3digo, reemplazando \u201ctunombre.com\u201d con tu dominio real:<\/p>\n\n\n\n En servidores Apache, agreg\u00e1 el siguiente c\u00f3digo, reemplazando \u201ctunombre.com\u201d con tu dominio real:<\/p>\n\n\n\n Una soluci\u00f3n alternativa es instalar un plugin de seguridad que incluya medidas contra el hotlinking. Un plugin popular con esta funci\u00f3n es All-In-One Security (AIOS) \u2013 Security and Firewall<\/a>. Una vez instalado y activado, and\u00e1 a WP Security<\/strong> > Firewall<\/strong> > Prevent Hotlinks<\/strong> para prevenir el hotlinking de im\u00e1genes. Luego marc\u00e1 la opci\u00f3n \u201cMarcar esto si quer\u00e9s prevenir el hotlinking de im\u00e1genes en tu sitio.\u201d<\/p>\n\n\n\n Los ataques de fuerza bruta<\/a> exitosos pueden llevar a infecciones de malware que empeoran el rendimiento y la experiencia del usuario con bloqueos y comportamiento no responsivo. Los ataques de fuerza bruta son un tema extenso que necesita de su propio art\u00edculo, pero ten\u00e9 en cuenta las siguientes medidas de seguridad si quer\u00e9s prevenirlos:<\/p>\n\n\n\n Las im\u00e1genes involucran a tu audiencia, pero deb\u00e9s equilibrar la calidad de imagen con el tama\u00f1o. Los mejores m\u00e9todos para optimizar el tama\u00f1o de la imagen mientras se conserva la calidad son:<\/p>\n\n\n\n Adem\u00e1s de optimizar im\u00e1genes, tambi\u00e9n deb\u00e9s estar atento a las im\u00e1genes no utilizadas que acumulan espacio innecesariamente. And\u00e1 a Medios <\/strong>> Biblioteca <\/strong>desde el panel de control de tu administraci\u00f3n para explorar tu biblioteca de medios y eliminar im\u00e1genes de publicaciones o p\u00e1ginas eliminadas y otras im\u00e1genes no utilizadas. Sin embargo, no seas demasiado liberal con esto, ya que podr\u00edas terminar eliminando im\u00e1genes que algunas publicaciones o p\u00e1ginas utilizan actualmente.<\/p>\n\n\n\n Los recursos que bloquean el renderizado son archivos CSS y JavaScript externos que impiden que una p\u00e1gina web se renderice o muestre contenido hasta que los archivos externos se carguen por completo. Tener recursos que bloquean el renderizado sin optimizar infla el tiempo de carga de tu p\u00e1gina y empeora la experiencia del usuario.<\/p>\n\n\n\n Para minimizar los recursos que bloquean el renderizado, primero debes identificar CSS y JS cr\u00edticos y no cr\u00edticos. Para ello, dirigite a la pesta\u00f1a Coverage de Chrome DevTools<\/a>. Cuando la p\u00e1gina se cargue, te dir\u00e1 cu\u00e1nta parte del c\u00f3digo est\u00e1 en uso. Hac\u00e9 clic en una URL para inspeccionar ese archivo en el panel Sources. <\/strong> <\/p>\n\n\n\n El c\u00f3digo JavaScript y CSS no cr\u00edtico aparece en rojo y el c\u00f3digo cr\u00edtico aparece en verde. Ya que identificaste el c\u00f3digo no cr\u00edtico, es hora de reducir el tama\u00f1o de tu p\u00e1gina y acelerar los tiempos de carga.<\/p>\n\n\n\n Tendr\u00e1s que revisar manualmente el c\u00f3digo JavaScript de tu sitio para eliminar elementos no cr\u00edticos. Durante el proceso, consider\u00e1 lo siguiente:<\/p>\n\n\n\n Reducir el peso o tama\u00f1o de tus p\u00e1ginas significa que los usuarios tienen que cargar recursos m\u00e1s livianos, reduciendo el tiempo de carga de la p\u00e1gina. Los m\u00e9todos principales para reducir el peso o tama\u00f1o de una p\u00e1gina son:<\/p>\n\n\n\n La carga diferida es cargar solo las im\u00e1genes que los usuarios pueden ver actualmente en sus pantallas. Esto es excelente para reducir el uso de ancho de banda, aumentar la velocidad del sitio, optimizar la puntuaci\u00f3n Largest Contentful Paint y potencialmente disminuir los costos de hosting, pero podr\u00eda empeorar la experiencia del usuario cuando hace un desplazamiento r\u00e1pido.<\/p>\n\n\n\n WordPress utiliza las caracter\u00edsticas de carga diferida del navegador para habilitar la carga diferida de forma predeterminada. Sin embargo, no todos los navegadores utilizan esta caracter\u00edstica, lo que lleva a una implementaci\u00f3n inconsistente. Por eso deb\u00e9s usar un plugin para implementarlo.<\/p>\n\n\n\n Image optimization & Lazy Load by Optimole<\/a>, Smush<\/a>, y a3 Lazy Load<\/a> son algunos de los plugins de carga diferida m\u00e1s populares. Adem\u00e1s de la carga diferida, ofrecen caracter\u00edsticas como degradar la calidad de la imagen al detectar redes lentas, almacenar im\u00e1genes en la nube y servirlas a trav\u00e9s de un CDN, detecci\u00f3n de tama\u00f1o de imagen incorrecto y m\u00e1s.<\/p>\n\n\n\n Una red de entrega de contenido (CDN) es una red de servidores distribuidos estrat\u00e9gicamente ubicados en diversas ubicaciones. Si tu sitio de WordPress est\u00e1 asociado con una CDN, el servidor de la red almacena su contenido (im\u00e1genes, archivos CSS y JavaScript, etc.) de forma distribuida, de modo que los usuarios que realizan solicitudes reciben respuestas del servidor m\u00e1s cercano a su ubicaci\u00f3n.<\/p>\n\n\n\n La cercan\u00eda f\u00edsica reduce el retraso, acelerando los tiempos de carga. Tu servidor tambi\u00e9n funcionar\u00e1 m\u00e1s r\u00e1pido porque la CDN est\u00e1 manejando una cantidad significativa de tr\u00e1fico.<\/p>\n\n\n\n Algunos de los proveedores de CDN para WordPress m\u00e1s populares incluyen Cloudflare<\/a>, BunnyCDN<\/a>, QUIC.cloud<\/a>, CloudFront<\/a>, y Google Cloud CDN<\/a>.<\/p>\n\n\n\n El tiempo hasta el primer byte (TTFB) se refiere al tiempo m\u00ednimo que lleva al primer byte de informaci\u00f3n llegar al navegador web del usuario desde el servidor del sitio web. Un TTFB largo da la impresi\u00f3n de que tu sitio es lento y empeora la experiencia del usuario.<\/p>\n\n\n\n![\"prueba](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/07\/wordpress-speed-1-1024x623.jpg\")
<\/figure>\n\n\n\n14 m\u00e9todos para aumentar la velocidad de tu sitio WordPress en m\u00f3viles<\/h2>\n\n\n\n
Actualiz\u00e1 tu versi\u00f3n de WordPress y PHP<\/h3>\n\n\n\n
![\"c\u00f3digo](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/07\/wordpress-mobile-speed-2-1024x743.jpg\")
<\/figure>\n\n\n\nUs\u00e1 un tema de WordPress optimizado y responsive<\/h3>\n\n\n\n
\n
Us\u00e1 un hosting web r\u00e1pido para WordPress<\/h3>\n\n\n\n
Us\u00e1 un plugin de cach\u00e9<\/h3>\n\n\n\n
![\"una](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/07\/wordpress-mobile-speed-3-1024x743.jpg\")
<\/figure>\n\n\n\nPrevenir el hotlinking<\/h3>\n\n\n\n
location ~ .(gif|png|jpeg|jpg|svg)$ {\n\n valid_referers none blocked ~.google. ~.bing. ~.yahoo. tunombre.com *.tunombre.com;\n\n if ($invalid_referer) {\n\n return 403;\n\n }\n\n}<\/code><\/pre>\n\n\n\nRewriteEngine on\n\nRewriteCond %{HTTP_REFERER} !^$\n\nRewriteCond %{HTTP_REFERER} !^http(s)?:\/\/(www.)?tunombre.com [NC]\n\nRewriteCond %{HTTP_REFERER} !^http(s)?:\/\/(www.)?google.com [NC]\n\nRewriteCond %{HTTP_REFERER} !^http(s)?:\/\/(www.)?bing.com [NC]\n\nRewriteCond %{HTTP_REFERER} !^http(s)?:\/\/(www.)?yahoo.com [NC]\n\nRewriteRule .(jpg|jpeg|png|gif|svg)$ - [F]<\/code><\/pre>\n\n\n\nPrevenir ataques de fuerza bruta<\/h3>\n\n\n\n
\n
Optimiz\u00e1 el tama\u00f1o de las im\u00e1genes para m\u00f3viles<\/h3>\n\n\n\n
\n
Elimin\u00e1 recursos que bloquean el renderizado<\/h3>\n\n\n\n
![\"alguien](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/07\/wordpress-mobile-speed-4-1024x743.jpg\")
<\/figure>\n\n\n\nC\u00f3digo JavaScript<\/h4>\n\n\n\n
\n
Estilos CSS<\/h4>\n\n\n\n
\n
Reduc\u00ed el peso de cada p\u00e1gina<\/h3>\n\n\n\n
\n
Implement\u00e1 \u201ccarga diferida\u201d (lazy loading)<\/h3>\n\n\n\n
Us\u00e1 una red de entrega de contenido (CDN)<\/h3>\n\n\n\n
![\"m\u00faltiples](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/07\/wordpress-speed-5-1024x743.jpg\")
<\/figure>\n\n\n\nReduc\u00ed el tiempo hasta el primer byte<\/h3>\n\n\n\n
![\"prueba](\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/07\/wordpress-mobile-speed-5.jpg\")
<\/figure>\n\n\n\n