I am using https://web.dev/measure/ to help understand what improvements I can make to make my site load faster and rank higher. From my audit result I got the suggestion to:
- Eliminate render-blocking resources
This past weekend I made an attempt to improve my site according to the suggestions. BUT my SEO has been totally ruined from the changes! 😭 Lost half of my organic clicks and impressions are down and falling...
I have asked other dev-friends to look through the PRs I made to make sure I made no unintended changes. Nothing like that has been found. The two changes I made was:
I am using both paypal and Stripe on my site and loads their SDK's in a
<script>-tag. I read about the option of adding
async to the script-tag to prevent render blocking. Like this (plz note the async):
<script src="https://js.stripe.com/v3" async></script>
<script src="https://www.paypal.com/sdk/js?client-id=my_id&funding=credit,card" async>
Removal of jQuery. I wanted to remove jQuery. I hade some DOM-manipulating jQuery stuff. mainly some showing, color and opacity changes on hover. I translated all to vanilla js and it all works as intended. I then removed jQuery successfully.
After doing both changes my speed score on https://web.dev/measure got better! I was so happy. Then the day after (or maybe two days after) I started to notice the drop that is still on going. So my question to you now is: Do you know of any changed mentioned above could be the cause? Does google not like async loading of external scripts? Does google not like DOM-manipulation? If so I hade that before but it was jQuery doing it. Does jQuery do something that google likes? I am very confused and all help or thoughts would be appreciated. 🙏