⬅ Volver a Páginas | 🏠 Inicio

Método Blogpocket Curso Web: Lección 5


Crea tú mism@ tu web de WordPress profesional y optimizada

Lección 5

Cómo hacer tus página web más rápida y optimizada para móviles

Con esta lección, conseguirás perfeccionar tu web profesional. Vas a aprender no solo a optimizar el rendimiento (disminuyendo al máximo la velocidad de carga de las páginas de tu web), sino también a realizar la optimización para móviles.

Con todo esto, comienzas a tener una configuración profesional en tu web, en pocos pasos y aplicando herramientas y procedimientos sencillos. La optimización del rendimiento de tu web (rapidez y optimización para móviles) comienza en el hosting, con su infraestructura hardware y software. Uno de los elementos destacable, si asumimos que nuestro hosting es SiteGround, es el sistema de mejora de las prestaciones denominado SuperCacher. Este sistema se ajusta desde un plugin que se instala automáticamente y que se llama SG Optimizer.

Módulos de esta lección

Aunque los servicios de alojamiento web recomendados son, además de SiteGround, GreenGeeks y Host-Fusion; en esta lección nos enfocaremos en el primero. Los vídeos te van a servir para cualquier hosting, porque SiteGround comenzó utilizando el panel de control denominado cPanel (antes de cambiar a SiteTools). Y tanto GreenGeeks como Host-Fusion emplean cPanel. Aquí tienes un Curso de GreenGeeks para más información.

1. Optimización del rendimiento

Y, sin más dilación, entremos en materia.

Coloquialmente denominado WPO (Optimización del Rendimiento Web, por sus siglas en inglés), esto consiste -en pocas palabras- en mejorar todo lo que sea posible la velocidad de carga de las páginas de tu web. Esto es muy importante porque cualquier demora de más de tres segundos en la velocidad de carga de cualquiera de las páginas implica una tasa mayor de abandonos por parte de tus usuarios. Si lo piensas detenidamente, eso supone también una pérdida de ganancias potenciales para tu negocio; fundamentalmente porque esos abandonos se convierten en clientes perdidos.

Así que uno de los pilares esenciales de la web profesional que estás construyendo tu mism@ es que esté optimizada en rendimiento al 100%. O, por lo menos, seguir un procedimiento que te facilite detectar y corregir rápidamente posibles alteraciones negativas de un rendimiento óptimo inicial. Ese procedimiento, base del Método Blogpocket consiste en los siguiente:

Objetivos

Para lograr estos ambiciosos objetivos, probablemente tengas a tener que renunciar a determinados recursos en tu web. Analiza bien si te compensa un recurso cuando detectas que penaliza el rendimiento.

Blogpocket.com, 20aniversario.blog y lanzatu.blog son buenos ejemplos de equilibrio entre uso de recursos externos y rendimiento. Por ejemplo, en los tres casos se ha prescindido de Google Analytics y de cualquier elemento que cargue cookies.

Recursos WPO: cómo optimizar el rendimiento

Los siguientes mecanismos son innegociables para optimizar una web con el Método Blogpocket:

En general, como mínimo, debes actuar dentro de los siguientes puntos:

Y, además de todo eso, te recuerdo lo fundamental:

Vídeo 1: Instalar WordPress y configurar SG Optimizer

En los dos siguientes vídetutoriales de esta lección, se emplea cPanel como herramienta de gestión dentro del hosting (SiteGround). Ten en cuenta que SiteGround está migrando todas sus cuentas de usuario a un área de cliente basado en Site Tools, un recurso propio mucho más eficiente y, sobre todo, orientado a sitios web. Para más información sobre este cambio y las diferencias con cPanel, acude a El nuevo área de clientes y Site Tools de SiteGround (comparación con cPanel).

En este vídeo, se revisa:

https://youtu.be/p_JC3FCtebc

ACCEDER AL VÍDEO

Ahora ya sabes instalar un sitio web inicial preparado para optimizarse en seguridad y rendimiento. Es seguro inicialmente, gracias al plugin Loginizer, arranca con el protocolo HTTPS y permite al usuario utilizar indistintamente Gutenberg o el editor clásico. Pero ya hemos visto en la lección 3 que Wordfence es la solución perfecta que sustituirá a Loginizer.

Debido al sistema en almacenamiento en caché propio de SiteGround (Supercacher) y a los ajustes iniciales mediante su plugin SG Optimizer, el rendimiento ya es excelente, aunque la plantilla por defecto (Twenty Nineteen) carece de imágenes y elementos que puedan penalizarlo.

Consideraciones al vídeo 1

Optimización final de SG Optimizer

En Blogpocket dedicamos muchas horas en el laboratorio a estresar los sistemas con el fin de lograr detectar los fallos de aplicaciones, recursos y herramientas.

El vídeo 1 ofrece soluciones que sirven en la mayoría de los casos. Pero si quieres obtener los mejores resultados, ten en cuenta lo siguiente:

El resto de opciones las activaremos con Autoptimize (ver siguiente vídeo y apartado)

Vídeo 2: Aplicar el WPO Pack, ideado en Blogpocket

Ya tenemos una plataforma sólida sobre la que empezar a personalizar nuestro sitio web o blog. Ahora es el momento de realizar los ajustes avanzados para optimizar 100 % el rendimiento.

En este segundo vídeo aprenderás:

https://youtu.be/LJU1iEyEhy8

