{"id":1461,"date":"2021-07-05T15:44:20","date_gmt":"2021-07-05T15:44:20","guid":{"rendered":"https:\/\/roihacks.hu\/?p=1461"},"modified":"2023-12-08T16:14:56","modified_gmt":"2023-12-08T16:14:56","slug":"core-web-vitals","status":"publish","type":"post","link":"https:\/\/roihacks.hu\/core-web-vitals\/","title":{"rendered":"Mik a Core Web Vitals (Alapvet\u0151 Webes Vitals) mutat\u00f3k, hogyan m\u00e9r\u0151dnek, \u00e9s hogyan jav\u00edtsuk \u0151ket? 2024"},"content":{"rendered":"<ol start=\"2021\">\n<li>j\u00fanius\u00e1t\u00f3l a Google organikus rangsorol\u00e1si t\u00e9nyez\u0151k\u00e9nt is figyelembe veszi a weboldal \u00e1ltal ny\u00fajtott felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt, amit az Alapvet\u0151 Webes Vitals mutat\u00f3kon (angolul Core Web Vitals) kereszt\u00fcl m\u00e9r.<\/li>\n<\/ol>\n<p>De mik is ezek az Alapvet\u0151 Webes Vitals mutat\u00f3k \u00e9s mit m\u00e9rnek pontosan? Err\u0151l fog sz\u00f3lni ez a blogbejegyz\u00e9s, \u00e9s emellett m\u00e9g az al\u00e1bbiakra is kit\u00e9r\u00fcnk:<\/p>\n<ul>\n<li>Core Web Vitals jelent\u00e9se<\/li>\n<li>Alapvet\u0151 Webes Vitals mutat\u00f3k szerepe a <a href=\"https:\/\/roihacks.hu\/keresooptimalizalas-seo\/\" target=\"_blank\" rel=\"noopener\">keres\u0151optimaliz\u00e1l\u00e1sban<\/a><\/li>\n<li>A h\u00e1rom Core Web Vitals mutat\u00f3 jelent\u00e9se \u00e9s \u00e9rtelmez\u00e9se<\/li>\n<li>Alapvet\u0151 Webes Vitals mutat\u00f3k m\u00e9r\u00e9se Google Search Console-ban \u00e9s egy\u00e9b eszk\u00f6z\u00f6kben<\/li>\n<li>Google Core Web Vitals mutat\u00f3k jav\u00edt\u00e1s\u00e1nak technik\u00e1i, best practice-ek, amiket \u00e9rdemes k\u00f6vetni<\/li>\n<\/ul>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Tartalomjegyz&eacute;k<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6636742b7ef94\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #0a0a0a;color:#0a0a0a\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #0a0a0a;color:#0a0a0a\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6636742b7ef94\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#Core_Web_Vitals_jelentese\" title=\"Core Web Vitals jelent\u00e9se\">Core Web Vitals jelent\u00e9se<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#1_Legnagyobb_vizualis_tartalomvalasz_angolul_Largest_Contentful_Paint_roviditve_LCP\" title=\"1. Legnagyobb vizu\u00e1lis tartalomv\u00e1lasz (angolul Largest Contentful Paint, r\u00f6vid\u00edtve LCP)\">1. Legnagyobb vizu\u00e1lis tartalomv\u00e1lasz (angolul Largest Contentful Paint, r\u00f6vid\u00edtve LCP)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#2_Elso_interakciotol_szamitott_valaszkeses_angolul_First_Input_Delay_roviditve_FID\" title=\"2. Els\u0151 interakci\u00f3t\u00f3l sz\u00e1m\u00edtott v\u00e1laszk\u00e9s\u00e9s (angolul First Input Delay, r\u00f6vid\u00edtve FID)\">2. Els\u0151 interakci\u00f3t\u00f3l sz\u00e1m\u00edtott v\u00e1laszk\u00e9s\u00e9s (angolul First Input Delay, r\u00f6vid\u00edtve FID)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#3_Elrendezes_osszmozgasa_angolul_Cumulative_Layout_Shift_CLS\" title=\"3. Elrendez\u00e9s \u00f6sszmozg\u00e1sa (angolul Cumulative Layout Shift, CLS)\">3. Elrendez\u00e9s \u00f6sszmozg\u00e1sa (angolul Cumulative Layout Shift, CLS)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#Alapveto_Webes_Vitals_mutatok_szerepe_a_SEO-ban\" title=\"Alapvet\u0151 Webes Vitals mutat\u00f3k szerepe a SEO-ban\">Alapvet\u0151 Webes Vitals mutat\u00f3k szerepe a SEO-ban<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#1_Core_Web_Vitals_mutatok_hasonlitasa_a_versenytarsainkhoz\" title=\"1.\u00a0\u00a0\u00a0\u00a0\u00a0 Core Web Vitals mutat\u00f3k hasonl\u00edt\u00e1sa a versenyt\u00e1rsainkhoz\">1.\u00a0\u00a0\u00a0\u00a0\u00a0 Core Web Vitals mutat\u00f3k hasonl\u00edt\u00e1sa a versenyt\u00e1rsainkhoz<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#2_Az_Alapveto_Webes_Vitals-mutatok_csak_az_egyik_SEO_rangsorolasi_tenyezo_a_sok_kozul\" title=\"2.\u00a0\u00a0\u00a0\u00a0\u00a0 Az Alapvet\u0151 Webes Vitals-mutat\u00f3k csak az egyik SEO rangsorol\u00e1si t\u00e9nyez\u0151 a sok k\u00f6z\u00fcl\">2.\u00a0\u00a0\u00a0\u00a0\u00a0 Az Alapvet\u0151 Webes Vitals-mutat\u00f3k csak az egyik SEO rangsorol\u00e1si t\u00e9nyez\u0151 a sok k\u00f6z\u00fcl<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#Core_Web_Vitals_riport_Google_Search_Console-ban\" title=\"Core Web Vitals riport Google Search Console-ban\">Core Web Vitals riport Google Search Console-ban<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#Core_Web_Vitals_mutatok_vizsgalata\" title=\"Core Web Vitals mutat\u00f3k vizsg\u00e1lata\">Core Web Vitals mutat\u00f3k vizsg\u00e1lata<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#Core_Web_Vitals_elemei\" title=\"Core Web Vitals elemei\">Core Web Vitals elemei<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#LCP_Largest_Contentful_Paint\" title=\"LCP (Largest Contentful Paint):\">LCP (Largest Contentful Paint):<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#First_Input_Delay_FID\" title=\"First Input Delay (FID)\">First Input Delay (FID)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#Cumulative_Layout_Shift_CLS\" title=\"Cumulative Layout Shift (CLS)\">Cumulative Layout Shift (CLS)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#Core_Web_Vitals_mutatok_javitasa_es_optimalizacioja\" title=\"Core Web Vitals mutat\u00f3k jav\u00edt\u00e1sa \u00e9s optimaliz\u00e1ci\u00f3ja\">Core Web Vitals mutat\u00f3k jav\u00edt\u00e1sa \u00e9s optimaliz\u00e1ci\u00f3ja<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#LCP_javitasa\" title=\"LCP jav\u00edt\u00e1sa\">LCP jav\u00edt\u00e1sa<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#FID_javitasa\" title=\"FID jav\u00edt\u00e1sa\">FID jav\u00edt\u00e1sa<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/#CLS_javitasa\" title=\"CLS jav\u00edt\u00e1sa\">CLS jav\u00edt\u00e1sa<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Core_Web_Vitals_jelentese\"><\/span>Core Web Vitals jelent\u00e9se<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A Core Web Vitals (r\u00f6vid\u00edtve CWV), magyarul Alapvet\u0151 Webes vitals-mutat\u00f3k egy adott oldal felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nnyel kapcsolatos teljes\u00edtm\u00e9ny\u00e9re ad mutat\u00f3sz\u00e1mokat val\u00f3s haszn\u00e1lati adatok alapj\u00e1n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1462\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/alapveto-webes-vitals-mutatok.png\" alt=\"alapvet\u0151 webes vitals-mutat\u00f3k\" width=\"1110\" height=\"589\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/alapveto-webes-vitals-mutatok.png 1110w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/alapveto-webes-vitals-mutatok-300x159.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/alapveto-webes-vitals-mutatok-1024x543.png 1024w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/alapveto-webes-vitals-mutatok-768x408.png 768w\" sizes=\"(max-width: 1110px) 100vw, 1110px\" \/><\/p>\n<p>H\u00e1rom ilyen Core Web Vitals mutat\u00f3t ad meg \u00e9s m\u00e9r a weboldalainkon a Google. A mutat\u00f3k r\u00e9szletesebb magyar\u00e1zat\u00e1ra \u00e9s m\u00e9r\u00e9s\u00e9re, valamint az el\u00e9rni k\u00edv\u00e1nt ide\u00e1lis szintekre m\u00e9g r\u00e9szletesebben ki fogunk t\u00e9rni, most csak nagyon r\u00f6viden bemutatjuk \u0151ket:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Legnagyobb_vizualis_tartalomvalasz_angolul_Largest_Contentful_Paint_roviditve_LCP\"><\/span><strong>1. Legnagyobb vizu\u00e1lis tartalomv\u00e1lasz <\/strong><strong>(angolul Largest Contentful Paint, r\u00f6vid\u00edtve LCP)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A Legnagyobb vizu\u00e1lis tartalomv\u00e1lasz (angolul <a href=\"https:\/\/roihacks.hu\/seo\/largest-contentful-paint-lcp\/\" target=\"_blank\" rel=\"noopener\">Largest Contentful Paint<\/a>) Webes vitals-mutat\u00f3 azt m\u00e9ri, hogy milyen gyorsan t\u00f6lt be a legnagyobb vizu\u00e1lis tartalom az oldalon.<\/p>\n<p>Ez az\u00e9rt fontos, mert ez alapj\u00e1n l\u00e1tja a felhaszn\u00e1l\u00f3, hogy a weboldal bet\u00f6lt\u0151d\u00e9s alatt van. Ez az a Core Web Vitals mutat\u00f3, ami legink\u00e1bb az oldal sebess\u00e9g\u00e9vel kapcsolatos.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Elso_interakciotol_szamitott_valaszkeses_angolul_First_Input_Delay_roviditve_FID\"><\/span><strong>2. Els\u0151 interakci\u00f3t\u00f3l sz\u00e1m\u00edtott v\u00e1laszk\u00e9s\u00e9s (angolul First Input Delay, r\u00f6vid\u00edtve FID)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Az Els\u0151 interakci\u00f3t\u00f3l sz\u00e1m\u00edtott v\u00e1laszk\u00e9s\u00e9s (<a href=\"https:\/\/roihacks.hu\/seo\/first-input-delay-fid\/\" target=\"_blank\" rel=\"noopener\">First Input Delay<\/a>) az az id\u0151, ami egy linkre vagy gombra kattint\u00e1s \u00e9s a b\u00f6ng\u00e9sz\u0151 v\u00e1lasza k\u00f6z\u00f6tt eltelik, ez gyakorlatilag a weboldal interaktivit\u00e1s\u00e1t m\u00e9ri.<\/p>\n<p>Szint\u00e9n rossz felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyhez vezet, ha a weboldalunk nem reag\u00e1l el\u00e9g gyorsan az egyes felhaszn\u00e1l\u00f3i interakci\u00f3kra. Hasonl\u00f3 jav\u00edt\u00e1sokat kell v\u00e9gezn\u00fcnk mint az LCP eset\u00e9n, ha jav\u00edtani szeretn\u00e9nk az ezzel kapcsolatos teljes\u00edtm\u00e9ny\u00e9t az oldalunknak.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Elrendezes_osszmozgasa_angolul_Cumulative_Layout_Shift_CLS\"><\/span><strong>3. Elrendez\u00e9s \u00f6sszmozg\u00e1sa (angolul Cumulative Layout Shift, CLS)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>V\u00e9g\u00fcl a harmadik CWV mutat\u00f3 az Elrendez\u00e9s \u00f6sszmozg\u00e1sa, vagy angolul <a href=\"https:\/\/roihacks.hu\/seo\/cumulative-layout-shift-cls\/\" target=\"_blank\" rel=\"noopener\">Cumulative Layout Shift<\/a>, CLS), ami kev\u00e9sb\u00e9 az oldal bet\u00f6lt\u0151d\u00e9si sebess\u00e9g\u00e9vel kapcsolatos, hanem a vizu\u00e1lis stabilit\u00e1ssal, azaz azt m\u00e9ri, hogy a weboldal bet\u00f6lt\u0151d\u00e9se \u00e9s haszn\u00e1lata k\u00f6zben mennyire fordul el\u0151, hogy oldalelemek v\u00e1ratlanul elmozognak.<\/p>\n<p>Ezeket az elmozg\u00e1sokat, amiket \u00e1ltal\u00e1ban a hirdet\u00e9sek eset\u00e9n tapasztalhatunk, szint\u00e9n ker\u00fclni kell, hiszen t\u00e9nyleg el\u00e9g bosszant\u00f3 \u00e9s rossz felhaszn\u00e1l\u00f3 \u00e9lm\u00e9nyhez vezet, ha az oldalon l\u00e9v\u0151 tartalmak b\u00f6ng\u00e9sz\u00e9s k\u00f6zben ugr\u00e1lnak, \u00e9s p\u00e9ld\u00e1ul emiatt kattintunk olyan hirdet\u00e9sekre, amik am\u00fagy nem relev\u00e1nsak sz\u00e1munkra.<\/p>\n<p>\u00c9s nemcsak azt tudjuk, hogy ezek fontos mutat\u00f3k, hanem a Google meg is mutatja, hogy val\u00f3s felhaszn\u00e1l\u00f3 adatok alapj\u00e1n a honlapunk oldalai hogyan teljes\u00edtenek ezekben a mutat\u00f3kban. Ennek r\u00e9szleteire a Google Search Console-os fejezetben t\u00e9r\u00fcnk ki.<\/p>\n<p>De el\u0151tte m\u00e9g r\u00f6viden kit\u00e9r\u00fcnk arra, hogy mi\u00e9rt olyan fontos a Core Web Vitals mutat\u00f3k figyel\u00e9se \u00e9s rossz \u00e9rt\u00e9kek eset\u00e9n weboldalunk jav\u00edt\u00e1sa.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Alapveto_Webes_Vitals_mutatok_szerepe_a_SEO-ban\"><\/span>Alapvet\u0151 Webes Vitals mutat\u00f3k szerepe a SEO-ban<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A Google m\u00e1r r\u00e9g\u00f3ta pr\u00f3b\u00e1lja a webfejleszt\u0151ket, diz\u00e1jnereket \u00e9s a SEO szak\u00e9rt\u0151ket abba az ir\u00e1nyba terelni, hogy min\u00e9l jobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny ny\u00fajt\u00e1s\u00e1ra t\u00f6rekedjenek az oldal meg\u00e9p\u00edt\u00e9s\u00e9n\u00e9l.<\/p>\n<p>Hiszen egyr\u00e9szt az Google c\u00e9lja is az, hogy olyan weboldalakra tereljenek forgalmat a Google-r\u0151l, ahol azt\u00e1n a felhaszn\u00e1l\u00f3 j\u00f3 user experience-ben r\u00e9szes\u00fcl, hiszen akkor a k\u00f6vetkez\u0151 keres\u00e9s alkalm\u00e1val is a Google fogja haszn\u00e1lni a felhaszn\u00e1l\u00f3.<\/p>\n<p>Valamint a j\u00f3 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny a weboldal tulajdonos\u00e1nak is j\u00f3, mivel az \u00e1ltal\u00e1ban magasabb konverzi\u00f3s ar\u00e1nyhoz vezet.<\/p>\n<p>Ahogy a Core Web Vitalst bemutat\u00f3 <a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience\" target=\"_blank\" rel=\"noopener\">bejegyz\u00e9s\u00fckben<\/a> is le\u00edrj\u00e1k, bizonyos a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyhez kapcsol\u00f3d\u00f3 t\u00e9nyez\u0151k, mint a weboldal sebess\u00e9ge \u00e9s a mobilos haszn\u00e1lhat\u00f3s\u00e1g, \u00e9s a https megl\u00e9te m\u00e1r kor\u00e1bban is meger\u0151s\u00edtett rangsorol\u00e1si t\u00e9nyez\u0151 volt.<\/p>\n<p>Ezekhez csatlakoznak most a Core Web Vitals page experience mutat\u00f3i is, ahogy az al\u00e1bbi angol \u00e1br\u00e1n is l\u00e1that\u00f3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1467\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Google-felhasznaloi-elmennyel-kapcsolatos-faktorai.png\" alt=\"Google felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nnyel kapcsolatos faktorai\" width=\"772\" height=\"537\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Google-felhasznaloi-elmennyel-kapcsolatos-faktorai.png 772w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Google-felhasznaloi-elmennyel-kapcsolatos-faktorai-300x209.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Google-felhasznaloi-elmennyel-kapcsolatos-faktorai-768x534.png 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><\/p>\n<p>Teh\u00e1t mostant\u00f3l t\u00f6rekedni kell arra, hogy az alapvet\u0151 webes vitals mutat\u00f3k eset\u00e9n is min\u00e9l jobb eredm\u00e9nyt \u00e9rj\u00fcnk el, hiszen egy Google rangsorol\u00e1si t\u00e9nyez\u0151r\u0151l van sz\u00f3.<\/p>\n<p>Ugyanakkor k\u00e9t dolgot ki kell emelni:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Core_Web_Vitals_mutatok_hasonlitasa_a_versenytarsainkhoz\"><\/span>1.\u00a0\u00a0\u00a0\u00a0\u00a0 Core Web Vitals mutat\u00f3k hasonl\u00edt\u00e1sa a versenyt\u00e1rsainkhoz<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ezeket a webes vitals mutat\u00f3kat mindig a versenyt\u00e1rsainkhoz \u00e9rdemes hasonl\u00edtani.<\/p>\n<p>Azaz egy sok k\u00e9pet, vide\u00f3t, javascript k\u00f3dot tartalmaz\u00f3 webshopnak \u00e9rtelemszer\u0171en sokkal nehezebb t\u00f6k\u00e9letes pontsz\u00e1mot el\u00e9rni, mint egy egyszer\u0171 HTML alap\u00fa blognak. De egy webshop eset\u00e9n a mi SEO versenyt\u00e1rsunk nem egy blog lesz, hanem az a webshop, aki val\u00f3sz\u00edn\u0171leg hasonl\u00f3 m\u00f3don egy komplexebb tech stacken fut (\u00e9s hasonl\u00f3 technikai probl\u00e9m\u00e1kkal szembes\u00fclhet).<\/p>\n<p>Ha nem is tudunk minden Core Web Vitals mutat\u00f3 benchmarknak megfelelni, arra t\u00f6rekedj\u00fcnk, hogy legal\u00e1bb olyan teljes\u00edtm\u00e9nyt \u00e9rj\u00fcnk el, mint a legf\u0151bb organikus versenyt\u00e1rsaink, \u00e9s akkor abban biztosak lehet\u00fcnk, hogy nem a CWV miatt fogunk rosszul teljes\u00edteni organikus forgalomban.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Az_Alapveto_Webes_Vitals-mutatok_csak_az_egyik_SEO_rangsorolasi_tenyezo_a_sok_kozul\"><\/span>2.\u00a0\u00a0\u00a0\u00a0\u00a0 Az Alapvet\u0151 Webes Vitals-mutat\u00f3k csak az egyik SEO rangsorol\u00e1si t\u00e9nyez\u0151 a sok k\u00f6z\u00fcl<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ha nem nagyon sz\u00f6rny\u0171 az oldalunk, akkor att\u00f3l m\u00e9g hogy a weboldalunk nem szerepel p\u00e9ld\u00e1san az Alapvet\u0151 Webes Vitals mutat\u00f3k m\u00e9r\u00e9se szerint, m\u00e9g szerezhet\u00fcnk egy csom\u00f3 organikus l\u00e1togat\u00f3t.<\/p>\n<p>Megford\u00edtva, csak az\u00e9rt mert nagyon j\u00f3 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt ny\u00fajtunk a usereknek, p\u00e9ld\u00e1ul nagyon gyorsan bet\u00f6lt a weboldal, att\u00f3l m\u00e9g nem fogunk sok organikus l\u00e1togat\u00f3 szerezni Google-b\u00f3l.<\/p>\n<p>A sok organikus forgalomhoz a keres\u0151optimaliz\u00e1l\u00e1s egy\u00e9b r\u00e9szter\u00fcleteire is f\u00f3kusz\u00e1lni kell, \u00fagy mint:<\/p>\n<ul>\n<li>SEO optimaliz\u00e1lt tartalomgy\u00e1rt\u00e1s\n<ul>\n<li><a href=\"https:\/\/roihacks.hu\/kulcsszokutatas\/\" target=\"_blank\" rel=\"noopener\">kulcssz\u00f3kutat\u00e1s<\/a><\/li>\n<li><a href=\"https:\/\/roihacks.hu\/tartalmi-seo\/\" target=\"_blank\" rel=\"noopener\">tartalmi SEO<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/roihacks.hu\/linkepites\/\" target=\"_blank\" rel=\"noopener\">link\u00e9p\u00edt\u00e9s<\/a><\/li>\n<li><a href=\"https:\/\/roihacks.hu\/technikai-seo\/\" target=\"_blank\" rel=\"noopener\">technikai SEO<\/a> egy\u00e9b ter\u00fcletei.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Core_Web_Vitals_riport_Google_Search_Console-ban\"><\/span>Core Web Vitals riport Google Search Console-ban<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ha ellen\u0151rizni szeretn\u00e9nk, hogy hogyan \u00e1llunk a Core Web Vitals egyes mutat\u00f3sz\u00e1mait illet\u0151en, hol van sz\u00fcks\u00e9g jav\u00edt\u00e1sra, akkor ezt nagyon egyszer\u0171en megtehetj\u00fck Google Search Consoleban.<\/p>\n<p>Nyissuk meg a Google Search Console-t, majd ahogy a k\u00e9pen l\u00e1that\u00f3, a baloldali men\u00fcs\u00e1vban l\u00e9v\u0151 Alapvet\u0151 Webes Vitals-mutat\u00f3k riportra kell kattintani.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1465\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/felhasznaloi-elmennyel-kapcsolatos-riportok-Google-Search-Console-ban.png\" alt=\"felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nnyel kapcsolatos riportok Google Search Console-ban\" width=\"304\" height=\"345\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/felhasznaloi-elmennyel-kapcsolatos-riportok-Google-Search-Console-ban.png 304w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/felhasznaloi-elmennyel-kapcsolatos-riportok-Google-Search-Console-ban-264x300.png 264w\" sizes=\"(max-width: 304px) 100vw, 304px\" \/><\/p>\n<p>Ahogy l\u00e1that\u00f3 a Core Web Vitalst k\u00fcl\u00f6n vizsg\u00e1lja asztali g\u00e9p \u00e9s mobil g\u00e9p eset\u00e9n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1464\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Alapveto-Webes-vitals-mutatok-Google-Search-Console-riport.png\" alt=\"Alapvet\u0151 Webes vitals-mutat\u00f3k Google Search Console riport\" width=\"963\" height=\"709\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Alapveto-Webes-vitals-mutatok-Google-Search-Console-riport.png 963w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Alapveto-Webes-vitals-mutatok-Google-Search-Console-riport-300x221.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Alapveto-Webes-vitals-mutatok-Google-Search-Console-riport-768x565.png 768w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/p>\n<p>Ha kapnak elegend\u0151 organikus forgalmat a weboldalaink, akkor itt a Google val\u00f3s felhaszn\u00e1l\u00f3i adatok alapj\u00e1n mutatja meg, hogy hogyan teljes\u00edt\u00fcnk az Alapvet\u0151 Webes Vitals mutat\u00f3kat tekintve.<\/p>\n<p>Mint l\u00e1that\u00f3, jelen esetben mind asztali mind pedig mobil eset\u00e9n teljes\u00edtj\u00fck a Core Web Vitals \u00e1ltal t\u00e1maszott k\u00f6vetelm\u00e9nyeket, \u00e9s az oldalaink J\u00f3 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt mutatnak.<\/p>\n<p>Ha nem ez a helyzet, \u00e9s szeretn\u00e9nk l\u00e1tni, hogy mely oldallal vannak probl\u00e9m\u00e1k, akkor a \u2019Jelent\u00e9s megnyit\u00e1sa \u2019 gombra kattintva l\u00e1thatjuk, hogy milyen oldal eset\u00e9n konkr\u00e9tan milyen CWV mutat\u00f3ban teljes\u00edt\u00fcnk rosszul.<\/p>\n<p>Amit fontos megjegyezni, hogy a Google Search Console az egyes oldalak Core Web Vitals teljes\u00edtm\u00e9ny\u00e9t az elm\u00falt 28 napos \u00e1tlaga alapj\u00e1n hat\u00e1rozza meg, \u00edgy arra nem igaz\u00e1n haszn\u00e1lhat\u00f3, hogy az oldalak jav\u00edt\u00e1sai, fejleszt\u00e9sei ut\u00e1n ellen\u0151rizz\u00fck, hogy mennyire volt sikeres a Core Web Vitals mutat\u00f3k jav\u00edt\u00e1s\u00e1ra k\u00e9sz\u00fclt fejleszt\u00e9sek.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Core_Web_Vitals_mutatok_vizsgalata\"><\/span>Core Web Vitals mutat\u00f3k vizsg\u00e1lata<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Teh\u00e1t ha m\u00e9g nagyon kev\u00e9s forgalmat kapnak az oldalaink \u00e9s a Google Search Console-ban nem tudjuk meg n\u00e9zni a web vitals mutat\u00f3k teljes\u00edtm\u00e9ny\u00e9t vagy pedig egy nagyobb fejleszt\u00e9si csomagot val\u00f3s\u00edtottunk meg, ami a Core Web Vitals mutat\u00f3k jav\u00edt\u00e1s\u00e1t c\u00e9lozza, akkor egy m\u00e1sik eszk\u00f6zt kell arra haszn\u00e1lnunk, hogy tudjuk n\u00e9zni, hogy az oldalunk az adott pillanatban hogyan teljes\u00edt a webes vitals mutat\u00f3kat tekintve.<\/p>\n<p><span style=\"font-size: 16px;\">Ehhez a legjobb eszk\u00f6z most szerintem a <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\" target=\"_blank\" rel=\"noopener\">Google Page Speed Insights<\/a> tool-ja, ami imm\u00e1ron nemcsak a weboldal bet\u00f6lt\u0151d\u00e9si sebess\u00e9gr\u0151l ad inform\u00e1ci\u00f3kat, hanem a Core Web Vitals mutat\u00f3sz\u00e1mokr\u00f3l is.\u00a0<\/span><\/p>\n<p>Mind\u00f6ssze annyi a dolgunk, hogy megadjuk azt az URL-t, amit vizsg\u00e1lni szeretn\u00e9nk, \u00e9s a Google eszk\u00f6ze kidobja, hogy az adott oldal hogyan teljes\u00edt az adott lek\u00e9r\u00e9s sor\u00e1n a CWV mutat\u00f3kat tekintve.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1483\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-vitals-riport-Google-Page-Speed-Insights-toolon-belul.png\" alt=\"Core Web vitals riport Google Page Speed Insights toolon bel\u00fcl\" width=\"879\" height=\"408\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-vitals-riport-Google-Page-Speed-Insights-toolon-belul.png 879w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-vitals-riport-Google-Page-Speed-Insights-toolon-belul-300x139.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-vitals-riport-Google-Page-Speed-Insights-toolon-belul-768x356.png 768w\" sizes=\"(max-width: 879px) 100vw, 879px\" \/><\/p>\n<p>Valamint az egyes diagnosztikai \u00e9s jav\u00edt\u00e1sokkal kapcsolatos r\u00e9szekn\u00e9l azt is megmutatja, hogy a jav\u00edt\u00e1s vagy optimaliz\u00e1ci\u00f3, melyik Core Web Vitals mutat\u00f3ra lenne pozit\u00edv hat\u00e1ssal.<\/p>\n<p>Ha nagyon sok oldalunk van, \u00e9s minden oldalra szeretn\u00e9k a Core Web Vitals mutat\u00f3kat audit\u00e1lni, akkor az manu\u00e1lis m\u00f3don nagyon neh\u00e9zkes, mert egyes\u00e9vel kell az URL-eket bem\u00e1solni a PSI-be.<\/p>\n<p>Ilyen esetben a <a href=\"https:\/\/roihacks.hu\/screaming-frog-hasznalata\/\" target=\"_blank\" rel=\"noopener\">Screaming Froggal<\/a> \u00e9rdemes folytatni, amennyiben van pr\u00e9mium licenc-\u00fcnk, a screaming frogot \u00f6ssze tudjuk k\u00f6zni a Page Speed Insights API-j\u00e1val, \u00e9s a Core Web Vitals elemz\u00e9st az weboldal \u00f6sszes URL-j\u00e9re el tudjuk v\u00e9gezni egy egyszer\u0171 crawl futtat\u00e1s\u00e1val, ahogy a k\u00e9pen is l\u00e1that\u00f3:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1484\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-Vitals-mutatok-Screaming-Frogban.png\" alt=\"Core Web Vitals mutat\u00f3k Screaming Frogban\" width=\"1277\" height=\"376\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-Vitals-mutatok-Screaming-Frogban.png 1277w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-Vitals-mutatok-Screaming-Frogban-300x88.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-Vitals-mutatok-Screaming-Frogban-1024x302.png 1024w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-Vitals-mutatok-Screaming-Frogban-768x226.png 768w\" sizes=\"(max-width: 1277px) 100vw, 1277px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Core_Web_Vitals_elemei\"><\/span>Core Web Vitals elemei<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>De akkor n\u00e9zz\u00fck meg r\u00e9szletesebben azon, hogy mit mutat meg pontosan a h\u00e1rom Core Web Vitals mutat\u00f3sz\u00e1m:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"LCP_Largest_Contentful_Paint\"><\/span>LCP (Largest Contentful Paint):<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Az <a href=\"https:\/\/roihacks.hu\/seo\/largest-contentful-paint-lcp\/\" target=\"_blank\" rel=\"noopener\">LCP<\/a> azaz a legnagyobb vizu\u00e1lis tartalomv\u00e1lasz azt m\u00e9ri, hogy a legnagyobb elem az oldalon mennyi id\u0151 alatt t\u00f6lt be.<\/p>\n<p>Ez \u00e1ltal\u00e1ban egy k\u00e9p, az oldal c\u00edme H1-ben,\u00a0 de ak\u00e1r egy bekezd\u00e9s is lehet (l\u00e1sd lent), minden oldaln\u00e1l m\u00e1s lesz. T\u00f6bbf\u00e9lek\u00e9ppen meg lehet n\u00e9zni, hogy mi sz\u00e1m\u00edt az LCP elemnek az adott oldalon, a legegyszer\u0171bb, ha a m\u00e1r bemutatott Page Speed Insights-ban elemezz\u00fck az oldalt, akkor a Diagnosztika r\u00e9szen meg fogja mutatja a Page Speed Insights, hogy melyik eleme az oldalnak az LCP.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1480\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Legnagyobb-Vizualis-tartalom-valasz-Google-Page-Speed-Insightsbol.png\" alt=\"Legnagyobb Vizu\u00e1lis tartalom v\u00e1lasz Google Page Speed Insightsb\u00f3l\" width=\"894\" height=\"295\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Legnagyobb-Vizualis-tartalom-valasz-Google-Page-Speed-Insightsbol.png 894w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Legnagyobb-Vizualis-tartalom-valasz-Google-Page-Speed-Insightsbol-300x99.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Legnagyobb-Vizualis-tartalom-valasz-Google-Page-Speed-Insightsbol-768x253.png 768w\" sizes=\"(max-width: 894px) 100vw, 894px\" \/><\/p>\n<p>Mint minden Alapvet\u0151 Webes Vitals mutat\u00f3n\u00e1l, itt is h\u00e1rom besorol\u00e1st ad a Google az adott oldal LCP-t illet\u0151 teljes\u00edtm\u00e9ny\u00e9ben.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1470\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/largest-contentful-paint.png\" alt=\"largest contentful paint LCP\" width=\"1218\" height=\"366\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/largest-contentful-paint.png 1218w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/largest-contentful-paint-300x90.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/largest-contentful-paint-1024x308.png 1024w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/largest-contentful-paint-768x231.png 768w\" sizes=\"(max-width: 1218px) 100vw, 1218px\" \/><\/p>\n<p>Mint a k\u00e9pen l\u00e1that\u00f3, ha a legnagyobb vizu\u00e1lis tartalom 2,5 m\u00e1sodperc alatt t\u00f6lt be, akkor \u2019J\u00f3\u2019 teljes\u00edtm\u00e9ny\u00fcnk, ha 4 \u00e9s 2,5 mp k\u00f6z\u00f6tt van, akkor \u201eFejlesztend\u0151\u2019, ha 4 m\u00e1sodperc feletti a bet\u00f6lt\u00e9si id\u0151, akkor \u201eRossz\u201d-ul teljes\u00edt az adott oldal LCP mutat\u00f3 szempontj\u00e1b\u00f3l.<\/p>\n<p>A cikk legv\u00e9g\u00e9n osztunk meg arra vonatkoz\u00f3an technik\u00e1kat \u00e9s k\u00f6vetend\u0151 legjobb gyakorlatokat, amik seg\u00edteni fogj\u00e1k, hogy j\u00f3l teljes\u00edts\u00fcnk az LCP mutat\u00f3val is.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"First_Input_Delay_FID\"><\/span>First Input Delay (FID)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A <a href=\"https:\/\/roihacks.hu\/seo\/first-input-delay-fid\/\" target=\"_blank\" rel=\"noopener\">First Input Delay<\/a>, azaz az Els\u0151 interakci\u00f3t\u00f3l sz\u00e1m\u00edtott v\u00e1laszk\u00e9s\u00e9s azt m\u00e9ri, hogy mennyire gyorsan reag\u00e1l az oldal, ha egy gombra, form mez\u0151be vagy linkre kattintunk.<\/p>\n<p>Ha egy gombra kattintunk, \u00e9s nem t\u00f6rt\u00e9nik semmi, akkor ez el\u00e9g rossz felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny, rosszabb esetben m\u00e9g a felhaszn\u00e1l\u00f3 azt hiszi, hogy az adott gomb nem m\u0171k\u00f6dik, \u00e9s elhagyja az oldalt.<\/p>\n<p>Az LCP-hez k\u00e9pest ez\u00e9rt itt sokkal r\u00f6videbb id\u0151intervallumokat ad meg a Google:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1474\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/First-Input-Delay-1.png\" alt=\"First Input Delay\" width=\"1257\" height=\"391\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/First-Input-Delay-1.png 1257w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/First-Input-Delay-1-300x93.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/First-Input-Delay-1-1024x319.png 1024w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/First-Input-Delay-1-768x239.png 768w\" sizes=\"(max-width: 1257px) 100vw, 1257px\" \/><\/p>\n<p>Ahogy l\u00e1that\u00f3, 100 milliszekundom alatt sz\u00fcks\u00e9ges az oldalt bet\u00f6lteni, ha J\u00f3 \u00e9rt\u00e9kel\u00e9st akarunk el\u00e9rni, \u00e9s 300 milliszekundom felett a Google szerint rosszul teljes\u00edt az oldal a FID Core Web Vitals mutat\u00f3t tekintve.<\/p>\n<p>Csak \u00fagy mint az LCP kapcs\u00e1n, a cikk v\u00e9g\u00e9n osztunk meg technik\u00e1kat, amivel a FID-et is felgyors\u00edthatjuk.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Cumulative_Layout_Shift_CLS\"><\/span>Cumulative Layout Shift (CLS)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>V\u00e9g\u00fcl a harmadik alapvet\u0151 webes vitals-mutat\u00f3 a <a href=\"https:\/\/roihacks.hu\/seo\/cumulative-layout-shift-cls\/\" target=\"_blank\" rel=\"noopener\">Cumulative Layout Shift,<\/a> vagy magyarul Elrendez\u00e9s \u00f6sszmozg\u00e1sa, ami az oldal vizu\u00e1lis stabilit\u00e1s\u00e1t m\u00e9ri, azaz, hogy az elemek mennyire mozognak el kisz\u00e1m\u00edthatatlan m\u00f3don.<\/p>\n<p>Az el\u0151z\u0151leg bemutatott webes vitals mutat\u00f3kkal szemben ez nem az oldal bet\u00f6lt\u0151d\u00e9s\u00e9vel kapcsolatos felt\u00e9tlen\u00fcl, \u00edgy a Google az oldal bet\u00f6lt\u0151d\u00e9se ut\u00e1n is m\u00e9ri, amikor meg\u00e1llap\u00edtja field adatok alapj\u00e1n, hogy egy oldal hogyan teljes\u00edt a CLS-t illet\u0151en.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1477\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift-CLS-mutato.png\" alt=\"cumulative layout shift (CLS) mutat\u00f3\" width=\"1240\" height=\"390\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift-CLS-mutato.png 1240w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift-CLS-mutato-300x94.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift-CLS-mutato-1024x322.png 1024w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift-CLS-mutato-768x242.png 768w\" sizes=\"(max-width: 1240px) 100vw, 1240px\" \/><\/p>\n<p>Ha CLS-ben akarunk j\u00f3l teljes\u00edteni, akkor 0,1-es \u00e9rt\u00e9k alatt kell lenn\u00fcnk, ha viszont 0,25 felett vagyunk, akkor \u00e9rdemes az oldalt jobban megvizsg\u00e1lni, mert probl\u00e9m\u00e1k vannak az oldal vizu\u00e1lis stabilit\u00e1s\u00e1val.<\/p>\n<p>Hogy pontosan ez a CLS \u00e9rt\u00e9k hogyan j\u00f6n ki, \u00e9s mely oldal elemek eset\u00e9ben van probl\u00e9ma a vizu\u00e1lis stabliti\u00e1ssal azt legk\u00f6nnyebben a Page Speed Insights eszk\u00f6z seg\u00edts\u00e9g\u00e9vel tudjuk megtenni.<\/p>\n<p>Csak \u00fagy mint az LCP eset\u00e9n a PSI riport Diagnosztika r\u00e9sz\u00e9n fogunk egy \u2019Ker\u00fclje a CLS\u2019 javaslatot l\u00e1tni, ha azt lenyitjuk, akkor konkr\u00e9ten fogjuk l\u00e1tni, hogy az oldal mely elemei probl\u00e9m\u00e1sak Cumulative Layout Shift szempontj\u00e1b\u00f3l.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1482\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift-CLS-problema.png\" alt=\"cumulative layout shift (CLS) probl\u00e9ma\" width=\"822\" height=\"556\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift-CLS-problema.png 822w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift-CLS-problema-300x203.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/cumulative-layout-shift-CLS-problema-768x519.png 768w\" sizes=\"(max-width: 822px) 100vw, 822px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Core_Web_Vitals_mutatok_javitasa_es_optimalizacioja\"><\/span>Core Web Vitals mutat\u00f3k jav\u00edt\u00e1sa \u00e9s optimaliz\u00e1ci\u00f3ja<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ahogy m\u00e1r eml\u00edtettem, v\u00e9gezet\u00fcl p\u00e1r tippet megosztan\u00e9k, hogy miket tegy\u00fcnk ahhoz, hogy j\u00f3l szerepelj\u00fcnk az alapvet\u0151 webes vitals mutat\u00f3sz\u00e1mokat tekintve.<\/p>\n<p>Az al\u00e1bbiakat saj\u00e1t tapasztalatb\u00f3l \u00edrom, mert pont ezen az oldalon is rosszul szerepelt\u00fcnk a Core Web Vitals-zel, majd t\u00f6bbek k\u00f6z\u00f6tt p\u00e1r lenti jav\u00edt\u00e1st implement\u00e1lva, ahogy l\u00e1that\u00f3, m\u00e1r a Google Search Console szerint is \u201ez\u00f6ldek\u201d vagyunk, azaz j\u00f3l teljes\u00edt\u00fcnk a CWV mutat\u00f3it illet\u0151en.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1466\" src=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-Vitals-jelentes.png\" alt=\"Core Web Vitals jelent\u00e9s\" width=\"965\" height=\"722\" srcset=\"https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-Vitals-jelentes.png 965w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-Vitals-jelentes-300x224.png 300w, https:\/\/roihacks.hu\/wp-content\/uploads\/2021\/07\/Core-Web-Vitals-jelentes-768x575.png 768w\" sizes=\"(max-width: 965px) 100vw, 965px\" \/><\/p>\n<p>Ugye a lenti tippeket, jav\u00edt\u00e1sai javaslatokat nemcsak az\u00e9rt \u00e9rdemes jav\u00edtani, mert egy meger\u0151s\u00edtett Google rangsorol\u00e1si t\u00e9nyez\u0151 a Core Web Vitals mutat\u00f3sz\u00e1mokban val\u00f3 teljes\u00edtm\u00e9ny\u00fcnk.<\/p>\n<p>Hanem az\u00e9rt is, mert ezzel a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt is jav\u00edtani fogjuk, ami \u00e1ltal\u00e1ban a konverzi\u00f3s ar\u00e1ny n\u00f6vel\u00e9s\u00e9hez is hozz\u00e1 j\u00e1rulhat.<\/p>\n<p>Van egy k\u00fcl\u00f6n cikkben, ahol ebben a felhaszn\u00e1l\u00f3 \u00e9lm\u00e9nnyel \u00e9s weboldalbet\u00f6lt\u0151d\u00e9si sebess\u00e9g jav\u00edt\u00e1s\u00e1val kapcsolatos technik\u00e1kba r\u00e9szletesebben belemegyek, \u00edgy itt most csak p\u00e1r technik\u00e1t fogok megeml\u00edteni, amivel a h\u00e1rom webes vitals mutat\u00f3kat lehet jav\u00edtani.<\/p>\n<p>Ha az egyes technik\u00e1k r\u00e9szleteire jobban k\u00edv\u00e1ncsi vagy, akkor olvasd el ezt a cikket:<\/p>\n<ul>\n<li>Technik\u00e1k a weboldal bet\u00f6lt\u0151d\u00e9si sebess\u00e9g\u00e9nek jav\u00edt\u00e1sa (szerkeszt\u00e9s alatt)<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"LCP_javitasa\"><\/span>LCP jav\u00edt\u00e1sa<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Az al\u00e1bbi technik\u00e1kat, optimaliz\u00e1ci\u00f3s javaslatokat \u00e9rdemes figyelembe venni, amennyiben a Largest Contentful Paint-et szeretn\u00e9nk jav\u00edtani az oldalaink eset\u00e9n.<\/p>\n<ol>\n<li>Gyorsabb hosting szolg\u00e1ltat\u00f3ra v\u00e1lt\u00e1s<\/li>\n<li>Caching implement\u00e1l\u00e1sa az oldalon<\/li>\n<li>Nagy k\u00e9pek t\u00f6m\u00f6r\u00edt\u00e9se felt\u00f6lt\u00e9s el\u0151tt vagy ut\u00e1n<\/li>\n<li>Lazyloading technika implement\u00e1l\u00e1sa a k\u00e9pekre \u00e9s vide\u00f3kra<\/li>\n<li>CDN haszn\u00e1lata (k\u00fcl\u00f6n\u00f6sen akkor ha a weboldal sok nemzetk\u00f6zi forgalmat kap)<\/li>\n<li>CSS minimaliz\u00e1l\u00e1sa<\/li>\n<li>Nem haszn\u00e1lt CSS t\u00f6rl\u00e9se<\/li>\n<li>JavaScript f\u00e1jlok minimaliz\u00e1l\u00e1sa<\/li>\n<li>Nem haszn\u00e1lt JS f\u00e1jlok t\u00f6rl\u00e9se<\/li>\n<li>Sz\u00fcks\u00e9ges JS f\u00e1jlok aszinkronikus bet\u00f6lt\u00e9se<\/li>\n<\/ol>\n<p>Amennyiben WordPress vagy hasonl\u00f3 CMS-en fut\u00f3 weboldalunk van, akkor vannak plugin-ok vagy m\u00e1s CMS-n\u00e9l app-ok, amik seg\u00edtenek ezeket a fenti optimaliz\u00e1ci\u00f3s l\u00e9p\u00e9seket megtenni.<\/p>\n<p>Ha saj\u00e1t fejleszt\u00e9s\u0171 weboldalunk van, akkor k\u00fcldj\u00fck el a fejleszt\u0151inknek az al\u00e1bbi angol cikket az LCP optimaliz\u00e1l\u00e1s\u00e1r\u00f3l: <a href=\"https:\/\/web.dev\/optimize-lcp\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/optimize-lcp\/<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"FID_javitasa\"><\/span>FID jav\u00edt\u00e1sa<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ahogy feljebb eml\u00edtett\u00fck a First Input Delay (FID) a weboldal interaktivit\u00e1s\u00e1nak gyorsas\u00e1g\u00e1t m\u00e9ri.<\/p>\n<p>Mivel \u00e1ltal\u00e1ban a weboldalak interakt\u00edv funkci\u00f3i Javascript k\u00f3dok r\u00e9v\u00e9n m\u0171k\u00f6dnek, ez\u00e9rt ha az FID metrik\u00e1n szeretn\u00e9nk jav\u00edtani, akkor a weboldal Javascript k\u00f3djainak optimaliz\u00e1l\u00e1s\u00e1val kell foglalkozni.<\/p>\n<p>Az LCP fejezetben eml\u00edtett best practice-ek \u00e9s k\u00fcl\u00f6n\u00f6sen JS-szel kapcsolatos optimaliz\u00e1ci\u00f3k az\u00a0 FID gyors\u00edt\u00e1s\u00e1ban is seg\u00edthetnek. Ha tov\u00e1bbi technikai r\u00e9szletekre vagy k\u00edv\u00e1ncsi, akkor ezt a Google guide-ot aj\u00e1nljuk hozz\u00e1:<\/p>\n<p><a href=\"https:\/\/web.dev\/optimize-fid\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/optimize-fid\/<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"CLS_javitasa\"><\/span>CLS jav\u00edt\u00e1sa<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A Cumulative Layout Shift (CLS) ahogy m\u00e1r eml\u00edtett\u00fck a weboldal vizu\u00e1lis stabilit\u00e1s\u00e1t m\u00e9ri, azaz azt, hogy mennyire mozognak el az elemek az oldalon az oldal bet\u00f6lt\u0151d\u00e9s k\u00f6zben.<\/p>\n<p>Leggyakrabban azokn\u00e1l az oldalakn\u00e1l jelentkezhet, ahol sok a hirdet\u00e9s az oldalon, amik bet\u00f6lt\u0151d\u00e9s\u00fckkor elmozgatj\u00e1k a t\u00f6bbi elemet is az oldalon. Emellett a CLS n\u00f6veked\u00e9s\u00e9hez vezethet, ha a k\u00e9pekn\u00e9l, vide\u00f3kn\u00e1l, be\u00e1gyzatott tartalmakn\u00e1l, iframe-ekn\u00e9l nincsenek a dimenzi\u00f3k megadva.<\/p>\n<p>Ezek a probl\u00e9m\u00e1k k\u00f6nnyen orvosolhat\u00f3k, ha defini\u00e1ljuk a dimenzi\u00f3kat az egyes elemekn\u00e9l. Tov\u00e1bbi tan\u00e1csok ebben a cikkben olvashat\u00f3k: <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/optimize-cls\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>j\u00fanius\u00e1t\u00f3l a Google organikus rangsorol\u00e1si t\u00e9nyez\u0151k\u00e9nt is figyelembe veszi a weboldal \u00e1ltal ny\u00fajtott felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt, amit az Alapvet\u0151 Webes Vitals mutat\u00f3kon (angolul Core Web Vitals) kereszt\u00fcl m\u00e9r. De mik is ezek az Alapvet\u0151 Webes Vitals mutat\u00f3k \u00e9s mit m\u00e9rnek pontosan? Err\u0151l fog sz\u00f3lni ez a blogbejegyz\u00e9s, \u00e9s emellett m\u00e9g az al\u00e1bbiakra is kit\u00e9r\u00fcnk: Core Web &#8230; <a title=\"Mik a Core Web Vitals (Alapvet\u0151 Webes Vitals) mutat\u00f3k, hogyan m\u00e9r\u0151dnek, \u00e9s hogyan jav\u00edtsuk \u0151ket? 2024\" class=\"read-more\" href=\"https:\/\/roihacks.hu\/core-web-vitals\/\" aria-label=\"Read more about Mik a Core Web Vitals (Alapvet\u0151 Webes Vitals) mutat\u00f3k, hogyan m\u00e9r\u0151dnek, \u00e9s hogyan jav\u00edtsuk \u0151ket? 2024\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[23,1],"tags":[],"modified_by":"Marketer","_links":{"self":[{"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/posts\/1461"}],"collection":[{"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/comments?post=1461"}],"version-history":[{"count":5,"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/posts\/1461\/revisions"}],"predecessor-version":[{"id":1722,"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/posts\/1461\/revisions\/1722"}],"wp:attachment":[{"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/media?parent=1461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/categories?post=1461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/roihacks.hu\/wp-json\/wp\/v2\/tags?post=1461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}