When it comes to improving website performance, Google PageSpeed Insight is an invaluable tool. But what about when you want to monetize your site with Google Ads? Can you have your cake and eat it too: a fast site and ad revenue? Fortunately, the answer is yes. In this article, we will discuss proven techniques for optimizing your website while using Google Ads, without sacrificing performance.
The Speed Issue with Google Ads
Adding Google Ads to your site can often lead to a reduction in loading speed. This lag is typically due to the fact that advertising JavaScript scripts run before your content is fully loaded. As a result, your site can become slow, which can negatively impact user experience and ultimately your search engine ranking.
The solution? It is essential to optimize the scripts and files related to Google Ads. Not only will this improve user experience, but it will also increase your chances of achieving a better ranking on Google.
To accomplish this, several options are available to you, including the use of plugins and modifications at the code level. Autoptimize is one such plugin that can help speed things up by optimizing your JavaScript.
How to Use the Autoptimize Plugin?
Setting up Autoptimize is a crucial first step in enhancing your website’s performance. After activating the plugin and optimizing the JavaScript, you can move on to the next step for even better performance.
CSS Optimization for Increased Speed
Once the “Optimize JavaScript” option is checked, it’s time to focus on your CSS files. In the Autoptimize settings, also check the “Optimize CSS” option. This action reduces the size of CSS files in a similar way to what you did for JavaScript, eliminating unnecessary spaces, comments, and combining multiple files into one. This consolidation reduces the number of HTTP requests needed to load your site, which can significantly decrease page loading time.
- Reduction of HTTP Requests: Each additional CSS or JavaScript file that a browser has to download can increase your site’s loading time. By combining them, Autoptimize reduces these requests, thus speeding up the display of your site.
- File Compression: In addition to combining files, Autoptimize compresses them, reducing their size without losing quality or functionality.
- Font Management: Another interesting option is font optimization. Selecting “Optimize Fonts” allows for more efficient font loading, thus reducing rendering blocks.
- Lazy Loading Images: Lazy loading is a feature that only loads images when they enter the user’s viewport. This helps to speed up the initial loading time of the page.
Image Optimization
Another key step in improving your site’s speed is image optimization. Although Autoptimize does not directly offer an image optimization option, it is highly recommended to use a complementary plugin for this. Optimized images mean smaller files to load, which greatly contributes to site speed.
- Choosing the Right Format: Use modern image formats like WebP, which offer similar quality to traditional formats but with significantly reduced file size.
- Smart Compression: Tools like Imagify or ShortPixel can compress your images without significant quality loss, making your site load faster without compromising visual experience.
- Resizing Images: Ensure your images are not larger than they need to be. Resized images to fit the allocated space reduce the weight of the page.
Cache and CDN
Finally, leveraging caching and content delivery networks (CDN) can further reduce your site’s loading time. Autoptimize integrates well with caching plugins like WP Rocket or W3 Total Cache, which store a static version of your pages to serve them quickly to returning visitors. Using a CDN can also distribute your content from servers located closer to your visitors, thus reducing loading delays.
- Cache Configuration: Proper cache configuration allows you to quickly serve preloaded pages to your visitors, reducing the work required to generate each page on the fly.
- CDN Integration: A CDN stores copies of your site on multiple servers around the world, ensuring that users are always close to a source of your content.
By following these steps and fully leveraging the capabilities of Autoptimize, you can significantly improve your website’s performance, thus providing a better experience for your users while enhancing your SEO.
Code Modification: An Additional Step
If you’re comfortable with coding, another step you can take is to add custom scripts to further optimize the loading of your Google Ads. By placing certain JavaScript code just above the </body> tag, you can delay the loading of ads until user interaction is detected on the page.
To get started, when using the code for your Display ads (or anything else, everything except AUTO), the code provided by Google to place on your site looks like this:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>To begin, you will remove this part:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>To keep, therefore, at the location(s) where you want to see your ad(s), just this code:
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>The JavaScript part you removed is important, but there is no reason to use it multiple times in the case of multiple ads; it is much better to place it at the bottom of the page, in the footer.php file of your template, just above the </body> tag; you will gain considerably in performance, but that’s not enough. Instead of directly copying code to the bottom of the page, I’ll propose an even more powerful alternative. Here’s the code you will copy:
<script id='flying-scripts' type='text/javascript'>const loadScriptsTimer=setTimeout(loadScripts,5*1000);const userInteractionEvents=["mouseover","keydown","touchstart","touchmove","wheel"];userInteractionEvents.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){loadScripts();clearTimeout(loadScriptsTimer);userInteractionEvents.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})}function loadScripts(){document.querySelectorAll("script,iframe[data-type='lazy']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-src"))})}</script>
<script data-ad-client="ca-pub-3xxxxxxxxxx" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-type="lazy"></script>Code for Deferred Loading
The script to add is quite simple. It uses a set of user interaction events to trigger the loading of Google Ads scripts. This method ensures that the ads do not slow down the initial loading of the page.
The Role of `data-type=”lazy”`
The script uses the attribute data-type="lazy" to identify scripts and iframes that should be loaded lazily. When an interaction event is detected, the script replaces the data-src attribute with src, thus triggering the loading of the script or iframe.
Summary of Steps
| Step | Action | Tool/Code Used |
|---|---|---|
| 1 | Optimize JavaScript | Autoptimize |
| 2 | Combine JS Files | Autoptimize |
| 3 | Add Code for Deferred Loading | Custom Script |
Don’t Forget: Test, Test, Test
Before deploying these changes on your live site, make sure to test their effectiveness using Google PageSpeed Insight. A good score is an indicator that you are on the right track, but remember to monitor key metrics like loading time and conversion rate.
Considerations for Performance Tracking
Regularly tracking your site’s performance will give you a clear idea of the effectiveness of these optimizations. Use tools like Google Analytics in addition to Google PageSpeed Insights for a comprehensive evaluation.
Avoid Compatibility Issues
Be aware of potential compatibility issues when adding new plugins or scripts. Always test these elements in a development environment before deploying them on the production site.
Constant Monitoring is Key
Ultimately, optimizing a website is an ongoing process. The methods you use today may not be as effective tomorrow due to constant changes in search engine algorithms and web technologies.
Keep an eye on your site’s performance and do not hesitate to adjust your strategy accordingly. Better site speed is not only beneficial for SEO ranking, but it also contributes to a better user experience, which can lead to higher conversion rates and ultimately, more revenue.
Optimizing a site for speed while using Google Ads may seem like a daunting task, but with the right techniques and tools, it is entirely achievable. The steps discussed in this article should set you on the right path for a fast and profitable website.
