Cómo optimizar Newspaper para PageSpeed Insights

Dentro de los numerosos themes que podemos encontrar para nuestra página web creada con WordPress, podemos encontrar Newspaper de tagDiv. Un theme premium con infinidad de posibilidades de configuración y optimización.

Es el theme que utilizo personalmente en todas mis páginas web y además, el que siempre recomiendo por sus excelentes características. Pero por defecto no viene optimizado, así que con esta sencilla pero completa guía aprenderás a dejarlo completamente optimizado.

¿Para qué optimizar Newspaper?

No es ningún secreto que Google cada vez tiene más en cuenta la velocidad de carga de una web, sobre todo en dispositivos móviles. La velocidad de carga afecta directamente a la experiencia de usuario, y con ello, al SEO de nuestra web.

Si desde tu móvil estás intentando ver una página y tarda mucho en cargar ¿esperas o buscas otra página web que te ofrezca la misma información de forma más rápida? Así es, la velocidad es un factor clave hoy en día.

¿Qué necesito para optimizar Newspaper?

Necesitas una copia legal del theme (original), para poder disponer de todas las actualizaciones y complementos (plugins del propio theme).

Además, necesitas tener un hosting de calidad que esté optimizado. El hosting (alojamiento web) afecta directamente a las métricas de carga de nuestra página. Un hosting de mala calidad o mal configurado, es cómo un saco de 50 kilos sobre nuestra espalda.

Y a partir de aquí, solo necesitarás dedicarme los próximos diez o quince minutos de tu vida para leer y aplicar los cambios que te voy a recomendar en tu propia página web.

Para que puedas ver los beneficios que la optimización hará en tu página web, primero debes saber cómo funciona tu página ahora mismo.

Para ello, puedes usar estas herramientas de test gratuitas:

Mi consejo es que hagas un test en todas y guardes una captura de pantalla, o anotes los resultados (Sobre todo con PageSpeed que es la más fiable). Ahora, antes de hacer ninguna optimización.

Haz los test con algún artículo de tu página web y con la home, para que puedas apreciar los resultados. No son muy buenos ¿verdad? Tranquilo, eso va a cambiar.

Si quieres que tu página web montada con WordPress y Newspaper esté así de optimizada en Google PageSpeed Insights, solamente debes seguir los sencillos consejos que te muestro a continuación.

Optimización de Newspaper paso a paso

Esta no es la primera guía para optimizar esta fantástica plantilla llamada Newspaper, pero si es la primera que muestra una optimización para mejorar nuestra puntuación en el nuevo PageSpeed, que incluye Lighthouse.

Así que lo primero que debes hacer, es seguir todas las sugerencias que el equipo de tagDig nos da en su completo tutorial:

Cuando hayas completado todos los consejos que se indican en la guía, entonces puedes continuar aquí, aplicando mis nuevos consejos. Insisto, es totalmente necesario seguir previamente la guía de tagDiv.

Hacer un backup completo de tu web

Esta configuración que vamos a utilizar es 100% segura, pero siempre hay una posibilidad de que algo no salga bien. Por eso, te recomiendo hacer un backup completo de tu sitio web.

Así, si algo falla, podrás recuperar tu web en pocos minutos restaurando el backup. Pero insisto, esta configuración es 100% segura (la utilizo en todas mis webs).

Usar una versión del theme apropiada

Cada versión del theme tiene sus propias ventajas (o inconvenientes). Yo utilizo la versión 10.2 de Newspaper porque funciona genial. Pero actualmente ya está disponible la versión 10.3, que instalaré en los próximos días ya que acaba de ser lanzada y siempre me gusta esperar al menos 15 días por si contiene fallos.

Instalar y configurar un plugin de optimización JS

Vamos a utilizar un plugin gratuito que nos ayudará a mejorar mucho la optimización de nuestra página web montada con Newspaper. Se trata del plugin "Fast Velocity Minify" el cuál podemos encontrar en el repositorio de plugins de WordPress.

1. Vamos a la pestaña plugins
2. Hacemos click en "Añadir nuevo"
3. Escribimos el nombre del plugin "Fast Velocity Minify"
4. Le damos a "Instalar" y luego a "Activar"

Bien, ahora que ya tenemos el plugin instalado en nuestra página web, debemos hacer algunos cambios en la configuración. Son cambios muy sencillos, así que vamos con ello.

Vamos a la pestaña "Ajustes" de nuestro panel de administración de WordPress y luego hacemos click en "Fast Velocity Minify". Se abrirá una nueva ventana donde debemos hacer click en "Settings".

En la opción "Functionality" debemos marcar todas las casillas.

En la opción "URL Options" debemos marcar "Force HTTPS URLs"