ACCEDER AL VÍDEO

Con el segundo vídeo has aprendido a mejorar hasta el máximo el rendimiento de tu sitio web (o blog) de WordPress inicial.

El theme por defecto (Twenty Nineteen, Twenty Seventeen o el que proceda) es uno ligero y minimalista. Seguramente querrás personalizarlo añadiendo imágenes y más elementos. Ya sabes cómo hacerlo de acuerdo a la lección 4.

Recuerda que después de añadir cualquier elemento debes volver a ejecutar los tests de rendimiento y examinar el impacto en rendimiento producido. De esa manera, te será más fácil corregir los errores y penalizaciones.

Consideraciones al vídeo 2

Cuando se grabó este vídeo el WPO Pack incluía el plugin WPO Tweaks (de F.Tellado). Sin embargo, posteriormente llegamos a la conclusión de que la máxima optimización se conseguía solo combinando ajustes en SG Optimizer y Autoptimize.

Configuración fina de Autoptimize

Notas acerca de la eliminación de recursos

Con lo aprendido en este vídetutorial, ya posees una web profesional inicial, plenamente operativa y preparada para recibir tráfico y clientes potenciales.

Es un sitio web (o blog) rápido y optimizado para móviles; preparado para el SEO y seguro.

¿Y si mi hosting no es SiteGround?

Si tu hosting no es SiteGround y no posee un sistema de almacenamiento en caché propio, lo primero sería instalar el plugin GreenerWP y activar todas sus opciones.

Pero asegúrate de que no existe ese sistema de caché propio con su correspondiente plugin. Por ejemplo, en este artículo se muestra un ejemplo de un hosting que -en su momento- optimizaban muy bien las webs que alojaba mediante el sistema Lite Speed: Cómo configurar el plugin de WordPress LiteSpeed para Host-Fusion.

Repasemos una a una la lista de GreenerWP y veamos todas las posibilidades.

En resumen, para optimizar al máximo en un hosting que no sea SiteGround, puedes probar:

Anexo: Consideraciones sobre la traducción de themes y plugins

Puedes traducir un plugin manualmente con Poedit o Loco Translate. Ambos tienen la versión gratuita correspondiente. En el caso de Poedit, mediante una app de escritorio. Y en el caso de Loco, con un plugin.

Lo básico que debes saber para traducir un theme o plugin de WordPress

El mecanismo que nos brinda WordPress para traducir las cadenas de caracteres de un theme o plugin es muy sencillo. Las cadenas a traducir están en un archivo .po que debe proporcionar el desarrollador. Una vez traducido, se debe generar el correspondiente archivo .mo (una especie de compilación del archivo .po).

¿Dónde está el archivo .po? En wp-content/plugins/<plugin>/languages/

<plugin> es el nombre de la carpeta del plugin.

¿Dónde se debe alojar el archivo .mo? En wp-content/languages/plugins

Así de fácil.

Cómo traducir manualmente

Abres el archivo .po con Poedit y traduces una a una todas las cadenas de caracteres.

Con Loco es también muy fácil, seleccionando el plugin y creando una nueva traducción.

Una vez que esté todo traducido, guardas el .po y generas una traducción .mo.

Cómo traducir automáticamente

Traducir muchas cadenas de caracteres suele ser tedioso.

La solución es emplear un add-on de Loco. Estos son los plugins que debes instalar en tu WordPress:

Una vez con todo instalado, el proceso es sencillo:

Como se indicó al principio, el paso final es subir el archivo .mo a la carpeta wp-content/languages/plugins

Traducir un theme de Genesis

Traducir un theme no genesis con Loco sigue el mismo proceso que para un plugin.

Si el theme es un child de Genesis, servirá con seguir las siguientes instrucciones:

Descargar y actualizar las traducciones del tema principal de Genesis

Si su sitio de WordPress utiliza un idioma de sitio que no es el inglés de EE. UU. En Configuración ? General , WordPress ahora le preguntará si las traducciones del tema principal de Genesis están disponibles para los idiomas instalados.

Para descargar las traducciones de Génesis después de actualizar a la versión 3.3:

1. Compruebe que su idioma esté en la lista y tenga traducciones en la lista de paquetes de idiomas de Genesis .

2. Desactive el complemento Genesis Translations si está activo actualmente en su sitio. Agradecemos a Remkus de Vries por mantener este complemento y por su ayuda con las funciones de idioma en Genesis 3.3.

3. Busque actualizaciones de paquetes de idioma en Panel de control > Actualizaciones . Si no ve las actualizaciones del paquete de idioma, cambie el idioma de su sitio a inglés de EE. UU. En Configuración ? General , guarde los cambios, luego vuelva a su propio idioma y verifique las actualizaciones de idioma nuevamente.

4. Instale los paquetes de idioma disponibles cuando se le solicite haciendo clic en el botón de la página Actualizaciones.

Más Info en https://studiopress.blog/genesis-3-3-is-out-now/

Conclusiones

Con esta suculenta lección, hemos llegado casi al final del curso. Ahora tienes todos los datos necesarios para crear por ti mism@ una web de Wordpress profesional, no-code y eficiente.

Vamos a ver todavía dos bonus más. En el primero, revisaremos cómo puedes hacer crecer las visitas a tu web y en el segundo tendrás una checklist, con una serie de vídeos (uno por cada paso) como repaso general del método Blogpocket.

Enjoy!

Puedes ir al índice o cambiar de lección.