Cómo mejorar la velocidad de tu página con Google AdSense
Pasos a tomar para obtener la mejor calificación de velocidad con PageSpeed Insights sin que Google Adsense nos afecte con React y Material-ui
PageSpeed Insights es una herramienta para medir el tiempo que tarda una página en cargar, tanto en móviles como en escritorio. La métrica nos informa de cuanto tiempo tiene que esperar el usuario para que pueda ver el contenido y es un factor importante para posicionar en las primeras páginas de Google (SERPs), además que evidentemente en caso de tener una carga lenta será una experiencia mala para nuestros visitantes y probablemente se vayan antes de cargar si tienen que esperar mucho.
Tener una puntuación alta en PageSpeed Insights sin Google Adsense es una tarea relativamente fácil, lo difícil viene cuando queremos monetizar nuestros sitios web y optamos por incluir la plataforma de Google para publicidad, aunque parezca mentira y sean ellos mismos los que quieren una web más rápida, Google Adsense por muchos motivos no cumple con ninguno de los criterios de optimización de PageSpeed Insights, estos motivos son sencillamente que la plataforma necesita cargar documentos Javascript e imagenes que no pueden estar cacheados, dado que estos provienen de fuentes externas en muchos casos, además de que el código de Adsense se actualiza periódicamente, así que el cache no sirve de nada.
Un sitio web con una puntuación de 95-100 puntos en PageSpeed Insights puede perfectamente pasar a 25-40 después de incluir la publicidad de Google (y no exagero), lo que hace que los usuarios tengan una usabilidad peor al entrar en nuestros sitios web, además de claro ser un factor importante para posicionar en las SERPs.
Hay mucho debate alrededor de esto y casi nunca saben como pueden solucionarlo o por lo menos yo no lo he visto en ningún lado o sencillamente los consejos que dan son bastante obvios o inútiles de implementar para no rascar más que unos miseros 20-30 puntos más y encima empeorar la conversión de la publicidad.
React, Material-ui y Node.js
Vamos a explicar como conseguir 100 puntos (o casi) en el test de Google PageSpeed con React y Material-ui, pero los "tips" podrás usarlos en cualquier plataforma sin ningún problema, pero si usas estos dos lo tendrás más mascado todo.
Aplicar las optimización que PageSpeed nos aconseja
Reducir al máximo posible el numero de estilos (css) que cargamos en nuestra página, opta por incluir los estilos dentro del HTML en el
<head></head>, y si necesitas cargar alguno post pon la carga hasta después de cargar todo lo importante, nosotros sencillamente cargamos el css de cada pagina dentro del head, y no necesitamos cargar más hojas de estilo.Optimiza tus imágenes y usa tamaños adecuados para disminuir al máximo la cantidad de KB que el navegador necesitara descargar. Puedes usar Modernzr para detectar si el navegador del usuario es compatible con imágenes de siguiente generación y en caso de no serlo cargar el formato original.
Realiza el mínimo de peticiones posibles de archivos javascript y que estos tengan un peso (Tamaño) lo más bajo posible, puedes usar herramientas como webpack para minimizar, comprimir y optimizar el tamaño de tus archivos e imágenes estáticas.
Mirifica el HTML generado, en caso de estar usando React, ya lo hace por defecto.
Usa CDNs (Content Delivery Network), puedes usar Cloudflare que es gratuito y va de maravilla y ya se encarga también de comprimir con GZIP los datos enviados, y si no usas Cloudflare, comprime lo que el servidor envia con GZIP, no mandes todo sin comprimir 😇.
Usa TLS 1.3 con la opción 0-RTT (Zero Round Trip Time Resumption por sus siglas en ingles), con Cloudflare solo tienes que activar esta opción y listo.
Bien estos son los pasos sencillos (o no dependiendo de la envergadura del sitio web), ahora por mucho que tengamos todos estos pasos bien dados, cunado incluyamos Google Adsense tendremos una pésima puntuación en PageSpeed Insights, vamos a ver como solucionarlo.
Optimizando Google Adsense para PageSpeed Insights
He leído muchos tips sobre como hacer esto y realmente ninguno es efectivo y no cumple su función, si acaso puede variar unos puntos arriba dependiendo el momento del test, y pasan por opciones de incluso reducir los anunciantes o el numero de bloques a incluir en tu página, tengo que decirte algo..., esto no es necesario hacerlo para obtener una buena puntuación, ni necesitas darte tantos golpes de cabeza para ello, la solución es mucho más sencilla o por lo menos así lo veo yo.
Carga los bloques de anuncio solo cuando el usuario este en la zona de este bloque, lo que también es llamado como lazy load, esto marcara la diferencia drásticamente y obtendrás una puntuación mucho más alta al instante, evidentemente si tienes 6 bloques de anuncios todos en la parte alta de tu website, todos cargaran y el rendimiento se vera afectado igualmente, si bien puede mejorar algo con este truco, al tener tantos bloques supondrá muchas peticiones al servidor de anuncios con sus correspondientes imágenes, fuentes, etc.
Para implementar esto es bien sencillo usando React, podrás hacer esto mismo sin React implementando tu código javascript de una manera similar.
Ejemplo de código para carga diferida (Lazy Load) con React para anuncios Adsense
import React from 'react';
import PropTypes from 'prop-types';
import LazyLoad from 'react-lazyload';
export default class Adsense extends React.Component {
static propTypes = {
className: PropTypes.string,
lazyLoad: PropTypes.bool,
style: PropTypes.object, // eslint-disable-line
client: PropTypes.string.isRequired,
slot: PropTypes.string.isRequired,
layout: PropTypes.string,
format: PropTypes.string,
responsive: PropTypes.string
};
static defaultProps = {
lazyLoad: true,
className: '',
style: { display: 'block' },
format: 'auto',
layout: '',
responsive: 'false'
};
constructor(props) {
super(props);
this.ready = !props.lazyLoad;
}
componentDidMount() {
this.load();
}
shouldComponentUpdate() {
return false;
}
load() {
if (window && this.ready) {
try {
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (err) {
console.log('Error loading ads', err);
}
}
}
render() {
const {
className, style, client, slot, layout, format, responsive, lazyLoad
} = this.props;
const adComponent = (
<ins
className={`${className} adsbygoogle`}
style={style}
data-ad-client={client}
data-ad-slot={slot}
data-ad-layout={layout}
data-ad-format={format}
data-full-width-responsive={responsive}
/>
);
if (!lazyLoad) {
return adComponent;
}
const LoadFunction = () => {
setTimeout(() => {
this.ready = true;
this.load();
}, 10);
return adComponent;
};
return (
<LazyLoad once offset={300}>
<LoadFunction />
</LazyLoad>
);
}
}
Hemos usado el paquete react-lazyload para este ejemplo, tú puedes implementar si deseas tu propia solución.
Como ves es bastante sencillo o por lo menos no es imposible, y ahora estarás diciendo, muy bonito pero no he visto pruebas de que lo que dices es verdad, pues bien aquí te las traigo 😃.
Como ves no es 100 pero casi jajaja, es más que suficiente, aunque creo que podría lograr 100 puntos para mí es más que suficiente y realmente ya es una puntuación muy buena, además de que tampoco tenemos que obsesionarnos tanto con eta puntuación si bien es un índice que Google valora no tiene que ser 100 con estar en unos valores óptimos es suficiente.
En la versión móvil la puntuación fue de 75.
Obtener una puntuación alta para móviles siempre es más complicado, y ese valor es un valor más que aceptable, aunque creo también que optimizando un poco mejor la entrega de imágenes y disminuyendo tamaños podría lograr llegar a casi 100 o incluso 100 en algunos escenarios, pero para mí es más que suficiente y no creo que una puntuación mayor vaya a marcar la diferencia ni en experiencia de usuario ni en las SERPs. No te obsesiones tanto con alcanzar una puntuación extremadamente alta, muchas veces es prácticamente imposible por los agentes externos, además los mayores sitios de internet tienen una puntuación pésima (o muchos de ellos) y no los veo preocupados por su puntuación en PageSpeed, claro dirás, esquí esta gente están en otro nivel, pues si es cierto, pero también es cierto que no necesitas una puntuación de 100 para tener un buen rendimiento o buenos puestos en las SERPs aunque no estés en ese nivel, con tener una puntuación aceptable es suficiente en la mayoría de los casos por no decir todos.
Espero les haya servido y puedan ponerlo en practica.