En las opciones "HTML Options" marcamos la última casilla "Cleanup Header"

En "Font Options" no debemos marcar nada, debe quedar todo vacío.

En la opción "Google Fonts" dejamos marcada la primera opción "Inline Google Fonts CSS"

En la opción "Font Awesome" dejamos marcada la casilla "Merge or Inline Font Awesome CSS"

En la opción "CSS Options" marcamos la casilla "Preserve the order of CSS files", "Disable the Print related stylesheets" e "Inline CSS in the footer". Tal y como peudes ver en la imagen.

En la opción "JavaScript Options" no marcamos nada y pasamos a la siguiente opción.

En "Render-blocking JS" marcamos las casillas "Enable defer parsing of JVM JS files globally" y "Skip deferring the jQuery library".

El resto de las opciones, incluida "PageSpeed Settings" las dejamos en blanco, sin activar ninguna casilla.

Ahora guardamos los cambios (Save Changes) y ya tenemos este plugin perfectamente configurado.

Activamos Google Fonts en el theme

A partir de la versión 10.0 de Newspaper podemos usar Google Fonts sin problemas de perder optimización. Mi consejo es que lo dejemos activado ya que facilitará mucho la carga de fuentes por parte del theme.

Para ello vamos al panel de control del theme Newspaper y hacemos click en la pestaña de "Theme Fonts", luego abriremos la opción de "Google Font Settings" y habilitamos "Use Google fonts". Guardamos los cambios.

Ahora debemos elegir una o dos fuentes para toda nuestra página web. Personalmente he elegido una única fuente (bastante común) para todo el theme. He elegido "Verdana".

Ahora, dentro del apartado Theme Fonts, del panel de gestión de Newspaper, nos vamos a la sección "Font Setting".  Es muy bonito elegir diferentes fuentes para nuestra web, pero es algo que la ralentiza. Por eso in inicio, vamos a dejarlo TODO por defecto en el apartado "Fuentes" de todas las categoría (Header, Post, Pages, etc.....).

Si que podemos editar el tamaño de las fuentes (Size), el espacio entre líneas (Line height), etc....  Pero las fuentes, en inicio las dejaremos todas por defecto (Default font).

Optimiza las imágenes a WebP

Existen muchos formatos para comprimir imágenes, pero Google valora mucho que se utilicen los más nuevos, los que mejores resultados ofrecen.

Vamos a usar otro plugin gratuito llamado "EWWW Image Optimicer", que nos ayudará a optimizar todas las imágenes de nuestra página web de forma muy sencilla.

Para ello vamos a la pestaña "Plugins", luego a "Añadir nuevo", buscamos el plugin, lo instalamos y lo activamos. Es un plugin que está en los repositorios de WordPress.

Una vez instalado, vamos al panel de control de WordPress y hacemos click en "Ajustes" y luego en "EWWW Image Optimicer".

En la pestaña de "Básica" seleccionamos la opción de"Eliminará todos los metadatos" y luego, en la opción de "Nivel de optimización de PNG" seleccionaremos "Premium".

En la pestaña de "ExactDN" marcamos las casillas "Incluir todos los recursos" y "Comprensión premium"

En la pestaña "Avanzada" ponemos un valor de "70" en "Nivel de calidad del JPG" y luego marcamos la casilla "Incluir carpetas de medios"

En las pestañas de "Remidensionar" y "Convertir" lo dejamos todo por defecto (sin activar).

En la pestaña de "WebP" activamos las casillas de "JPG/PNG a WebP" y "Forzar WebP"

Y ahora guardamos los cambios para que se queden grabados.

Llega el momento de optimizar todas las imágenes a WebP, así que desde el panel de control de WordPress vamos a la pestaña de "Medios" y luego hacemos click en "Optimización en lote".

En la ventana que se abre, marcamos la casilla "Forzar Optimización" y le damos al botón "Buscar imágenes sin optimizar". Esto tardará unos pocos minutos, y luego aparecerá una nueva opción donde debemos hacer click "Iniciar la optimización".

Esperaremos unos minutos a que todas las imágenes se optimicen, antes de continuar con el siguiente consejo para optimizar Newspaper de tagDiv.

Configurar el plugin de caché

Si, ya se que en la guía inicial de optimización de tagDiv que has seguido, se recomienda usar el plugin WP Super Cache. O en su defecto, W3 Total Cache. Pero si quieres que tu página web esté 100% optimizada, necesitamos usar un plugin premium llamado LiteSpeed Cache.

¿Por qué es necesario usar este plugin? Es muy sencillo, es el plugin más completo y potente en optimización y caché. Los demás plugins pueden ayudar a tener un sistema de caché bueno, pero LiteSPeed Cahce nos dará el mejor sistema de caché.

