WordPress is among the top well-known CMS (CMS) around the globe, with a market share of greater than 60 percent.
An extensive support community and numerous free plugins make creating websites using WordPress (WP) cost-effective and are the primary reason why the market share of WP is so large.
But, as you are aware, installing plugins is not without cost.
They are often able to lower the core Web Vitals scores. For instance, they might use inefficient CSS or JS files on every page they’re not required.
To fix that issue, it is necessary to engage a professional programmer to complete the task for you. Buy a premium plugin or take an easy learning route and do it yourself.
Consider a hybrid approach and address some of your problems by creating custom code or other aspects using plugins.
This article is designed to assist you on your way to learning by introducing the essential WordPress hooks that will help you increase the technical SEO of your site.
What Is A WordPress Hook?
WordPress hooks are the most important features included in WP, allowing developers to expand the functionality that comes with the CMS without altering the core WP files. This makes it simpler to upgrade themes or plugins without compromising customizations made by custom.
They offer a powerful method for developers to enhance WordPress’s capabilities and make modifications to their websites.
What Is A Filter Hook?
Hook filter functions can be used to alter its output before when it’s returned. For example, add page titles to your blog’s name with the WordPress title filter hook.
What Is An Action Hook?
Action hooks permit programmers to execute specific actions at a certain point in the operation of WP Core, plugins, or themes, for instance, when the blog post is published and when JS and CSS documents are loaded.
If you can master a few action hooks or filters, you will be able to perform a broad array of tasks without the necessity of hiring developers.
We will review the hooks that follow:
- wp_enqueue_scripts
- wp_head
- script_loader_tag
- template_redirect
- wp_headers
wp_enqueue_scripts
This is precisely the hook that you apply to block unnecessary CSS and JS documents from loading onto webpages that aren’t needed.
For example, the renowned Free Contact Form 7 plugin boasts more than 5 million installations and downloads CSS and JS files across all pages, whereas you only need it to load if the contact form is.
To remove CF7 CSS or JS files from other pages from the Contact page, you can apply the code below.
function my_dequeue_script() add_action(‘wp_enqueue_scripts’, ‘my_dequeue_script’, 99 );
There are a few essential aspects that are the priority for action hooks. It has been set at 99 to ensure our modifications are first in the queue.
If you have it set to, for instance, 10, it won’t perform because the CF7 enqueue function makes use of priority 20. Set a large enough focus to ensure that yours runs first and takes effect.
In addition, in our code, we utilized as an argument for a function the identification number “contact-form-7”; you may be wondering how I discovered this.
It’s easy. Use the inspect element tool in your browser to check the id attribute on script or link tags.
You can inspect your website’s source code by scanning it and begin by dequeuing every JS or CSS file that is not required.
wp_head
This action hook can include the website section’s resource JS, CSS files, or meta tags.
Using this hook, you can use the theme to load above-the-fold preload resources into the head section. This could increase your LCP score.
For instance, font preloading is one of Google’s recommendations, as well as images that are featured on pages with articles, must be loaded above the fold, and you should preload them to improve LCP.
To accomplish this, follow the code in the snippet.
Function my_preload() {>
Two lines will be used to preload Google fonts. We then preload the logo and check whether the article contains a featured image. If it does, you can preload featured images.
Aside from that, The theme or site might have webp images enabled, and, in this scenario, you need to load the web versions of these images.
script_loader_tag
There was a lot of talk about render-blocking resource issues that deferring and async load JavaScript tags can solve. It is crucial for enhancing the performance of FCP as well as it is essential for improving LCP.
This filtering action is utilized for filtering this HTML output of script tags. You require this filter to delay or async your theme’s or plugin’s CSS/JS files.
function my_defer_async_load( $tag, $handle ) add_filter(‘script_loader_tag’, ‘my_defer_async_load’, 10, 2);
This filter can accept two options: HTML tag, and script handle, which I discussed in the previous paragraph when looking at the inspect element.
You can utilize the handle to determine which script to load or delay.
Leave a Reply