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 beneficios después de la optimización, cuando debes hacer otro test para poder valorar resultados.

Resultados con PageSpeed antes y después de optimizar
Resultados con PageSpeed antes y después de optimizar

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.

Y si no te fías, por favor, haz un testo con este artículo o con cualquier artículo de mi página web en PageSpeed para que puedas ver por ti mismo los resultados, incluso usando Adsense.

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 9.1 de Newspaper porque funciona genial. Pero actualmente ya está disponible la versión 9.2, sin embargo, no la recomiendo porque no está tan optimizada para el render, cómo la 9.1.

Respuesta del equipo de tagDiv sobre la optimización de la versión 9.2
Respuesta del equipo de tagDiv sobre la optimización de la versión 9.2

Espero que en futuras actualizaciones, solucionen este pequeño “problema”, ahora que Google tiene la velocidad de carga / render, cómo un factor importante para la clasificación de una web.

Si no dispones de versiones anteriores, puedes usar la actual 9.2 sin problemas. Tu puntuación también mejorará mucho tras esta optimización, aunque no tanto cómo usando la 9.1 (si cuando leas esto hay versiones superiores, debes probarlas para poder valorar).

Utilizar un plugin de Lazy Load

Si, ya se que Newspaper tiene incorporada una función de Lazy Load en su panel de configuración, pero no es tan bueno cómo un plugin externo.

Parece que la versión 9.2 ya tiene solucionada la optimización de Lazy Load, así que si utilizas Newspaper 9.2 o superior, puedes omitir este paso. O probarlo y valorar por ti mismo los resultados.

Lo primero que haremos será desactivar el Lazy Load de Newspaper, para ello vamos al panel de control de Newspaper y luego a “Template Settings“. Luego haremos click en la pestaña “Image loading“.

Desactivar Lazy Load en Newspaper
Desactivar Lazy Load en Newspaper

Aquí debemos desactivar la opción de “Use loading animation image” y después guardar los cambios.

Ahora iremos a la pestaña de plugins de WordPress y añadiremos un plugin nuevo y gratuito llamado a3 Lazy Load. Los instalamos, lo activamos y ya está, no es necesario configurar nada.

Puedes ver o descargar el plugin desde:

Si no sabes instalar un plugin, puedes aprender desde esta sencilla guía:

Utiliza un plugin de optimización JS

Vamos a utilizar otro 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 “Admin Bar Purge” y “Fiz Page Editors

functionality de Fast Velocity Minify
Functionality de Fast Velocity Minify

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

url options de fast velocity minify
URL Options de Fast Velocity Minify

En las opciones “HTML Options” y “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

Google Fonts del plugin Fast Velocity Minify
Google Fonts del plugin Fast Velocity Minify

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

Font Awesome de Fast Velocity Minify
Font Awesome de Fast Velocity Minify

En la opción “CSS Options” marcamos la casilla “Preserve the order of CSS files

CSS Options de Fast Velocity Minify
CSS Options de Fast Velocity Minify

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 JS files globally” y “Skip deferring the jQuery library

Opción Render blocking JS
Opción Render blocking JS

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.

Eliminar fuentes en el theme

Las fuentes de Google son fantásticas, pero consumen muchas llamadas y ralentizan nuestra página web. Para obtener una buena optimización en nuestra website, debemos eliminar deshabilitar el uso de Google Fonts y limitar el uso de fuentes a una o dos.

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 deshabilitamos “Use Google fonts“. Guardamos los cambios.

Google Fonts en Newspaper
Deshabilitamos el uso de Google Fonts en Newspaper

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“.

En la misma pestaña de “Theme Fonts” debemos ir a las opciones de “Post title“, “Post content“, “Post element“, etc…. es decir, debemos abrir todas las opciones de “Font Settings” y elegir una a una la opción “Verdana“. En tu caso, la fuente que hayas elegido.

Selección de fuente en Font Settings
Selección de fuente en Font Settings