Si queremos obtener una optimización total en nuestra página web, esta no es una opción discutible. Sin embargo, eres libre de usar el plugin que quieras. Pero recuerda, si usas WP Total Cache o WP Super Caché, los resultados de la optimización no serán tan buenos.

El plugin LiteSpeed caché es gratuito, pero no funciona si tu servidor no tiene instalado el sistema litespeed (que es de pago). Así que en mi opinión tienes dos opciones:

1. Comprar la licencia LiteSpeed e instalarla en tu servidor o probar su versión gratuita
2. Instalar tu web en un servidor de calidad que ya utilice LiteSpeed y así no tienes que preocuparte por instalar nada

Si te decides por probar LiteSpeed en tu propio servidor, recuerda que puedes instalarlo y disfrutar de unos días de prueba antes de tener que comprar la licencia (o si solo tienes un sitio, usar la licencia gratuita permanente). Así podrás ver todo su funcionamiento y ventajas. Personalmente uso un servidor privado e instale el programa con la licencia, puedo decir que estoy totalmente satisfecho ( y llevo así algunos años ya).

Si prefieres usar una opción más económica, te recomiendo buscar un hosting para tu web que tenga instalado LiteSpeed, así no tendrás que preocuparte de licencias. En algunas de mis páginas webs uso Banahosting.com que si incluye CPanel y LiteSpeed y me está reportando unos resultados excelentes (en puntuación web). Además es bastante económico.

Una vez tenemos LiteSpeed funcionando en nuestro servidor, instalarnos el plugin "LiteSpeed Cache" y lo activamos.

Vamos a la sección "Importar / Exportar" . Luego en el apartado "Ajustes de importación" le damos click al botón "Examinar". Seleccionamos este archivo que os dejo a continuación y una vez seleccionado hacemos click en "Importar".

LiteSpeed tiene muchas opciones de configuración, por eso en vez de daros una chapa de media hora explicando como poner cada cosa... os dejo una copia de la configuración de mi propia web para que la importéis y fin.

IMPORTANTE: Si usas LiteSpeed Cache con LiteSpeed instalado en el servidor, NO hace fanta usar un plugin de optimización de imágenes cómo el explicado en el paso anterior (EWWW Image Optimicer). Porque LiteSpeed ya trae un optimización de imágenes de serie, mucho más potente.

Para ello vamos a LiteSpeed / Optimizador de Imágenes / Enviar solicitud de optimización.

Y con esto, finalizamos por completo el apartador de la optimización de caché e imágenes.

Deshabilita los botones "Like" de las RRSS

No importa si utilizas botones de redes sociales en tu blog, para que los lectores puedan compartir tu contenido en sus redes sociales.

Pero nunca, bajo ningún concepto, utilices los botones de "Like". Este tipo de botones añaden un código muy pesado y no comprimido, que perjudica enormemente el tiempo de carga de una web.

Desde el panel de control de Newspaper, vamos a la pestaña "Post Settings" y luego a "Sharing". Aquí podemos habilitar "Bottom article sharing" pero no habilites nunca "Bottom article like" o "Top article Like".

Eliminar el plugin tagDiv Social Counter

Es unos de los plugins que el theme activa de forma obligatoria al instalarlo, sobre todo a partir de la versión 10.0 de Newspaper. Pero este plugin no lo vamos a utilizar (así es, debes quitar cualquier widget que tengas en la home u otros sitios con la contabilidad de likes de las redes sociales).

¿El motivo? Es extremadamente nocivo para la optimización ya que genera un sinfín de cadenas pesadas hacia las RRSS que ralentizarán muy, pero que muy notablemente nuestra web. Créeme cuanto te digo que no es muy práctico... más bien solo estético, así que si encima es nocivo ¿para que tenerlo? Lo desactivamos y eliminamos.

Activar el plugin tagDiv Mobile

Activar todos los demás plugins obligatorios que nos solicita Newspaper para su correcto funcionamiento y además, instalar el plugin tagDiv Mobile Theme (que viene como opcional en la sección "plugins" de Newspaper).

Es totalmente necesario tenerlo activo para poder obtener una buena puntuación en Google PageSpeed. Además, desde las opciones de Newspaper / Theme panel / Mobile Theme / podemos activar si queremos usar solo la versión móvil o móvil + amp (recomiendo móvil + amp si tienes muchas publicaciones).

Eliminar plugins que no usemos / necesitemos

Ve a la sección de plugins de tu WordPress y desactiva y borra por completo todos los plugins que no sean estrictamente necesarios. Si hay un plugin que no estés usando, elimínalo por completo.

Los plugins desactivados también consumen recursos y perjudican a tu web, si no lo usas, no lo tengas.

