🔥 Pouze 5 minut pro změnu pohledu.

Diagnóza a úpravy zdrojů blokování vykreslení pro přidání stránek.

Tak dlouho, chcete číst?

Krásný web ... ale pomalý! Zákazníci úplně zmizí! Už jste někdy s tímto problémem bolí hlava? Investice na webu. Ale při kontrole bodů na stránkách Google PageSpeed Insights, červená písmena varovala „eliminovat zdroje blokování render“ s roztomilým skóre, co to je? Tak proč je to „postava“, která je důležité držet váš web, aby nesnil? Tento článek má odpověď na držení rukou. Chcete -li rychle změnit pomalý web, držte se rakety!

Skutečný problém v životě

Představte si, že se chystáte otevřít krásně zdobenou restauraci. (Váš web). Zákazníci čekají ve frontě (vstoupil provoz), ale obchod má malíře a elektrikáře pracujícího na vchodu. (Zdroje blokování vykreslování) a řekli: „Počkejte! Čekání na nás nejprve dokončíme zeď a zapojení. Každý může vstoupit do obchodu.“ Co bude zákazník dělat? Většina z nich samozřejmě mává rozloučenou a chodí do jiného obchodu! To se stalo přesně. S vaším webem, uživateli, zejména na mobilu, nechci čekat. Pouze 3-4 sekundy, že web není dokončen načítání. Jsou připraveni se okamžitě odstrčit a jít k konkurentům. A následuje to, že míra okamžitého opuštění je vysoká, konverze, která klesá, a nejhorší je, že si Google myslí, že váš web není dobrý. Hodnocení opět kleslo. Toto je jasně noční můra online podnikatelů.

Výzva pro ilustrace: Porovnejte obrázky Google PageSpeed Insights jako první a po řešení problémů. Zdroje blokování vykreslování. První strana má nízké skóre (červené) s hlavními událostmi, které „eliminují zdroje blokování vykreslování“ a after-green).

Proč k tomuto problému došlo?

Abychom byli jasnější, musíme pochopit, jak prohlížeč (jako je Chrome, Safari). „Vytvořit“ vaši webovou stránku. Když někdo přijde na váš web, prohlížeč začne čtením kódu HTML, který je jako „zelený tisk“ celého domu. Bude číst jeden řádek najednou. Ale kdykoli je uspořádáno ke stažení souboru CSS (soubor stylu stylu, který říká, jak web vypadá) nebo JavaScript (soubor skriptu, který způsobuje, že web má různé funkce) uprostřed cesty, „zastaví“ okamžitě postavit dům! Ponechá všechno a spustí se ke stažení tohoto souboru. Přijďte nejprve dokončit a pak se můžete vrátit a postavit dům. "Přestaň čekat". To je to, čemu říkáme „blokování vykreslování“ nebo zdroje, které brání displeji, jednoduše mluví, soubory CSS a JavaScript, které zbytečně blokují cestu, takže prohlížeč ukazuje uživatelům pomalu vidět. Informace o technických technických informacích si můžete přečíst více z GTMetrix , který to popisuje velmi dobře.

Výzva pro ilustrace: Snadné infographic obrázky ukazující provoz prohlížeče. Je to přímka, která čte HTML a má symbol „stop“. Červená se objeví, když mohou soubory CSS a JS před pokračováním řádku.

Pokud to odejde, jak to ovlivní?

Ignorování problémů, které vykreslují zdroje, se neliší od úniku vody v domě. Zpočátku to může být trochu. Dlouhodobý dopad je však vážnější, než se očekávalo:

  • Uživatelská zkušenost (UX) je špatná: Nikdo nemá rád web, který se načítá pomalu. Zejména uživatel mobilního telefonu, který je netrpělivý, je původní kapitál, který se budou cítit frustrovaní, a uvidí, že vaše značka není profesionální. Tento problém je často hlavním důvodem, proč je webová stránka kliniky nebo servisní podnikání pomalé, dokud zákazníci nezmizí.
  • Rychlost vazby roste: pomalejší zatížení webu. Čím více lidí odlepí, tím více informací od Google uvádí, že pouze web je načten pomaleji od 1 do 3 sekund. Šance, že lidé budou tlačit až 32%!
  • Core Web Vitals Drops: Tento problém přímo ovlivňuje největší obsahovou barvu (LCP), jednu z důležitých metrických rohoží základních webových vitalů. Když je vaše hodnota LCP špatná, Google uvidí, že váš web je nízký.
  • SEO hodnocení: Od roku 2021, kde Google přinesl stránku jako faktor v hodnocení. Web, který je pomalý a špatný UX, má šanci být výrazně snížen.
  • Ztráta příjmů a obchodních příležitostí: Konec tohoto účinku vede ke stejné věci, ztrácíte zákazníky a příjmy pro konkurenty na webu rychleji.

