CSS referinte externe sau copy paste intern

Salut,

Am un front-page pregatita de altcineva care include CSS-urile urmatoare:

<link
	  rel="stylesheet"
	  href="https://fonts.googleapis.com/css2?family=Plus Jakarta Sans:wght@400;500;600;700&display=swap"
	/>
	<link
	  rel="stylesheet"
	  href="https://fonts.googleapis.com/css2?family=Lato:wght@300;900&display=swap"
	/>
	<link
	  rel="stylesheet"
	  href="https://fonts.googleapis.com/css2?family=Noto Serif:wght@700&display=swap"
	/>
	<link
	  rel="stylesheet"
	  href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap"
	/>
	<link
	  rel="stylesheet"
	  href="https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,700;1,400&display=swap"
	/>
	<link
	  rel="stylesheet"
	  href="https://fonts.googleapis.com/css2?family=Helvetica:wght@400&display=swap"
	/>
	<link
	  rel="stylesheet"
	  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap"
	/>

Cum ar fi mai bine, mai rapid si mai stabil in viitor? sa le las asa ca referinte externe sau sa copiez continutul lor si sa le adaug in css-ul meu?

Pentru mine eu le-as copia in css-ul local, exista unul deja destul de mare.
Avantajul pe care il percep eu e ca:
1. s-ar incarca mai repede de pe local, pentru ca browserul nu trebuie sa mai faca 6 cererei separte sa primeasca fiecare din fisierele astea
2. Intreg site-ul are un css local , parca ar fi mai bine sa fie toate in acelasi loc
3. presupunand ca googleapis.com ar fi un site al google-ului atunci in mod normal ar trebui sa fie  stabil link-ul, pentru ca altfel daca google ar schimba ceva in url sau in continut atunci eu as avea un impact si probabil ca mi-ar lua ceva timp pana sa descoper problema si sa inteleg ce s-a intamplat
4. Ar fi un pic mai usor de debugat

Nu sunt un expert de aia cele patru puncte de mai sus sunt parerea mea mai mult neavizata.

Voi ce spuneti? e mai bine pe local sau remote?

Va multumesc

1. Îți recomand acest articol care explică pe larg și foarte detaliat cele mai bune variante pentru a încărca fonturile Google.
2. Din contră, este mai eficient să încarci doar CSS-ul pe care îl folosești. Eu obișnuiesc să fac un fișier CSS pentru above fold care se încarcă o dată cu pagina, iar celelate fișiere o dată de omul începe să dea scroll.
3. Nu prea se schimbă lucrurile astea, sunt așa de ani de zile, vor rămâne așa mult și bine. Iar dacă se vor gândi să schimbe ceva, fii sigur că vor anunța.

Degeaba copiezi tu continutul fonturilor Google intr-un singur fisier, pentru ca in interior ai url-uri catre acele fonturi, deci tot iti va face request. Daca nu vrei request extern, cel mai bine este sa downloadezi fonturile intr-un folder local, iar ulterior le incarci in CSS tau unde este nevoie.

Nu e bine sa copiezi continutul acelor fisiere in CSS-ul tau intrucat acesta nu este fix ci depinde de browser-ul utilizat pe partea de client final.

Explicatie:
Exista mai multe formate in care pot fi furnizate acele fonte, si Google va servi un CSS adaptat browser-ului in functie de ce poate acesta folosi. O diferenta majora este ca unele browsere suporta fonte ‘multiple master’, de exemplu o singura descriere a caracterelor care este parametrizata pentru a obtine atat caractere normale cat si variante light sau bold, altele nu. Daca incluzi textul acelor CSS-uri, tu vei avea si include varianta potrivita browser-ului/ sistemului de operare pe care l-ai folosit tu, in acel moment, pentru a obtine CSS-urile de la Google, dar aceasta varianta s-ar putea sa nu fie cea buna pentru browser-ul folosit de cel ce acceseaza pagina web creata de tine.


LE:
Cat despre ingrijorarea ca face multe cereri: acele CSS-uri sunt comune multor pagini si odata obtinute raman in cache (‘Temporary Internet Files’ sau cum i-o zice browser-ul cui le acceseaza), deci incepand cu a doua referire nu vor mai trebui luate de pe net.

Edited by sags, 09 August 2023 - 16:31.

Uite ce zice ClaudeAI:
Here are a few ways to optimize the font loading:


1. Combine into fewer links:
```html
<link href="https://fonts.google...0&display=swap" rel="stylesheet">
<link href="https://fonts.google...0&display=swap" rel="stylesheet">
<link href="https://fonts.google...0&display=swap" rel="stylesheet">
```
2. Preload the fonts:
```html
<link rel="preload" href="https://fonts.google...0&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
```
3. Use `font-display: swap` for faster rendering:
```html
<link href="https://fonts.google...0&display=swap" rel="stylesheet" font-display="swap">
```
4. Load font CSS asynchronously:
```html
<script>
  WebFont.load({
    google: {
  families: ['Plus Jakarta Sans:wght@400;500;600;700']
    }
  });
</script>
```
This prevents blocking page load while loading fonts.
The key is minimizing requests, preloading, using font-display, and loading asynchronously when possible to optimize font performance.

Va multumesc frumos, am sa le las asa cum sunt cu referinte externe.