Olvídate por completo de usar plugins que añadan botones de redes sociales / share, plugins de creación de cajas de fanpages / similares, plugins pesados de seguridad tipo wordfence, plugins que abran popups, etc.... Deja a un lado todos esos plugins estéticos porque solo añaden código pesado a tu web. Bórralos por completo, no solo los desactives.

La importancia del Hosting

Tener un alojamiento web bien optimizado es imprescindible para que toda la optimización que hemos aplicado funcione correctamente. Si nuestro hosting es malo, de nada sirve optimizar la web.

Podemos usar un VPS optimizado para nuestra web, yo recomiendo usar LiteSpeed porque mejora mucho la tasa de velocidad. Es para que te hagas una idea, el mejor servidor web que existe en la actualidad, mucho mejor que Apache, que Nginx o que Nginx usado como proxy inverso y demás historias.

Yo utilizo en esta web Clouding por ser bastante potente, pero cada cuál con sus manías.

O también podemos tener un alojamiento básico en un hosting de calidad, yo recomiendo Banahosting por ser posiblemente el mejor que he encontrado con esas características (CPanel + LiteSpeed).

Cómo optimizar la Homepage usando tadDiv Mobile

Uno de los principales problemas que tenemos a la hora de optimizar nuestra web con Newspaper y activar el plugin tagDiv Mobile, es que la página de inicio y categorías, quedan por defecto muy pobres estéticamente.

Por suerte existe una forma muy sencilla de solucionar eso, gracias al editor de archivos gutenberg (el cuál no me gusta nada en absoluto).

Si tenemos activado el plugin "Editor Clásico" cómo lo tengo yo, lo primero que debemos hacer es desactivarlo por completo. Luego iremos al a sección "páginas" de nuestro WordPress y luego editaremos la página que tengamos configurada como "Página de inicio".

Una vez dentro de la página de inicio, con el editor gutenberg, iremos hacia la parte derecha y haremos click en el icono del móvil. En las opciones que se muestran desactivaremos "Enable/Disable Mobile theme" y luego haremos click en "Actualizar" para que se guarden los cambios.

Una vez hecho todo esto, vamos al a sección de plugins y activamos nuevamente nuestro editor clásico (en caso de tenerlo previamente funcionando). Vaciamos la caché y nuestra Homepage ya estará funcionando en modo "responsive". De forma que, funcionará perfecta en móviles.

Obviamente, no estará tan optimizada para PageSpeed cómo las entradas (post). Un precio a pagar si queremos obtener una buena estética.

Las categorías podemos editarlas de forma similar.... Si usamos categorías personalizadas con "Clud Templates", podemos copiar el código de las mismas y pegarlo en una página normal. Así podremos usar esa página cómo categoría responsive también en móviles.

Simplemente debemos cambiar en el menú de la web, las categorías reales por las páginas creadas (recomiendo darles un nombre similar al de la categoría pero no el mismo). Luego, desde las opciones avanzadas de Yoast Seo, al final de cada página podemos poner la url canónica hacia la categoría, para que Google no lo considere contenido duplicado.

El problema de Adsense en la optimización de Newspaper

No es ningún secreto que al utilizar anuncios de Adsense, se pierde por completo la optimización de cualquier página web. Adsense añade mucho tiempo de carga extra, muchas consultas y un montón de código.

Eso hace, que cualquier página web bien optimizada y con una excelente puntuación en PageSpeed Insights de Google, pierda toda su optimización y su puntuación empeore drásticamente.

Este problema me ha dado muchos dolores de cabeza siempre, he pasado meses pensando en cómo solucionar esto sin tener que prescindir de Adsense, ya que es una forma de monetización que uso en muchas de mis páginas.

Y tras mucho trabajo e investigación, por fin di con una solución realmente buena. Es la solución que estoy usando en esta misma página web, y en mis demás páginas. Se trata de un plugin gratuito llamado Advanced Ads, que junto con un complemento llamado "PRO" nos permite usar un Lazy Load para los anuncios.

Para no hacer esta guía muy pesada, ya que no todo el mundo usa Adsense, he creado un tutorial completo para la optimización de anuncios de forma muy sencilla. Puedes verlo desde aquí:

• Cómo usar anuncios de Adsense sin perder optimización web

Resultados obtenidos de una página optimizada con este tutorial, donde incluso si se utilizan alguna fuente concreta (y no por defecto cómo aconsejo).

Y eso es todo amigos, espero que esta guía completa de optimización de Newspaper os ayude a mejorar drásticamente vuestra puntuación en el nuevo PageSpeed Insights de Google.

He dedicado mucho tiempo a crear esta guía para compartirla con vosotr@s, así que agradeceré cualquier comentario, duda o sugerencia para mejorar, que queráis dejar.

Saludotes