Skip to content

Instantly share code, notes, and snippets.

@jackbarham
Last active October 6, 2024 09:56
Show Gist options
  • Save jackbarham/8f76407294aebc78e62b3bb155bd476c to your computer and use it in GitHub Desktop.
Save jackbarham/8f76407294aebc78e62b3bb155bd476c to your computer and use it in GitHub Desktop.
How to get 100% render blocking score on PageSpeed Inights using Adobe Fonts (aka Typekit) in Nuxt. Adding preload and preconnect scripts with a Typekit font URL increased score from 96% to 100%.
export default defineNuxtConfig({
compatibilityDate: '0000-00-00',
devtools: {
enabled: true
},
modules: [
//
],
app: {
head: {
htmlAttrs: {
lang: 'en',
},
title: 'Website title',
meta: [
{
name: 'description',
content: 'Website description'
}
],
link: [
// Preload the Adobe Typekit CSS to avoid render-blocking
{
rel: 'preload',
href: 'https://use.typekit.net/abababab.css',
as: 'style',
},
// Load the Adobe Typekit CSS asynchronously to avoid render-blocking
{
rel: 'stylesheet',
href: 'https://use.typekit.net/abababab.css',
onload: 'this.rel="stylesheet"',
media: 'print',
},
{
rel: 'preconnect',
href: 'https://use.typekit.net',
},
{
rel: 'preconnect',
href: 'https://p.typekit.net',
crossorigin: 'anonymous',
},
],
script: [
{
src: 'https://use.typekit.net/abababab.js',
async: true,
defer: true,
},
{
innerHTML: 'try{Typekit.load({ async: true });}catch(e){}',
type: 'text/javascript',
},
],
}
}
})
@jackbarham
Copy link
Author

Please add any corrections.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment