How to Pass Core Web Vitals and Google Page Speed Score with WordPress

You can do a small step and start something that matter for your #WordPress website to start passing the Core Web Vitals and Google Page Speed Scores.

Note: this simple guide is for medium skilled WordPress developers who work with their own custom WordPress Themes or Child Themes where you can add specific code to the functions.php

Don't want to read the guide watch the Video first to understand what's the idea of this custom Script.

Go to the Video at the bottom of this article

Follow this simple steps to try how it's work

For Example if you want to run a specific file, script, code or template part on specific position after above the fold and want to hide it on above the fold you can try with very simple few rows of code.

Follow this steps to see if it work for you

• Step 1: Open your WordPress Theme folder and find your theme name
• Step 2: Find you WordPress Theme functions.php file
• Step 3: Open the file with your favorite IDE and at the bottom of the file add this simple function to load a file/script/path to folder or .php file only when a visitor scroll to specific <div> HTML Element in to your Page/Post WordPress Template
• Step 4: Add you id="your-custom-id-here" in to your <footer> or other <div> HTML element or if you have one choose where yo fire up the custom hook and add a php file on scroll to this div id html element
• Step 5: Create new .php file in to your theme folder or some internal folder in to the theme root with name hooked.php. Then - add some Random Text like It Works Like a Charm in the hooked.php file and save it
• Step 6: The file created above will be added in to the ofload_custom_script_after_footer function script below. You need to find and change the path to your hooked.php file in tho this snipper code which is part of the main function. Find the url: '<?php echo get_template_directory_uri() ?>/layout/footer/hooked.php',
• and change it with your hooked.php folder or path to the file. If you create this file in to the root folder just remove the /layout/footer/ path from the example. This will be your main .php file to hook in to the code only if users reach the specified id name.
• Step 7: Add the customise function script belowe after the last row with code in to your function.php file in your theme root folder.

function ofload_custom_script_after_footer() 
????>
?<script>
?jQuery(document).ready(function($) {
???????var reachedFooter = false;
???????var targetElement = document.getElementById('your-custom-id-here');
???????// Options for the Intersection Observer
???????var options = {
???????????root: null,
???????????rootMargin: '0px',
???????????threshold: 0.1 // Adjust the threshold as needed
???????};
???????var observer = new IntersectionObserver(function(entries, observer) {
???????????entries.forEach(function(entry) {
???????????????if (entry.isIntersecting && !reachedFooter) {
???????????????????// Add your custom JavaScript code here
???????????????????// Example:
???????????????????console.log('Reached the target element in the footer!');
???????????????????reachedFooter = true; // Set a flag to execute the code only once
???????????????????// Include the PHP file
???????????????????$.ajax({
???????????????????url: '<?php echo get_template_directory_uri() ?>/layout/footer/hooked.php',
???????????????????????dataType: 'html',
???????????????????????success: function(data) {
???????????????????????????// Insert the content of the PHP file into the specific div
???????????????????????????$('#your-custom-id-here').html(data);
???????????????????????}
???????????????????});
???????????????} else if (!entry.isIntersecting && reachedFooter) {
???????????????????// Remove the included PHP file
???????????????????$('#your-custom-id-here').empty();
???????????????????reachedFooter = false; // Reset the flag
???????????????}
???????????});
???????}, options);
???????// Start observing the target element
???????observer.observe(targetElement);
???});

</script>
<?php
}
add_action('wp_footer', 'ofload_custom_script_after_footer');{        

Step 8: Replace 'your-custom-id-here' with the actual ID of the div element that you want to reach in the header, content, footer or other sections of your #WordPress Template.

Step 9: Save the functions.php file and go to your home page

Step 10: Refresh the page and scroll to the id element you added in to the function the - text weve aded in to the hooked.php should be visible in the html section where the id="your-custom-id-here" was added. Then when you scroll to top the text from the hooked.php will gone also the .php file will be removed.

How to Pass Core Web Vitals and Google Page Speed Score with WordPress

Conclusion:

This way you can decrease a lot some nesseasry scripts that load in to the header.php in to Above the Fold and many more variant. You can run this scripts, functions and code only when users reach specific <div> id html elements and they are in the broswer visible screen. When they are not visible the scripts in to your hooked.php file will be removed.

Note: this is an experiment and we don't have enough data to say it is 100% Page Speed and Core Web Vitals Passing Score solutions but you can test it and see the idea to hook and load the slowest scripts, codes and functions for your page and failed scores from the testing tools and see if this solution helps.

Watch the Full Video in our YouTube Channel

Subscribe to our Channel in YouTube - SEO Book Pro