Î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
- 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"/> - 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> - 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
Trebuie să implementez și eu acești pași, că uneori am o viteză de încărcare de peste 6-7s și nu sunt mulțumită. Mulțumim!
Observ că tema Tundra are, din start, câteva hibe ce ţin de viteza blogului. Trebuie rezolvate acelea şi apoi se poate ajunge şi la încărcarea fonturilor.