Use preload for fonts

There is a plugin called Pre Party which will let you Pre load it.

But if you need to host your fonts locally and preload it try OMGF plugin. The free version itself is enough.

@adaaasdsfe what is that link?
@ormonk Why I need other plugin for this?

I don’t think LSCache lets you preload.

• This reply was modified 3 years, 9 months ago by ormonk.

Preloading of static sources like fonts,css, js, image is good, but it is no good idea to use html preload. This tag loads sources too late and doesn’t have any advantage. LiteSpeed webserver supports Server/PUSH feature that makes preloading in response header available. This kind of preloading is much faster and loads sources before any data for response body is loaded.

To prevent preloading on every page request LiteSpeed webserver recognize if there is a preload header. If preload header exists LSWS sets cookie “ls_smartpush” automatically and if this cookie is set preloading sources will only be loaded once and not with each page request. Static sources must not be preloaded with each page request because they are already in browser cache with the first request.

Preload header can be set with PHP or in .htaccess
Example for .htaccess:

RewriteCond %{HTTP_COOKIE} !ls_smartpush [NC]
RewriteRule ^.*$ - [ENV=PRELOAD:true]
Header add Link "</path/to/static/source.woff>; rel=preload;as=font;crossorigin=anonymous,</path/to/static/stylesheet.css>; rel=preload;as=style,</path/to/static/javascript.js>; rel=preload;as=script" env=PRELOAD

Take care of different usage for tags depending on kind of static source:

Fonts: </path/to/static/source.woff>; rel=preload;as=font;crossorigin=anonymous
CSS: </path/to/static/stylesheet.css>; rel=preload;as=style
Javascript: </path/to/static/javascript.js>; rel=preload;as=script
Images: </path/to/static/image.jpg>; rel=preload;as=image

Enjoy! ??

Don’t use any plugin for HTML preload!

• This reply was modified 3 years, 9 months ago by serpentdriver.
• This reply was modified 3 years, 9 months ago by serpentdriver.
• This reply was modified 3 years, 9 months ago by serpentdriver.

Have a look at Asset Clean Up, they have an option to preload Google fonts as well as help to speed up the loading of JS and CSS files away from what a cache plugin can do

I’ve started using it alongside Litespeed and it’s helped massively

Hi,

Font preload is on our to-do plan

Best regards,

@mattthomas-photography Thanks, but I don’t want to add plugins
@qtwrk Great, hope it will be soon

@mstudioil

You don’t have to wait for an plugin update. The way I described is the same way WP cache plugin will do it in upcoming versions. It will also use server/PUSH feature from LiteSpeed webserver to preload static sources. This how to can be used not only for fonts. You can use it vor every static source.

@serpentdriver
Thanks, will this remove and fix what Google pagespeed said?
I need to add line for every font makes the problems?

I need to add line for every font makes the problems?

No, only 1 header for all fonts, css or whatever like in the example above. This is special and needed to respect ls_smartpush cookie.

FYI: Pagespeed doesn’t support server/PUSH preload.

Thanks