Confruntarea cu Pâlpâirile FOUC

Notă! Unele linkuri de pe această pagină pot fi linkuri afiliate, ceea ce înseamnă că, dacă alegeți să efectuați o achiziție, pot câștiga un mic comision fără costuri suplimentare pentru dvs. Apreciez foarte mult sprijinul dvs.!

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:

  1. 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ă.
  2. 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.

  1. 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.

Nota 1:
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.
Nota 2:
Flash de conținut fără stil poate apărea și dacă utilizați imagini mari/grele.
Sfat:
Î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.
Notă! Ați găsit util acest articol? Atunci veți aprecia sprijinul oferit de Elementor în realizarea acestui tutorial. Experimentați construcția unui site cu Elementor astăzi și obțineți un site web modern, pre-securizat, pre-optimizat. Alegeți licența care vi se potrivește astăzi, treceți la versiunea Pro.

Documentație adițională

S-ar putea să te intereseze și:

Despre Admin Staff

Comunitatea WordPress este un Blog strict Educativ pentru utilizatorii de WordPress. Nu este Agenție de WEB, Publicitate sau Marketing! Dacă sunteți firmă și aveți nevoie de sfaturi vă ajut cu plăcere, pentru contracte de colaborare, vă rog contactați agenții specializate, care vă pot oferi documentația fiscală necesară. Sunt pasionat de WordPress și tot ce se leagă de mediul online din 2011, scriu din pasiune și-mi place să ajut, doar prin prisma acestui fapt că-mi place să fac bine oamenilor care au aceeași pasiune. Blog-ul este monetizat prin link-uri de afiliere și Google Adsense, unde se plătesc taxe legale de către platformele respective. Dacă dorești să susții acest blog, sunt deschis pentru donații. Vă mulțumesc pentru înțelegere! George CRIȘAN , Administrator Comunitatea WordPress!

Lasă un comentariu