Výzva pro ilustrace: Graf ukazuje vztah mezi prodlouženou dobou načítání webu s vyšší mírou okamžitého opuštění. Spolu s zamračenou ikonou zákazníka

Existuje nějaké řešení? A kde by to mělo začít?

Dobrou zprávou je, že tento problém lze vyřešit! Hlavním principem je, že musíme „upřednostňovat“ nové pro prohlížeč, hej! Vezměte si jen to nejpotřebnější. Jděte nejprve ukázat zákazníkovi. Pokud jde o věc, která není ve spěchu, lze si stáhnout později.

Pro JavaScript (JS):

  • Použijte atribut Defer : Toto je nejjednodušší a nejúčinnější způsob. Stačí přidat odklad ke značce. เบราว์เซอร์จะโหลดไฟล์ JS นั้นไปพร้อมๆ กับการสร้างหน้าเว็บ (ไม่หยุดรอ) และจะเริ่มทำงานก็ต่อเมื่อสร้างหน้าเว็บเสร็จแล้ว เหมาะกับสคริปต์ส่วนใหญ่ที่ไม่จำเป็นต้องทำงานทันที
  • Použijte atribut async : Podobně jako u Defer se prohlížeč nepřestane načíst. Ale bude fungovat, jakmile bude zatížení dokončeno, což může fungovat před dokončením webové stránky vhodné pro skripty, které nesouvisejí s jinými částmi, jako jsou některé sledovací skripty

Pro soubory CSS:

  • Inline kritický CSS: Toto je klíč k řešení problémů CSS. Pro zobrazení je to „tahání“ pouze kód CSS. „První část obrazovky“ (výše) vložena do značky ในไฟล์ HTML โดยตรง
  • Načtěte zbývající CSS bez blokování: zbývající CSS (pro část, která musí být posouvána dolů), použijeme speciální metodu zatížení tak, aby nezasáhl na prvním displeji.
  • Používejte dotazy médií: Pro CSS, které používají pouze některá zařízení (například pro tisk nebo speciální obrazovky), zadejte podmínky s atributskými médii pro prohlížeč ke stažení pouze v případě potřeby.

A kde by to mělo začít? Nejjednodušší je začít tím, že jdete na Google PageSpeed Insights a umístěte svou adresu URL na první místo. Nejprve viz výsledky. Bude žalovat jako seznam souborů. Který z nich je „obviněný“

Výzva pro ilustrace: Infographic porovnává normální zatížení (normální), async a odkládání ukazující, jak každý typ času pracuje s webovou stránkou (časová osa).

Příklady ze skutečné věci, která bývala úspěšná

Abych viděl, jak obrázek bude jasnější, chtěl bych zvednout případ webové stránky elektronického obchodování, který se s tímto problémem tvrdě narazil. Jejich webové stránky si stahují velmi pomalu, zejména na skóre Shopify PageSpeed kolem 38 (červené) a existují zdroje blokující vykreslování. Mnoho zákazníků tlačí z webu před dokončením obrázku produktu.

Mise: Tým šel zkontrolovat a zjistil, že hlavní problém pochází z velkého počtu nainstalovaných aplikací třetích stran. Každý z nich používá své vlastní soubory JavaScript a CSS, což má za následek „čekací frontu“ po dlouhou dobu.

