How to improve the speed of your page with Google AdSense
Steps to take to get the best speed rating with PageSpeed Insights without Google Adsense affecting us with React and Material-ui
PageSpeed Insights it is a tool to measure the time it takes a page to load, both mobile and desktop. The metric tells us how much time the user has to wait for it to see the content and is an important factor to position in the first pages of Google (SERPs), besides that obviously in case of having a slow load it will be a bad experience for our visitors and will probably leave before loading if they have to wait a long time.
Have a high score in PageSpeed Insights without Google Adsense it is a relatively easy task, the hard part comes when we want to monetize our websites, and we choose to include the Google platform for advertising, although it may seem a lie, and they themselves want a faster web, Google Adsense for many reasons does not meet any of the criteria of optimization of PageSpeed Insights, these reasons are simply that the platform needs to load Javascript documents and images that can not be cached, since these come from external sources in many cases, besides the code of Adsense it is updated periodically, so the cache is useless.
A website with a score of 95-100 points in PageSpeed Insights can perfectly go to 25-40 after including Google advertising (and I do not exaggerate), which makes users have worse usability when entering our websites, as well as being an important factor to position in the SERPs.
There is a lot of debate around this, and they almost never know how they can fix it or at least I have not seen it anywhere or simply the advice they give is quite obvious or useless to implement not to scratch more than a few misers 20-30 more points and on top of it, worsening the conversion of advertising.
React, Material-ui and Node.js
Let's explain how to get 100 points (or almost) in the test Google PageSpeed with React and Material-ui, but the "tips" you will be able to use them on any platform without any problem, but if you use these two you will have more chewed everything.
Apply the optimization that PageSpeed advises us
To reduce to the maximum possible the number of styles (css) that we load in our page, it chooses to include the styles within the HTML in the
<head> </head>, and if you need to load, wait the load until after loading everything important, we simply load the css of each page into the head, and we do not need to load more style sheets.Optimize your images and use appropriate sizes to minimize the amount of KB that the browser will need to download. You can use Modernizr to detect if the user's browser is compatible with next-generation images and, if not, load the original format.
Make the minimum possible requests of javascript files and that these have a weight (Size) as low as possible, you can use tools like webpack to minimize, compress and optimize the size of your files and static images.
Mirify the generated HTML, if you are using React, it does it by default.
Use CDNs (Content Delivery Network), you can use Cloudflare that is free and is great and is also responsible for compressing with GZIP the data sent, and if you do not use Cloudflare, compress what the server sends with GZIP, do not mades everything uncompressed 😇.
Use TLS 1.3 with option 0-RTT (Zero Round Trip Time Resumption by its initials in English), with Cloudflare you just have to activate this option and you're done.
Well these are the simple steps (or not depending on the size of the website), now as much as we have all these steps well taken, when we include Google Adsense we will have a terrible score in PageSpeed Insights, we will see how to solve it.
Optimizing Google Adsense for PageSpeed Insights
I have read many tips on how to do this and none is really effective and does not fulfill its function, if it can vary a few points up depending on the time of the test, and go through options to even reduce advertisers or the number of blocks to include in your page, I have to tell you something ..., this is not necessary to do it to get a good score, nor do you need to give yourself so many blows to it, the solution is much simpler or at least that's how I see it.
Load the ad blocks only when the user is in the area of this block, which is also called as lazy load, this will make a drastic difference and you will get a much higher score instantly, obviously if you have 6 ad units all on the top of your website, they will all load and the performance will be affected equally, although you can improve something with this trick , having so many blocks will involve many requests to the ad server with their corresponding images, sources, etc.
To implement this is very simple using React, you can do this without React implementing your javascript code in a similar way.
Code example for deferred loading (Lazy Load) with React for Adsense ads
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>
);
}
}
We have used the package react-lazyload for this example, you can implement if you want your own solution.
As you can see it is quite simple or at least it is not impossible, and now you will be saying, very nice but I have not seen evidence that what you say is true, well here I bring them to you 😃.
As you can see it is not 100 but almost hahaha, it is more than enough, although I think I could achieve 100 points for me it is more than enough and it really is a very good score, besides that we do not have to obsess as much with this score although it is an index that Google values does not have to be 100 with being in optimal values is enough.
In the mobile version, the score was 75.
Obtaining a high score for mobiles is always more complicated, and that value is a more than acceptable value, although I also think that optimizing the delivery of images a little better and decreasing sizes could reach almost 100 or even 100 in some scenarios, but for me it is more than enough and I do not think that a higher score will make a difference in user experience or SERPs. Do not get so obsessed with reaching an extremely high score, often it is practically impossible for external agents, in addition the biggest internet sites have a bad score (or many of them) and I do not see them worried about their score in PageSpeed, of course you will say, skiing these people are in another level, because if it is true, but it is also true that you do not need a score of 100 to have a good performance or good positions in the SERPs even if you are not at that level, having an acceptable score is enough in most cases not to say all.
I hope you have served them and can put them into practice.