CODEWITHSUNDEEP
csspagespeedpagespeed-insights
Chris
Chris

Reputation: 33

Preload Key Request - Improving css calls

I am trying to improve the load speed of a website by following Goggle's PageSpeed Insights recommendations. One of the main issues I need to fix is the following: PageSpeed Insights recommendations

The webpage calls this css file:

"link rel="stylesheet" href="https:.../main.css"

and the main.css file calls the bootstrap.css file:

In main.css: @import url('bootstrap.css');

I tried reading google's developer guide on link rel=preload but I still cannot figure out what changes I need to make. Any recommendations on how I could change my css calls to improve the page load time?

Many thanks

Upvotes: 0

Views: 190

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

In the <head> of the document you simply need to add a meta tag telling the browser to preload the font.

<link rel="preload" href="yoursite.com/bootstrap.css" as="style" crossorigin>

This needs to appear before any style sheet links you may have.

The key parts are as="style" and rel="preload" - crossorigin may be needed if you utilise a CDN etc.

It does not matter that it is a linked CSS file, it will still work.

Do exactly the same for your main.css file as well.

Upvotes: 1

Related Questions