Confruntarea cu Pâlpâirile FOUC
Problemele de încărcare pot provoca un FOUC (flash de conținut fără stil – flash of unstyled content). Mai multe motive specifice pot explica acest lucru.
În primul rând, acest lucru se poate datora modului în care Elementor își încorporează șabloanele.
De ce foaia de stil șablon este încorporată în subsol și nu în <head>?
Când o pagină se încarcă, nu putem recunoaște ce șabloane au fost încorporate în pagină. Acesta este motivul pentru care le încărcăm în subsol.
În unele cazuri, acest lucru poate provoca un mic flash (pâlpâire sau FOUC) atunci când pagina se încarcă.
Cum se Rezolvă FOUC?
Puteți rezolva această problemă utilizând una dintre următoarele metode:
- Definiți metoda de imprimare CSS să fie inline în loc să utilizați fișiere externe. Acest lucru se poate face accesând Elementor > Setări > Avansat > Metodă de imprimare CSS > Încorporare internă.
- A doua opțiune este să încărcați fișierele CSS cu o acțiune în fișierul functions.php al temei copilului. De exemplu:
add_action( 'wp_enqueue_scripts', function() {
if ( ! class_exists( '\Elementor\Core\Files\CSS\Post' ) ) {
return;
}
$template_id = 123456;
$css_file = new \Elementor\Core\Files\CSS\Post( $template_id );
$css_file->enqueue();
}, 500 );În loc de $template_id = 123456, introduceți ID-ul șablonului dvs. și acesta se va încărca întotdeauna în antetul site-ului. Puteți utiliza această metodă numai pentru anumite pagini.
- Unele plugin-uri de optimizare pot rezolva și acest lucru.
Soluțiile de mai sus sunt relevante dacă ați încorporat un șablon sau un widget global al Elementor în antetul sau subsolul dvs. prin opțiunile temei.
Vă rugăm să rețineți că un FOUC (flash de conținut fără stil) poate fi experimentat atunci când este utilizată caracteristica „secțiune de întindere”, deoarece această opțiune funcționează cu un cod JS și pot apărea pâlpâiri în timpul încărcării scripturilor.
Flash de conținut fără stil poate apărea și dacă utilizați imagini mari/grele.
În unele cazuri, cum ar fi atunci când o secțiune de imagini mari cauzează FOUC, poate fi utilizată o soluție rapidă. Doar adăugați o animație de intrare, cum ar fi Fade In, la SECȚIUNEA specifică care are problema. În multe cazuri, acest lucru va rezolva cu ușurință problema.
