How do you move WordPress to a new domain? Moving my WordPress site to a new domain gave me a headache, but I’m sure it was worth it. I mean, check out my shiny new domain name! .dev, isn’t it awesome? If this move doesn’t give me a SEO boost, I don’t know what does.
Why did it give me a headache? I wanted to move WordPress using an external domain registrar with 301 redirects, without affecting my Let’s Encrypt SSL-certificates and Google Search Console. And not a tutorial in the world to help me out.
Well, I figured it out and today I’ll share it with you.
By now your Pingdom score should be nearing the 100. However, Google Pagespeed is a bit harder to satisfy. Google gives great rewards to sites that efficiently handle their above-the-fold content and severely punishes those that don’t. Even after all the optimizations we already did in the previous chapters, Pagespeed will still show a big red warning: eliminate render-blocking Javascript & CSS in above-the-fold content. Luckily, we’ve got Autoptimize on our side.
Extracting your Above-the-fold Content with Critical Path CSS Generator
We’ll be using Autoptimize to eliminate the following warning in Google Pagespeed Insights:
Eliminate render-blocking Javascript and CSS in above-the-fold content.
In order to do this, we need to collect all of our CSS code so we can extract the Above-the-fold Content from our WordPress blog. Recently I found a free online which makes this insanely easy.
Eliminate render-blocking Javascript and CSS in above-the-fold content with Autoptimize
In order to stop the Javascript and CSS from render-blocking you must add the Critical Path CSS you just generated to your site’s header. For this we’re going back to Autoptimize’s settings:
Within the ‘CSS Options’ section there’s an option called ‘Inline and Defer CSS?’ That’s exactly what we’re looking for.
Check this option and paste your Critical Path CSS (the first text area on Sitelocity.com — you don’t need the second field!) into the text area that just magically appeared. Be sure to remove the <style> and </style> nodes wrapped around the generated output your just copied. Click ‘Save Changes and Empty Cache’.
Extra Auto-Optimizations
If you run another Pagespeed Insights analysis you’ll see that your score has increased even more! Maybe it has even reached the perfect 100/100 score.
Probably, you will never see eliminate render-blocking Javascript and CSS in above-the-fold content as a suggestion in Google Pagespeed Insights anymore. In some cases, it might still be listed as a (yellow) ‘consideration’. Either Autoptimize’s CSS-file or another file could be blocking the page from rendering immediately. In any case, Autoptimize offers a few tiny tweaks that I’d recommend to anyone.
Combine External Javascript: Disable Emoji’s
I don’t think anyone uses this feature in WordPress.
While it is forcefully integrated into the WordPress-core, our new BFF Autoptimize offers an options to disable it:
Click the ‘Extra’-tab in Autoptimize’s Settings-page,
Check ‘remove emojis’.
This disables wp-emoji.js from loading entirely, eliminating one more DNS lookup from your total pageload. Now you can wave goodbye to Pagespeed Insights’ and Pingdom’s suggestion to combine external javascript.
Remove Query Strings from Static Resources
Also located within the ‘Extra’-tab you’ll find another useful feature in Autoptimize. It’s the option to remove query strings from static resources. This does not improve pageload times, but does improve your score on Pingdom and Pagespeed Insights. It removes the ver parameter from all your static (JS and CSS) resources, guaranteeing maximum usage of each visitor’s browser cache.
Leverage Browser Caching: Host Google Fonts Locally
You might’ve noticed the different options Autoptimize offers for Google Fonts. The most interesting option here is ‘Remove Google Fonts’.
Autoptimize implements an efficiënt way to parse your blog’s source and remove any URL’s pointing to Google’s Webfont services.
Just removing them will break your sites typography and design. Before removing them, you need locally hosted copies to replace them with. That’s why I built OMGF. Combining Autoptimize with OMGF is simply the easiest, most efficient way to locally host Google Webfonts and leveraging your browser cache. I suggest you click that link.
You’re welcome.
If you’re a Google Analytics user and you’re being punished by Pagespeed Insights and/or GT Metrix and/or Pingdom for using it, it’s about time you learned about CAOS. It does exactly what OMGF does for Google Fonts: it allows you to use Google Analytics with an always up-to-date, local version of analytics.js, instead of an externally hosted version. Effectively leveraging your browser cache even further, while preserving Google Analytics’ full functionality.
Summary
In this chapter we’ve focussed on eliminating render-blocking Javascript and CSS in above-the-fold content by configuring Autoptimize to use our pre-generated Critical Path CSS. Using Autoptimize’s advanced features, we’ve also discovered ways to eliminate suggestions such as combine external JavaScript, leverage browser caching and remove query strings from staticresources. Congratulations! You’ve officially tweaked your WordPress blog for maximum performance. Have any questions or remarks? Leave a comment!
Google Fonts. Every WordPress blogger uses them. It’s an easy — if not the easiest — way to improve your blog’s looks. Pagespeed Insights. We’ve all heard of that too. And we all want to achieve the highest possible score. Both are brought to you by the same entity we’ve come to know, love — and hate: Google. Love, because they gave us these beautiful fonts. Hate, because as soon as we use them, it lowers our score on Pagespeed Insights!
Today I’m showing you how you can achieve the best of both worlds:
I’ve already written a lot of posts ever since the new GDPR laws were introduced. Most of CAOS’ code had to be rewritten for the sake of GDPR Compliance. Now we’re nearing — the big — v2.0 and many options have been added. To WordPress — and CAOS. This post will function as a Complete Guide through the jungle that is called GDPR Compliance.
An average blog can locally host analytics.js without any fuss. If you’re in ecommerce (e.g. WooCommerce) things get tough, because hosting your Analytics file locally, usually means you can’t use most of Google’s Universal Analytics features.
Today I’m going to show you how you can easily host analytics.js locally, leverage browser caching and still profit from Universal Analytics’ advanced features.
CAOS has been around for a few years now, bathing in all of the glory it accumulated by hosting analytics.js locally. About two months ago, our lives are enriched by the new GDPR laws. For me, it meant getting back to work and make sure CAOS is GDPR compliant as well. I’ve introduced many changes since then. One of the major new features though, is complete compatibility with other Cookie Notice plugins for WordPress. By far the most popular is Cookie Notice for GDPR. Today I will show you how to configure CAOS to work with this plugin. So you can host analytics.js locally and be GDPR compliant at the same time!
Awesome! If you made it this far, that means you told Google to back off and respect your visitors’ privacy. It also means that your website almost complies with the GDPR. Almost. Because in order to fully comply you have to make quite a few modifications to your site’s Google Analytics tracking-code.
Breaking News: The Austrian Data Protection Authority (“Datenschutzbehörde”, “DSB” or “DPA”) has ruled that Austrian website providers using Google Analytics are in violation of the GDPR. Since other European countries are likely to follow in this decision, this post has been updated to include measures needed to keep using Google Analytics in compliance with GDPR.
Configuring your Google Analytics tracking code to comply with the GDPR
To fully comply, a few additional measures need to be taken when using Google Analytics.
Before, implementing the aip parameter into your tracking code would suffice. However, since the ruling in Austria of January, 2022 additional measures need to be taken. Specifically:
The last two octets of the IP address need to be aonymized (as opposed to just the last octet)
The IP address needs to be anonymized before its sent over to Google Analytics
Data needs to be proxied through a server (within the European Union) and fully anonymized before it crosses the border and is sent to Google Analytics
Universally unique identifiers (UUID) currently used by Google as an additional method to identify users have to be disabled.
Where possible, I’ll add coding examples of how certain measures should be implemented into your (tracking) code. Unfortunately, for certain measures (e.g. proxying traffic) there is no one size fits all solution.
If you’re not comfortable with (or interested in) coding and/or doing the work yourself, upgrade to CAOS Pro and you’ll be all set within minutes.
5. Anonymize your visitor’s IP-address properly
Google Analytics created an option to remove the last octet (the last group of 3 numbers) from your visitor’s IP-address. This is called ‘IP Anonymization‘. This isn’t actual anonymization, because Google takes care of the anonymization for you — on their servers.
To fully comply you’ll want to make sure the IP address is masked before its sent over to Google Analytics’ API.
Lastly, only replacing the last octet of an IP address isn’t considered anonymous enough by Privacy watchdogs. Proper anonymization means replacing the last two octets of an IP address.
This procedure also comes in handy if you want to use Analytics without prior consent from your visitors. However, some countries (e.g. Germany) demand IP’s to be anonymized at all times.
Here’s an example of how to achieve this in PHP:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This script detects all the parts of the IP address and replaces the third and fourth octet with a zero.
Unfortunately, there’s no one size fits all solution for this, but if you’re a WordPress user, you’re in luck!
With CAOS Pro, masking IP addresses and proxying Google Analytics traffic is a matter of a few clicks!
With Anonymize IP and Stealth Mode enabled in CAOS Pro, the IP addresses will be masked before sending them to Google Analytics.
Within CAOS Pro’s settings page (Settings > Optimize Analytics) do the following:
Under Basic Settings click Anonymize IP
Click Save Changes & Update
With Stealth Mode disabled, CAOS Pro will add the aip parameter provided by Google into your tracking code.
To use Google Analytics in compliance with the GDPR, the aip parameter doesn’t suffice and a proxy is required to truly anonymize the IP address before it’s sent to Google Analytics’ servers.
Using a proxy for your Google Analytics traffic has a huge bonus side effect! It also bypasses ad blockers so you’ll get a 100% accurate representation of your website’s traffic!
6. Proxy all traffic to Google Analytics with Stealth Mode
Modifying Google Analytics’ traffic code to intercept its traffic isn’t very hard. By creating a sendHitTask, we can reroute the traffic to our own custom proxy file:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
A proxy could simply be anything from a single script to an API endpoint. As long as it captures the data and modifies it according to the specified requirements before passing it to Google Analytics’s Measurement Protocol. It could also be a custom API endpoint (much like CAOS’ Stealth Mode.)
To anonymize all data before it’s sent to Google Analytics you could should use CAOS Pro. To enable its proxy, do the following:
Go to Extensions
Enable Stealth Mode (Pro)
Check if cURL is enabled on your server by clicking the link in the description of the Request Handling option.
If cURL is succesfully detected, choose the Fast (Super Stealth API) option and click Save Changes & Update. Otherwise leave it to Default (WordPress API)
At this point, CAOS Pro will use its built-in (on-premise) API to proxy all traffic to Google Analytics.
7. Lose the UUID trail created by Google
As an additional method to further identify users, Google uses a universally unique identifier. Even with the IP address masked, Google will still be able to identify users if this UUID is still stored somewhere in a browser cookie.
To achieve this, your Google Analytics instance needs to be made cookieless and should be able to generate and store its own UUIDs (unknown to Google)
Are you a CAOS Pro user? Then you’re in luck! By simply enabling Cookieless Analytics (Pro) under CAOS Pro’s Advanced Settings you’ve taken the final measure needed to keep using Google Analytics in compliance with the GDPR. Get CAOS Pro now!
While this measure is meaningless on its own, it is an important step. Disabling cookies in Google Analytics will assure you and your users that any UUID’s stored in cookies will never be used again.
In order to disable cookies, include the storage parameter into your Google Analytics tracking code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Now we’ve made sure the UUID Google uses to identify the user is lost, we need to feed Google a random one, because the uid is a required parameter in Google Analytics requests.
To activate UUID randomization, include the following before your Google Analytics tracking code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This script is a modified version of Helge Klein’s cookieless tracking script and includes a few optimizations and tweaks:
Instead of the IP address (as a truly unique factor in the hash) it uses a UNIX timestamp.
To avoid (page) caching collisions, it uses the browser’s localStorage object to guarantee proper tracking of sessions and returning visitors.
It includes proper logic to set an expiry time for the generated UUID.
In the previous code snippet, the UUID is stored for 30 days and is stored using the browser’s localStorage. This avoids unexpected collisions with (page) caching mechanisms and allows us to track users (and returning visitors) over an extended period of time.
Then make sure the generated UUID is set as the clientId in Google Analytics.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
After this, you’ve taken the necessary measures to keep using Google Analytics in compliance with the GDPR. Even after the ruling of January, 2022.
8. Inform about Analytics usage and how to opt-out
At this point you’re allowed to process your visitors’ data without their prior consent. You still need to inform them about it and (optionally) allow them to opt-out.
Informing your visitors comes down to adding a Privacy Policy to your site. I could give you a full walkthrough on this, but I think that’s beyond the scope of this article. You can generate a privacy policy for free and if you made it this far into this tutorial, I suppose you know to how to copy + paste the text to a new page in WordPress and put it in your blog’s menu. 🙂
Conclusion
Now you can keep using Google Analytics in compliance with the GDPR, and as a bonus your bypassing ad blockers to further complete your Google Analytics data.
Since you’re no longer collecting personal data, it’s not required to request prior consent, unless you’re still collecting personal data using other servers.
You’ve configured Google Analytics to respect your users’ privacy and CAOS Pro has helped you to truly anonymize user data before its sent over to Google Analytics using a proxy. Was this tutorial helpful? Do you have any suggestions for fellow readers? Did I miss anything? Please let me know in the comments!
