რა არის Flash of Unstyled Content (FOUC)?

ფლაშ ოფ სტაილდ კონტენტი (FOUC) — ეს არის დროებითი გამოჩენა ვებგვერდის შიგთავსის ბრაუზერში მანამ, სანამ მასზე არ გავრცელდება CSS სტილები. ეს ხდება რესურსების თანმიმდევრული ჩატვირთვის და დამუშავების გამო. ბრაუზერი პირველ რიგში ანალიზს უკეთებს HTML-ს და იწყებს მისი ჩვენებას, შემდეგ კი იტვირთება და იყენებს გარე CSS ფაილებს ან <style> ტეგს. ამ პერიოდში მომხმარებელი ხედავს "სუფთა" HTML-ს გარეშე ფორმატირებას.

FOUC-ის მიზეზები:

საკმარისი სიჩქარის ნაკლებობა ქსელში: ნელი კავშირი ზრდის CSS-ის ჩატვირთვის დროს.
დიდი მოცულობის CSS: რაც უფრო დიდი ზომის სტილები, მით უფრო დიდია მათი ჩატვირთვის და ანალიზის დრო.
ბლოკირებადი სტილები: თუ სტილები დაკავშირებულია HTML-ის შემდეგ, ბრაუზერი შეიძლება დაიწყოს რენდერინგი მათი სრული ჩატვირთვის გარეშე.
JavaScript, რომელიც ცვლიან CSS-ს: სკრიპტები, რომლებიც დინამიურად ამატებენ ან ცვლიან სტილებს, შეიძლება გამოიწვიოს FOUC.

ტიპიური სცენარები FOUC-ის:

ტექსტი გამოჩნდება ბრაუზერის სტანდარტული ფონტით, შემდეგ კი მკვეთრად იცვლება CSS-ში მითითებულზე.
ელემენტები იშლება ან იცვლება მათი პოზიციონირება ან ხილვადობა.
მარკეტინგული გრაფიკა "გაშლილია" და შემდეგ იკვრება.

FOUC-ის თავიდან აცილების მეთოდები:

CSS-ის დაკავშირება <head>-ში: ეს ყველაზე ეფექტური მეთოდია. ბრაუზერები აჩერებენ რენდერინგს ყველა სტილის ჩატვირთვამდე, რომლებიც მითითებულია <head>-ში, თუ ისინი ბლოკირებადია (ნაგულისხმევი <link rel="stylesheet">-თვის).
```

<head>
    <link rel="stylesheet" href="styles.css">
    <title>My Page</title>
</head>
<body>
    
</body>
```
```

<head>
    <title>My Page</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    
</body>
```
კრიტიკული სტილების ინლაინი: ძირითადი სტილების პირდაპირ ჩასმა <style> ტეგში <head>-ში საშუალებას აძლევს სწრაფად გამოიყენოს ძირითადი ფორმატირება ჩატვირთვის წინ.
```
<head>
    <style>
        body { font-family: sans-serif; }
        /* კრიტიკული სტილები */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>My Page</title>
</head>
<body>
    
</body>
```
font-display: swap-ის გამოყენება: ფონტებისთვის, რათა თავიდან აიცილოს unstyled ტექსტის ფლაში (FOUT), სანამ არ იტვირთება კასტომული ფონტი, გამოჩნდება სისტემური ფონტი.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

შიგთავსის დამალვა ჩატვირთვის წინ: შეიძლება გამოიყენოს JavaScript, რათა დამალოს ძირითადი შიგთავსი ჩატვირთვის დროს, სანამ ყველა სტილი არ იტვირთება (ანუ ნაკლებად სასურველი მეთოდი, რადგან დამოკიდებულია JS-ზე და შეიძლება გამოიწვიოს შეფერხება).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- შიგთავსი -->
  <script>
    // მაგალითი: დამალოს body სტილების ჩატვირთვის შემდეგ
    // რეალურ პირობებში საჭიროა უფრო რთული მონიტორინგი CSS-ის ჩატვირთვისთვის
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC-ის უარყოფითი გავლენა აქვს მომხმარებლის გამოცდილებაზე და აღქმაზე როგორც "დაფუჭებული" ან ნელი საიტი, ამიტომ მისი მინიმიზაცია მნიშვნელოვანი ნაწილია ფრონტენდ ოპტიმიზაციის.