How to add an HTML <rel=preload> tag to the Header?

Question

Since the google speed insights report suggests adding a

< link rel="preload" href="/lity.css" as="style" />

to speed up the loading of the following resources

https://www.myoutlet.lt/wp-content/plugins/gdpr-cookie-compliance/dist/styles/lity.css

on the website https://www.myoutlet.lt

The website is based on the Avada theme.

I am wondering how could I possibly achieve that!

More concretely, I've thrown a glance to the header.php file of both the main and the child theme, but since they are coded in PHP I can't really figure out on my own how to add any HTML to it.

There should be for sure a way to inject HTML into the webpage by means of recurring to some php-function in the header.php file. As a junior SEO I acquired some technical understanding, but I'm very far from being a developer.

The one who will show me the way will earn my eternal gratitude! Thank you very much in advance for any valuable hint.

May the force be with you, Roman

P.S.: I have to achieve this manually, without any plugins (the website is already quite slow on itself!)

Answer 1

The hook you're looking for is wp_head.

functions.php

add_action( 'wp_head', 'se343581_add_preload_tag', 5);
function se343581_add_preload_tag()
{
    echo '<link rel="preload" href="'. 
         plugins_url('/gdpr-cookie-compliance/dist/styles/lity.css') .
         '" as="style">';
    //
    // -- if added in plugin file --
    // echo '<link rel="preload" href="' . plugin_dir_url( __FILE__ ) . 'some_subdir/file_name.css" as="style">';
}