Este es un proyecto experimental, en el que se trata de obtener una versión 512K del sitio web de Blogpocket.com, con páginas ligeras. A continuación, describimos los pasos para conseguir un sitio de WordPress súper optimizado en rendimiento con páginas ligeras y el mecanismo para clonar automáticamente las entradas sin que afecte al SEO del sitio original.
Las emisiones digitales de esta publicación se estiman entre 0,034 gr. y 0,243 gr. de CO2 por página vista.
Puedes ver el sitio en funcionamiento en: 512k.blogpocket.com
Claro está, lo que realmente importa es cómo crear un sitio web minimalista y liviano, con un rendimiento optimizado (WPO), seguro y legalmente preparado; y por supuesto, listo para funcionar sin importar el propósito que le desees dar.
1. Creación del subdominio
Lo primero es crear el subdominio 512K.blogpocket.com en nuestra cuenta de GreenGeeks. Para ello, entra en cPanel > Dominios > Dominios. [Más info] Ten en cuenta que es probable que la creación de subdominios se realice dentro de la creación de dominios directamente.
2. Creación del certificado SSL
El certificado es obligatorio para que el sitio web funcione bajo el protocolo HTTPS. Let’s Encrypt es un certificado gratuito que es muy fácil de obtener en GreenGeesk. Realiza esta tarea siempre antes de crear cuentas de FTP asociadas al dominio (principal o adicional) o subdominio y de llevar a cabo la instalación de WordPress. Para ello, acude al panel de control principal de tu cuenta de GreenGeeks y haz clic en Security. [Más info] Ten en cuenta que, probablemente se haya unificado la creación de los SSL correspondientes a dominios adicionales y subdominios. El certificado SSL gratuito se instala ya por defecto automáticamente.
3. Instalar WordPress
Para instalar WordPress solo hay que ir a la sección correspondiente de cPanel (Softwaer > WordPress Management by GreenGeeks) , rellenar un formulario con los datos principales y el sistema hará el resto. De esa manera, tendrás listo para usar un WordPress, con uno de los temas predeterminados activos, y dos plugins preparados para configurarse: Loginizer (seguridad básica) y LiteSpeed Cache (optimización del rendimiento). Tendrás otro plugin instalado pero sin activarse: Akismet (anti spam). [Más info]
4. Configuración general
Hay unas pocas configuraciones que hay que realizar desde el administrador de WordPress. [Más info] Debes estudiar si quieres que tu sitio web sea rastreado por los buscadores o no.
5. Rastreo de buscadores
Si quieres ocultar tu sitio a los buscadores, acude a Ajustes > Ajustes de lectura y activa la opción «Pedir a los motores de búsqueda que no indexen este sitio.» Pero depende de los buscadores aceptar esa petición o no. Así que lo mejor, si quieres ocultar tu sitio a los buscadores, es que te asegures de que todas tus páginas llevan la instrucción siguiente:
<meta name='robots' content='noindex, nofollow' />También tienes la opción al crear tu nuevo sitio en GreenGeeks o puedes considerar instalar el plugin Yoast SEO, La preparación para el SEO se lleva a cabo mediante este plugin. Este plugin incluye un asistente de redacción SEO y la generación automática del archivo sitemap.xml (información para Google del contenido de tu web). [Más info]
También puedes hacerlo a través del archivo robots.txt Hay herramientas para crear el archivo robots.txt (información para Google de lo que se debe indexar) pero lo más útil y rápido es crearlo manualmente dentro de la carpeta «public_html» (o la carpeta correspondiente a tu subdominio o dominio adicional) usando el Administrador de Archivos. [Más info]
6. Configuración Akismet
Los tres plugins que tendrás preparados, listos para configurar, después de instalar WordPress son Loginizer, LiteSpeed Cache y Akismet. Loginizer sirve para proteger el acceso a la página de login contra ataques de fuerza bruta. Es una medida de seguridad temporal mientras arrancas el proyecto e instalas un plugin más completo como Wordfence. LiteSpeed Cache es el plugin correspondiente al sistema de almacenamiento en caché de GreenGeeks (LiteSpeed) -lo veremos más adelante- y Akismet te servirá para combatir el spam en los comentaros. Para activar éste último debes obtener una clave de API en la página de Akismet. Akismet es la solución tradicional de WordPress de cara a combatir el spam en los comentarios de tu blog. El plugin se debe instalar, activar y configurar aunque no implementes el sistema de comentarios de WordPress. [Más info]
7. Wordfence
Wordfence es uno de los plugins de seguridad por excelencia en WordPress y en esta lección se explica cómo configurarlo. Antes, eliminaremos y borraremos el plugin Loginizer. [Más info]
8. Firewall extendido de Wordfence
Wordfence posee un cortafuegos (firewall extendido) que es necesario habilitar una vez que el plugin esté instalado y activo. El firewall extendido de Wordfence es un complemento excelente para completar la protección contra intrusos en una instalación de WordPress. [Más info]
9. Configuración del plugin LiteSpeed Cache
Para optimizar el rendimiento del sitio web hay que configurar el plugin LiteSpeed Cache. En un sitio web inicial de WordPress (un sitio vacío de contenido, solo con el tema predeterminado y los plugins de arranque -Lite Speed, Wordfence y Akismet-) el nivel de optimización puede alcanzar el 100%. [Más info] Se puede aplicar directamente la serie de ajustes predeterminados, yendo a LiteSpeed Cache > Preajustes y eligiendo el preajuste «Avanzado» (recomendado).
10. Editor del sitio: Sustituir la página de inicio del blog por la página de inicio
La plantilla «Página de inicio» (home) muestra la página de inicio de tu sitio, tanto si está configurada para mostrar las últimas entradas como si es una página estática. La plantilla de la página de inicio tiene prioridad sobre todas las plantillas. En el tema Twenty-Twenty Four, la plantilla «Página de inicio» no está creada, mostrándose por defecto la plantilla «Inicio del blog». Para poder personalizar la home a nuestro gusto debemos primero crear la plantilla, en el editor del sitio, «Página de inicio».
11. Personalización de la plantilla «Página de inicio»
Lo que queremos es mostrar en la página home, las últimas entradas del blog -de manera súper minimalista- por lo que añadiremos un bucle de consulta espartano (lo más espartano posible) junto con las partes de plantilla Cabecera y pie de página. Estas partes de plantilla también las reduciremos al máximo posible.
12. Personalización del resto de plantillas (entradas individuales, etc.)
Se personalizan, de igual manera, el resto de plantillas, manteniendo la misma cabecera y pie de página (partes de plantilla).
13. Cambio de tipo de letra
Para reducir al máximo el peso de las páginas es fundamental emplear uno de los tipos de letra estándar del sistema, como por ejemplo System Sans Serif. Esto dependerá del tema activo. Pero usando el plugin Create Block Theme es posible gestionar la librería de fuentes con objeto de eliminar todas aquellas que no se usen. Así reduciremos el peso en KBs de las páginas. En próximas versiones de WordPress (ahora estamos en la 6.4) esta función de gestionar la librería de fuentes vendrá nativa en el núcleo.
14. Servir imágenes en formato WebP
La premisa para tener un sitio web de WordPress con un peso inferior a 512KBs es no emplear imágenes. Si tenemos margen podríamos emplearlas siempre y cuando las optimicemos y las sirvamos en formato de última generación WebP. Esto lo podemos llevar a cabo fácilmente instalando el plugin Converter for Media. Veremos que si se quiere importar contenido de un feed, las imágenes tendrán el enlace de las originales, por lo que será en el sitio original donde deban servirse en formato WebP. Esto descargará de peso el sitio en el que se importan el contenido.
15. Cuestiones legales: Adapta RGPD y Complianz (banner de cookies)
En principio, no vamos a implementar sistema de estadísticas, por lo que el banner de cookies solo será necesario si mostramos vídeos, ya que no existirá ningún otro recurso de terceros. Para implementar esto, usaremos el plugin Complianz y con el fin de desarrollar los documentos legales, el plugin Adapta RGPD.
El primer paso para adaptar legalmente tu sitio web es generar los documentos legales: Aviso legal, Política de privacidad y Política de Cookies. Independientemente de que dicha adaptación legal sea revisada por un experto en leyes de Internet y privacidad de datos, el plugin Adapta RGPD resuelve, en general, bien el problema y se actualiza con frecuencia. [Más info]
La carga de cookies sin que el usuario exprese su consentimiento explícito incumple el RGPD. Además, hay que avisar a tus usuarios de la existencia de cookies no necesarias, guardar los consentimientos y establecer un mecanismo sencillo para modificar las preferencias. Hay un recurso que hace todo eso automáticamente, incluida la detección de las cookies que se cargan en tu web. [Más info]
Es preciso realizar un ajuste, a nivel de CSS, en el botón de Complianz que permanece cuando se hace clic en «Guardar preferencias». Para ello, iremos a la edición del sitio > Estilos > 3 puntos suspensivos verticales > CSS Adicional y pegaremos el siguiente código:
.cmplz-manage-consent::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "Cookies";
display: inline-block;
vertical-align: middle;
margin-left: 1px;
color: white; /* change color if needed */
}
#cmplz-manage-consent .cmplz-manage-consent {
bottom: 5%!important;
right: 4%important;
height: 6%!important;
width: auto!important;
border-radius: 0%!important;
color: #333!important;
background: #333!important;
padding: 15px 15px 15px 15px!important;
min-width:unset!important;
}16. Importar automáticamente contenido desde el feed de Blogpocket.com
Por último, utilizaremos el plugin WPeMatico para importar el contenido desde el feed (o feeds) de Blogpocket.com.
Crearemos dos campañas, una para el feed normal y otra para el feed con las publicaciones del podcast. Y las configuraremos para una ejecución diaria del cron propio, dejando los títulos con los enlaces al sitio de copia y los enlaces internos (no follow) a las páginas del sitio original.
Las entradas se publicarán directamente para conservar hora y fecha; pero serán susceptibles de editarse con objeto de eliminar widgets y elementos que son innecsarios e irrelevantes. Consiguiendo así, mejor rendimiento y menor peso de página aún.
Pensamientos finales
Los puntos clave para conseguir un sitio con páginas de menos de 512 KBs en WordPress son:
- Tema minimalista (por ej. Twenty-Twenty Four)
- Configuración «Avanzada» del plugin LiteSpeed Cache.
- Dejar fuentes del sistema, eliminando fuentes de Google.
- Instalar y activar plugins solo imprescindibles.
- Imágenes optimizadas al máximo o formato WebP.
- Reducir al máximo el uso de widgets y recursos de terceros. Por ejemplo, estadísticas de Google, botones de redes sociales, etc.
A continuación, capturas de pantalla de las herramientas de medición Digital Beacon y GTmetrix, de la página de inicio y del primer post importado.
Deja una respuesta