Actualmente no existe una opción para seleccionar una sola fuente única en todo el theme, espero que en próximas actualizaciones añadan esta opción, porque es muy útil.

De momento, debemos ir una a una y cambiarlas todas a mano, poniendo la fuente que queremos usar (insisto, no utilices más de dos fuentes).

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“.

Básica EWWW Image Optimicer
Básica EWWW Image Optimicer

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

Opción de configuración ExactDN
Opción de configuración ExactDN

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

Opción Avanzada de EWWW Image Optimicer
Opción Avanzada de EWWW Image Optimicer

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

Configuración de WebP
Configuración de 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“.

Optimizando imágenes a WebP
Optimizando imágenes a WebP

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 WP-Rocket.

** Enlace de afiliado, a ti te costará lo mismo si adquieres el plugin y a mi me darán una pequeña comisión que me ayudará a cubrir los gatos de la web.

¿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 WP-Rocket 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. Yo, recomiendo y utilizo WP-Rocket.

Una vez instalado y activado el plugin, vamos a nuestro panel de control de WordPress y hacemos click en “Ajustes” y luego en “WP-Rocket“.

En la pestaña de “Escritorio” no es necesario hacer nada, solamente añadir nuestra clave de licencia para que el plugin esté activado y funcionando.

En la pestaña “Caché” debemos habilitar el uso de Caché y además, habilitar la opción de crear una caché separada para los dispositivos móviles.

Sección de caché de WP-Rocket
Activamos las opciones de caché en WP-Rocket

En la pestaña de “Optimizar archivos” debemos activar solamente la opción de “Minificar archivos CSS

minificar css de WP-Rocket
Activamos la opción de Minificar CSS

En la pestaña “Medios” activamos las casillas “Desactivar Emoji” y “Desactivar la función WordPress para el contenido incrustado

medios de wp-rocket
Activamos estas casillas en la pestaña de Medios

En la pestaña “Precargar” activamos las casillas “Activar la precarga” y sus dos casillas interiores (Si no utilizas Yoast SEO, solo te saldrá una opción).

Precarga de wp-rocket
Opciones de “Precarga” de WP-Rocket

En la pestaña de “Reglas avanzadas” no debemos hacer nada.

En la pestaña de “Base de datos” debemos activar las casillas “Comentarios descartados“, “Transients expirados” y “Tablas optimizadas“.

La pestaña de “CDN” la dejamos vacía. Excepto si usas un CDN, entonces debes añadir la configuración de tu CDN (si usas CloudFlare gratuito, no debes hacer nada).

En la pestaña “Heartbeat” no debemos hacer nada. El resto de pestañas las dejamos por defecto, sin activar.

Desde la pestaña “Herramientas” puedes cargar la configuración de WP-Rocket de forma automática. Te dejo mi configuración en este enlace:

Solo debes descomprimir el archivo para mostrar el “JSON” que hay dentro. Ir a “Importar ajustes“, seleccionar el archivo y luego dar al botón “Cargar e importar ajustes“. De esta forma se cargará toda la configuración de forma automática.

Activar el plugin TD-Mobile

Si, ya se que el plugin TD-Mobile no permite tantas opciones de configuración con la versión de escritorio de Newspaper, pero Google necesita que la carga total de la web (render) se haga de forma muy eficiente.

Por eso es totalmente necesario activar el plugin td-mobile de Newspaper, para que nuestra web cargue muy rápido en dispositivos móviles. La mayoría de visitas van a artículos y se hacen desde móvil, así que en realidad, tampoco es tan malo no tener opciones de configuración para la home (en móvil).

Para este paso, vamos a “Plugins” luego a “Añadir nuevo” y seleccionamos el plugin td-mobile que viene junto con el theme Newspaper de tagDiv.

Eliminar plugins que no usemos y minimizar contenido

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.

