Fonturi și CSS – cum faci să se încarce asincron într-o pagină web

În mod normal, elementele unei pagini web se încarcă în ordinea în care sunt scrise. Problema majoră apare atunci când unele resurse (cum ar fi javascripturile) se încarcă mai greu și celelalte elemente din pagină trebuie să aștepte la rând. Tocmai de aceea a apărut încărcarea asincronă.

Dacă în cazul scripturilor e simplu, căci se adaugă un async în coadă, în cazul CSS-ului… este la fel de simplu. Aproape la fel de simplu.

Ce trebuie să faci pentru ca CSS-ul și fonturile să se încarce asincron

  1. Localizezi CSS-urile din pagina web (inclusiv fonturile)

    Tot ce e Cascading Style Sheets începe cu <link rel=”stylesheet”. Chiar și fonturile Google. Pornim de la acest exemplu:

    <link rel="stylesheet" href="https://vasileruscior.ro/wp-content/themes/mh-newsdesk-lite/style.css" type="text/css" media="all"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|PT+Serif" type="text/css" media="all"/>

  2. Izolezi CSS-urile între etichetele <noscript> și </noscript>

    Vei avea fix așa:

    <noscript><link rel="stylesheet" href="https://vasileruscior.ro/wp-content/themes/mh-newsdesk-lite/style.css" type="text/css" media="all"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|PT+Serif" type="text/css" media="all"/></noscript>

  3. Rescrii CSS-urile astfel încât să se încarce asincron

    De ceea ce ai „izolat“ nu te atingi, deoarece încărcarea asincronă folosește Javascript. Tu vrei ca site-ul tău să fie afișat corect și pe browserele fără javascript, așa că nu trebuie să ștergi nimic. În schimb, le mai scrii o dată astfel:

    <link rel='preload' data-preload='1' data-minified='1' as='style' onload='this.rel="stylesheet"' href='https://vasileruscior.ro/wp-content/themes/mh-newsdesk-lite/style.css' /><link data-preload='1' as='style' onload='this.rel="stylesheet"' rel='preload' href='https://fonts.googleapis.com/css?family=Oswald|PT+Serif' type='text/css' media='all' />

    Atenție la ghilimelele și apostrof. Plasezi aceste etichete înainte de <noscript>.

Așadar, am pornit de la exemplul de la (1.) și iată la ce am ajuns:

<link rel='preload' data-preload='1' data-minified='1' as='style' onload='this.rel="stylesheet"' href='https://vasileruscior.ro/wp-content/themes/mh-newsdesk-lite/style.css' /><link data-preload='1' as='style' onload='this.rel="stylesheet"' rel='preload' href='https://fonts.googleapis.com/css?family=Oswald|PT+Serif' type='text/css' media='all' /><noscript><link rel="stylesheet" href="https://vasileruscior.ro/wp-content/themes/mh-newsdesk-lite/style.css" type="text/css" media="all"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|PT+Serif" type="text/css" media="all"/></noscript>

Vezi și generare parolă aleatorie în php

Lasă un comentariu

Adresa ta de e-mail nu va fi publicată. Dacă nu ai adresă de e-mail, lasă necompletat.