Řešení:

  1. Zkontrolujte a smažte zbytečné aplikace: Začněte odinstalací aplikací, které se zřídka používají nebo překrývají funkce.
  2. Použijte odložení s JavaScriptem: Skript zbývajících aplikací a skript motivu je přidán všechny Defer Aby nedošlo k bránění výchozímu výkonu
  3. Vytvoření a inline kritického CSS: Tým používá nástroj pro kritický nástroj CSS k tažení stylu nezbytný pro hlavičku, nabídku a banner hrdiny přímo do HTML.
  4. Načíst zbývající načtení CSS Lazy-Load: Hlavní soubor CSS je upraven ke stažení po zobrazení webové stránky.

Výsledky: Jen jeden týden po úpravě skóre PageSpeed Insights, spěchající z 38 na 89 (žlutá, téměř zelená). Hodnota LCP je lepší než 2,5 sekundy. Nejdůležitější věcí je, že míra hranice klesla o 18% a míra konverze se zvýšila o 1,2%. Toto je hmatatelný výsledek „obnovení rychlosti“ na web, který je jedním z hlavních cílů naší auditorské služby optimalizace elektronického obchodování.

Výzva pro ilustrace: Před webovým stránkou elektronického obchodování je například levá strana web, který se načítá pomalu. Prvek není dobrý. Pravá strana je stejná webová stránka, která byla načtena rychle, zobrazovala krásné výsledky se zvýšeným počtem konverzí.

Pokud chcete následovat, co dělat? (Lze použít okamžitě)

Jste připraveni řídit tento problém, že? Může následovat tento krok:

Krok 1: Najděte postavu.

  • Přejděte na Google PageSpeed Insights
  • Vložte adresu URL svého webu a stiskněte „Analyze“.
  • Přejděte dolů a podívejte se na sekci „příležitosti“ a hledejte téma „Eliminujte zdroje blokování render“
  • Kliknutím zobrazíte seznam souborů .js a .css, které jsou problémy.

Krok 2: Správa souborů JavaScript (snadnější vytvoření)

  • Pro každý .js v seznamu vám umožní najít kód, který používá tento soubor na HTML vašeho webu.
  • Bude to vypadat takto:
  • Nechte přidat odklad ke značce na:
  • Udělejte to s každým skriptem na PageSpeedu (s výjimkou skriptu, který je opravdu nezbytný k naléhavé práci. Což má velmi málo)

Krok 3: Správa souborů CSS (o něco složitější)

Zásadou je, že CSS rozdělíme na 2 části: „kritické“ a „nekritické“ “

  1. Vytvoření kritického CSS: Použijte online nástroje, jako je generátor kritické cesty CSS. Přidejte svou adresu URL. Vytvoří kód CSS.
  2. Vložte kritický CSS do hlavy: Zkopírujte kód získaný z předchozího kroku. Vložte to do sekce Vašeho webu uvedením do značky
  3. Způsobující původní soubor CSS neblokuje: Najděte značku Svého původního souboru CSS a upravte jej na tento typ, aby se prohlížeč oklamal a stahoval později

    Tato technika řekne prohlížeči, že „Toto je styl pro tisk. (Není třeba spěchat ke stažení)“, ale po dokončení zatížení (onload) se přepněte zpět na všechna zařízení (vše) jako dříve. Přečtěte si -Důdové rady od Google Web.dev porozumět více.

UPOZORNĚNÍ: Všechny změny by měly být testovány na experimentální verzi (inscenaci) před skutečně použitím. Chránit web

Výzva pro ilustrace: Obrazovka ukazující proces používání Google PageSpeed Insights ukazuje na „zdroje vykreslování Elminate Render“ a kruhový kruh, který je problémem.

Otázky, které lidé mají tendenci divit a odpovědi, které jsou vymazány