Minimiza el contenido de tu web, si por ejemplo usas artículos relacionados después del contenido de los artículos / publicaciones, utiliza una cantidad mínima. No añadas contenido por añadir… utiliza solo lo estrictamente necesario.

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“.

activar botones de rrss en newspaper
No activar el boton “Like” de las RRSS

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 NGINX porque mejora mucho la tasa de velocidad.

O también podemos tener un alojamiento básico en un hosting de calidad, yo recomiendo SiteGround por ser posiblemente el mejor servicio de hosting básico que conozco.

** Enlace de afiliado, a ti te costará lo mismo contratar un hosting y a mi me darán una pequeña comisión que me ayudará a cubrir gastos de esta web.

Esta website, Beseomyfriend.com está alojada en SiteGround, puedes verlo desde las herramientas de localización de hosting web:

No obstante, SiteGround es solo una opción de alojamiento. Puedes mirar en Digital Ocean o Vultr por ejemplo, que son tambien empresas con estructuras muy buenas.

información del host de una web
Test para saber el host que usa una web (la mía)

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í:

puntuación de pagespeed
Puntuación tras la optimización de Newspaper

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

15 Comentarios

  1. Buenas tardes, he hecho todo el tutorial y pues de 29% mi sitio subió a 40% ¿Qué más debería hacer?

    • Buenas Daniel,

      Si hiciste todo paso a paso deberías tener una puntuación mayor, esta misma web es ejemplo de ello (puedes analizarla en pagespeed). Veo que usas algún plugin de “share” para rrss por ejemplo, que la respuesta de tu servidor no es muy buena (Google marca error TTFB) y que algunas imágenes se cargan desde Google y no están optimizadas. ¿Estás usando Wp-Rocket?

      Saludos

  2. Gracias por responder, realmente rehice todo borre todo y voy de nuevo a hacerlo desde 0, lo volveré a hacer quizás algo no hice bien, termino y le cuento 😀
    Bueno, antes de hacerlo ¿Una consulta este paso si no lo hice porque no encontré forma “5. Remove render blocking css/js – using the TagDiv SpeedBooster plugin (advanced users)” ¿Es necesario? O algún detalle de como hacerlo?

  3. Buenos días, lo hice de nuevo. Pero ahora creo que me cargue el sitio xxx, en móvil aparece todo feo, no sé cómo revertirlo no estoy usando Wp-Rocket pero si configure el WP Super Cache 🙁 no sé qué hice mal, ahora sí hice todos los pasos ¿Me podría ayudar?

    • Pero…. no estarás usando WP Super Cache y WP Rocket a la vez ¿no? Realmente no se cómo hiciste para que quedara tu web así, si quieres envíame un mail con acceso y le echo un vistazo.

      Saludos!

  4. Gracias nuevamente, si claro con gusto se lo envío ¿Donde veo su correo? Y no, estoy usando solo WP Súper Cache

  5. Hey, Your Guide is Amazing and works fine for me !

    But, last week the velocity cache plugin has receive a update, and after this my site speed goes down to 50 from 100. Please tell me how to fix it and let me boost my site speed again.

    Waiting for your reply.

      • Yes I’m using Wp-Rocket! After updating velocity fast cache plugin, my site speed goes down to 50 from 100

        • Comprendo. Fast Velocity Minify en ocasiones cambia la configuración al ser actualizado, por favor revisa que está bien configurado. También es posible que hayan tenido un error de código y lo solucionen en las próximas actualizaciones (ha pasado alguna vez).

          Saludos

          • I’ve checked the configuration settings. Is anybody else facing the same issue ?

      • Hola! Sabes si con otro tema de TagDiv, Newsmag, tambien se puede optimizar la web con los consejos que das? Un saludo!

        • Hola Fran,

          Lo cierto es que nunca lo he probado. Creo que también tengo licencia de NewsMag, lo probaré 🙂

          Saludos

Dejar respuesta

Por favor escribe tu comentario
Nombre