Eliminate render-blocking resources

[samgermain]

Lighthouse is telling me to remove render-blocking resources and listing google fonts

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.

URL	Size	Potential Savings
/css?family=…(fonts.googleapis.com)	1 KB	760 ms

url for font https://fonts.googleapis.com/css?family=Montserrat|Helvetica+Neue|Helvetica|Arial&display=swap

[alekslario]

My fork (https://github.com/alekslario/gatsby-plugin-google-fonts-with-attributes) addresses this issue. Now you can pass custom attributes to the link. In your case it's rel='stylesheet preload prefetch".

[NateAGeek]

@alekslario A PR might be nice for the author to potentially add this to the main project.

[alekslario]

@NateAGeek pretty sure this repository is abandoned. 2 open pull requests and last update was 16 month ago

[didierfranc]

Not abandoned any pr is welcome

[alekslario]

@didierfranc Can you review my PR then?

[dillonstreator]

If anyone else comes across this, I ended up creating a fork to have more control over changes which allows configuration of attributes on the link through gatsby-config. Additionally, it allows you to specify a preconnect which will preconnect to fonts.gstatic.com. https://github.com/slixites/gatsby-plugin-google-fonts

[shanejones]

@alekslario Thank you for your fork. This is perfect!

[rosendo-fig]

@alekslario Your forked worked like a charm. Thanks!

[yansusanto]

        {
            resolve: "gatsby-plugin-google-fonts",
            options: {
                fonts: ["Roboto:400,700"],
                display: "swap",
                attributes: {
                    rel: "stylesheet preload prefetch",
                },
            },
        },

I'm just wondering why the attributes are missing in my case. Am I missing something here as I last checked, I only have

<link href="[https://fonts.googleapis.com/css?family=Roboto:400,700&amp;display=swap](view-source:https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap)" rel="stylesheet"/>

on my production build.

Thanks!

[alekslario]

@yansusanto You have to use one of the forks. This repository does not support attributes.

[didierfranc]

@alekslario saw your pr is blocked because of a conflict; I will merge any future improvement ;)