Q1: Jak používat odklad a async jinak? Který byste si měli vybrat? Odpověď: Oba způsobí, že prohlížeč nezastaví ke stažení skriptu. Ale odlišné na "Work Order". Defer počká, až webová stránka dokončí nejprve a poté bude fungovat. (A bude spuštěn, respektive, psaný v kódu), který je bezpečný a vhodný pro většinu skriptů. Async bude fungovat, jakmile bude zatížení dokončeno. Nemáte zájem o pořádek a nečekat na nic vhodného pro nezávislé skripty, které nejsou s nikým, jako je Google Analytics. Pokud si nejste jisti, rozhodněte se nejprve odložení Q2: Bude to zlomené? Rozbije se web? A: Existuje šance! Zejména s použitím odkladu nebo async a skriptu, který musí spolupracovat (například skript A musí spustit před skriptem b) může způsobit zkreslení některých webových funkcí . Pokud není sebevědomý nebo komplikovaný kód pro odborníky na vývoj webových stránek, je lepší pomoci postarat se o Q3: Proč nelze některé soubory opravit? Zvláště skript zvenčí? A: Správně. Skripty od třetích stran, jako je Facebook Pixel, Google Tag Manager nebo Live Chat, nemůžeme upravit jeho soubor původu. Nejlepší způsob je zvážit, zda je nutné tento skript použít nebo ne stáhnout s nejmenším dopadem.

Q4 A: Není to nutné. Skutečným cílem není číslo 100, ale je vytvořit „uživatel má pocit, že web je rychlý“ a základní webové vitality jsou v „dobrých“ kritériích (zelená). Pronásledování 100 skóre může být nutné zbytečně vyměnit s některými funkcemi. Stačí zaměřit se na zlepšení uživatelů, aby získali nejlepší zážitek. SEO je připojeno k první stránce Google v závislosti na mnoha faktorech. Nejen rychlost

Výzva pro ilustrace: Velká ikona otazníku obklopená malou ikonou, která představuje Defer, Async, Broken Code a 100 bodů.

Shrnutí, které má být snadno pochopitelné + chtějí to zkusit udělat

Shrnutí srdce znovu. Problém „Zdroje blokování vykreslení“ spočívá v tom, že zbytečné soubory CSSCIPT ve způsobu umožňují prohlížeči zobrazovat webovou stránku pomalu. Nakonec ovlivňují jak uživatelské zkušenosti, hodnocení SEO, tak i prodej, nejlepším řešením je „nové priority“ pomocí odkladu se soubory JavaScript a používá techniku „inline kritického CSS“ pro uživatele, aby viděli první část webu co nejdříve.

Vylepšení rychlosti webových stránek nejsou jen technické záležitosti, ale „ukazuje respekt“ pro drahocennou dobu vašich uživatelů. Když zrychlíte web, vytváříte dobrý první dojem. A otevřete dveře a přivítají zákazníky, aby snadněji vstoupili do vaší firmy.

Teď! Nečekejte. Pokuste se vzít svou adresu URL a otestovat na Insights Google PageSpeed a začněte opravit kroky, které doporučujeme jeden krok. Nejste si jisti, že dnes jen malá úprava může zítra změnit vaše obchodní výsledky neuvěřitelně!

Pokud se cítíte příliš komplikovaní nebo chcete, aby odborníci pomohli „diagnostiku a chirurgii“, vraťte se rychle a znovu se připevněte k rychlosti. Poraďte se s týmem Vision X Brain zdarma! Jsme připraveni změnit web, který se pro vás pomalu stane peněžními nástroji.

Výzva pro ilustrace: Výkonná grafika Rakety stoupají z obrazovky počítače, která ukazuje skóre zelené stránky s výzvou k akci „Zvyšte vaši rychlost hned teď!“

podíl

Nedávný blog

Porovnejte trhy Shopify Vs. Multingual Apps: Co si vybrat pro export elektronického obchodování?

Chcete prodat po celém světě? Porovnejte výhody disAdvanty během používání trhů Shopify a aplikací pro překlad jazyků. (Mullingual Apps) pro výběr systému, který je nejvhodnější pro váš obchod.

SEO Strategie pro webové stránky pro půjčovnu (stroje, nemovitosti, vybavení)

Přidejte zákazníky k pronájmu se SEO! V -DEPTH, SEO strategie pro půjčovny podniků, zejména z místního SEO na stránku produktu.

Vytvořte automatizovanou zprávu s datovým studiem N8N + Google: Ušetřete 10 hodin marketingového času/týden.

Přestaňte plýtvat časem, aby se hlásila! Naučte se, jak se připojit k N8N s Google Looker Studio (Data Studio) a vytvořit palubní desku a automatický marketing.