تا همین چند سال معیار های سئو محدود به محتوا، کلمات کلیدی، تعداد تیترها، سایز و تعداد تصاویراستفاده شده در محتوا و غیره بود اما امروزه با توجه به الگوریتم های جدید موتورهای جستجو به ویژه گوگل و تمرکز بر تجربه کاربری UX، سئو مفهوم گسترده‌تری پیدا نموده است. در این مقاله ابتدا خواهیم دید First Contentful Paint با FCP چیست ؟ و سپس به روش‌های بهینه‌سازیFCP خواهیم پذداخت.
هدف موتورهای جستجوگر در وهله اول درک مفهوم آن چیزی است که کاربر می خواهد و در گام بعدی تشخیص اینکه آیا لینک‌های ارایه شده متناسب با نیاز کاربر هست یا خیر؟ بخش اول مربوط به کاربر و توانایی او در تکنیک های جستجو است. اما بخش دوم مربوط به وب مستر‌هاست. پارامترهای زیاد در ارزیابی یک صفحه توسط کاربران و موتورهای جستجو دخیل هستند. برای بررسی راهکارهای بهبود Ux برای سئو و اینکه FCP چیست ؟ ابتدا باید با معیارهایی که در زمینه تجربه کاربری یا UX موثر هستند، آشنا می‌شویم.
رابطه بین طراحی تجربه کاربری UX و سئو
قبل از اینکه ببینیم FCP چیست یابد یا واژه دیگری به نام core web vitals آشتا شویم. گوگل همواره تلاش کرده تجربه کاربری رو در اولویت قرار داده و برای این کار همواره الگورتیم ها جدیدی معرفی می‌کند. برای مثال گوگل با معرفی مفهومی به نام Mobile-first index اعلام کرده که وب سایت‌ها را حتی در حالت دسکتاپ بر اساس محتوایی که در حالت موبایل نمایش می‌دهند، الویت بندی می‌کند. و برای این الویت بندی نه تنها محتوا بلکه طراحی UX و حتی UI را مورد ارزیابی قرار می‌دهد. در این‌باره توصیه میکنیم حتما مقاله تاثیر UI و UX در سئو را مطالعه بفرمایید.
از اوایل سال 2020 نیز گوگل مجموعه الگوریتم های دیگری تحت عنوان core web vitals ارائه داد و اعلام کرد که این معیارها نقشی حیاتی در تعیین جایگاه یک صفحه در SERP یا صفحه نتایج گوگل خواهد داشت. با بررسی این معیار ها مشخص می شود که طراحی تجربه کاربری، سرعت بارگذاری و سئو بیش از پیش با هم گره خورده‌اند و کیفیت هر تجربه کاربری تاثیر مستقیمی در سئو دارد. این الگوریتم ها تعریف جدیدی برای سرعت بارگذاری سایت ارائه می‌کنند. در ادامه برای شروع به بررسی FCP خواهیم پرداخت. و در مقالات بعدی، سایر این پارامترها را نیز بررسی خواهیم کرد.
Core Web Vitals چیست؟
Core Web Vitals سنجش هایی هستند که گوگل برای بررسی کیفیت تجربه کاربری در محیط واقعی (محیطی شبیه آنچه که کاربران واقعی تجربه می‌کنند نه ربات های جستجوگر) بررسی می‌کند (این اطلاعات را گوگل از طریق مرورگر کروم دریافت می‌کند). FCP یا First Contentful Paint به همراه LCP (largest contentful paint)، INP (interaction to next paint) و CLS (Cumulative Layout Shift) مهمترین پرامترهای این سنجه هستند.
FCP چیست؟
مدت زمانی که طول می‌کشد تا اولین المان در صفحه به کاربر نمایش داده شود را First Contentful Paint یا FCP می‌گویند. نحوه محاسبه‌ی FCP کمی پیچیده است اما به توصیه گوگل تا 1.8 ثانیه مقدار قابل ایده‌آل برای این سنجش است.بین 1.8 تا 3 مقدار قابل قبول و بیش از 3 ثانیه نیاز به بازنگری اساسی در طراحی صفحه دارد.
روش‌های بهینه‌سازیFCP
برای بهینه‌سازیFCP ابتدا باید بتوانیم آنها را اندازه گیری کرده تا تاثیر اقدامات خود را ارزیابی کنیم. برای اندازه گیری FCP می‌توان از ابزارهایی مانند PageSpeed Insights و Lighthouse استفاده کرد. این ابزارها در کنار اندازه گیری این معیارها، راهکارهایی برای بهبود آن پیشنهاد می‌دهد. همچنین کتابخانه جاوا اسکریپتی web-vitals، برای اندازی گیری معیارهای core web vitals توسعه داده شده که به عنوان یک طراح UX می‌توانید از آن استفاده کنید. همچنین مرورگر کروم به عنوان در دسترس ترین ابزار علاوه بر سنجش این معیار ها می تواند شما را در بهبود آنها یاری کند
حذف منابع مسدود کننده:
منظور از منابع مسدود کننده منابع خارجی مانند فایل های CSS، جاوا اسکریپت و فونت‌ها هستند که در صفحه HTML فراخوانی می شوند اما بنا به هر دلیلی زمان بارگذاری آنها زیاد است. سعی کنید تا جای امکان منابع مسدود کننده را حذف کنید. فایل های جاوا اسکریپت را از بخش <head> به انتهای بخش <body> منتقل کنید.
به عنوان یک طراح UIو UX باید بتوانید به صورت بهینه بارگذاری کدهای جاوا اسکریپتی و css را مدیریت کنید این کارتاثیر بالایی در بهبود تجربه کاربری یا UX بهتر برای سئو دارد برای مثال برخی فایلهای تاثیر گذار در افزایش سنجه FCP عبارتند از:
- تگ های <script> بدون ویژگی defer یا async در بخش <head>
- تگ‌های <link rel=”stylesheet” > که ویژگی disabled ندارد یا ویژگی media آن با دستگاه کاربر مطابقت داشته باشد
- تگ <link rel=”stylesheet” > با ویژگی ” media=all”
برای بهینه سازی FCP شما می توانید کد های جاوا اسکریپتی ضروری را درون کد های html به صورت Inline قرار دهید و مابقی کد ها را به صورت فایل خارجی با ویژگی defer یا async فراخوانی کنید.
بهینه‌سازیFCP با کمینه کردن یا کوچک کردن فایلهای css:
معمولا فایلهای css از چیزی که باید باشند حجیم تر هستند شما به عنوان یک طراح UI یا UX باید بتوانید اول از همه به صورت هوشمندانه کد های css را تولید کنید برای مثال به قطعه کد زیر را
h1{
background-color: #000000;
color: #ffffff
}
h2{
background-color: #000000;
color: #ffffff
}
با این کد مقایسه کنید؛
h1, h2{
background-color: #000;
color: #fff
}
برای تمام مرورگرها این دو قطعه کد تفاوتی ندارد اما قطعه کد دوم به طور مشخص حجم کمتری دارد. گام بعدی برای کاهش کد های تولید شده استفاده از افزونه و یا ابزارهای موجود مانند (Css minifyer) برای کمتر (Minify) کردن کد های موجود است.
نکته: ابزار lighthouse فایلهای css شما را بررسی می‌کنند ومیزان حجم نهایی آنها را در صورت بهینه شدن محاسبه و ارایه می‌کند.
حذف فایلهای css و js:
اجازه بدید ابتدا ببینیم که یک فایل css چگونه بر سرعت FCP تاثیر می‌گذارد . استفاده از تگ <link> روشی معمول برای فراخوانی یک فایل CSS به صفحه است ،
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>چون خارج از صفحه HTML است، مرورگر آن را دانلود می‌کند. در واقع مرورگر تمام فایل های فراخوانی شده را قبل از اینکه محتوایی به کاربر نشان دهد دانلود می‌کند که تاثیر زیادی بر افزایش میزان FCP می گذارد علاوه بر آن مرورگر برای ایجاد رندر صفحه ابتدا تمام درخت DOM را پیمایش می‌کند و از فایلهای CSS موجود، استایل مربوط به هر تگ را مشخص می‌کند.
مشخص است که هر چه فایلهای css استفاده نشده بیشتر باشد این کار زمان بیشتری طول خواهد کشید. فکر کنم تا همین جا به این نتیجه رسیده باشید که حذف فایلهای css بدون استفاده چقدر در سرعت بارگذاری سایت تاثیر‌گذار خواهد بود. خوشبختانه ابزراهایی مانند Critical یا افزونه‌هایی برای استخراج استایل های ضروری و استفاده نشده ارائه می‌کند که می‌توانید از آنها استفاده کنید.
درمورد فایل های جاوا اسکریپ استفاده نشده نیز باید همین روال را در نظر گرفت. ابزار lighthouse هر فایل css و js استفاده نشده که بیش از 20 کیلو بایت داشته باشد را شناسایی و در برگه performance ارائه می‌کند، که به عنوان اولین گام می‌توانید از آن استفاده کنید. همچنین در تب coverage در Dev Tools Chrome فایلهای css و js استفاده نشده قابل مشاهده اند.
استفاده از ویژگی پیش اتصال برای دسترسی به منابع خارجی و DNSها:
اگر منابعی خارج از هاست خودتان استفاده می‌کنید می‌توانید با افزودن ویژگی‌های preload و dns-prefetch را استفاده کنید.
<link rel=”preload” href=”https://example.com”>همچنین برای دریافت منابع از DNS ها بهتر است ویژگی dns-prefetch را در تگ <link> لحاظ کنید.
<link rel=” dns-prefetch” href=”https://example.com”>استفاده از ویژگی پیش اتصال preload برای منابع زنجیره ای:
برخی از منابع معمولا توسط منابع و فایلهای خارجی دیگر فراخوانی می شوند که به آن فراخوانی زنجیره ای می‌گویند. فرض کنید فایل index.html فایل app.js را در خود فراخوانی می‌کند. فایل app نیز فایلهای style.css و ui.js را فراخوانی می‌کند در این حالت تا زمانی که مرورگر فایل app.js فراخوانی نکند از وجود دو فایل style.css و ui.js بی خبر است. در این حالت زمان بارگذاری این صفحه مانند تصویر زیر می باشد.
با تنظیم کردن ویژگی preload برای فایلهای style.css و ui.js هر سه فایل به طور هم زمان بارگذاری شده و در نتیجه سرعت بارگذاری سریع تر می شود.
اندازه DOM خود را کوچک نگه دارید
اندازه DOM تاثیر مستقیمی در سرعت بارگذاری دارد. بنابراین برای بهینه‌سازیFCP تا حد امکان از تگ های کمتری برای طراحی و تولید صفحات سایت خود استفاده کنید. همچنین می توانید از حالت بارگذاری تنبل!! (Lazy loading ) برای بارگذاری قسمت‌های DOM بهره بگیرید. تا حد امکان از انتخاب های ساده برای هدف قرار دادن تگ‌ها و المانهای DOM استفاده کنید.
به گزارش گوگل، موتور رندر کردن صفحات در گوگل کروم حدود نیمی از زمان رندر کردن صفحه را صرف انطباق سبک های تخصیص داده شده به عناصر می‌کند و نیمی دیگر از زمان را صرف ایجاد ساختار DOM می‌کند بنابراین ساده سازی انتخاب گرها در Css می تواند تا حد زیادی زمان محاسبه سبک عناصر را کاهش دهد پس تا جای ممکن از انتخابگرهای پیچیده کمتر استفاده کنید.
.box:nth-last-chlid(-n+1) .title {
/* style */
}
.last-box-title{
/* style */
}راهکار دیگری که موثرتر از انتخابگرهای ساده است، کاهش تعداد عناصر استایل دهی شده است. راهکاری که گوگل توصیه کرده است استفاده از متد BEM (Block, Element, Mofdifire ) است.
بیهنه سازی بارگذاری فونت‌ها:
فونت ها معمولا فایلهای با حجم زیادی هستند که بارگذاری آنها مدتی طول می‌کشد. برای مقابله با این مشکل مرورگرها معمولاً متن را تا زمانی که فونت آن بارگذاری گردد، پنهان می‌کنند این باعث ظاهر شدن ناگهانی متن یا Flash Of Invisible Text (FOIT) می شود که یک امتیاز منفی برای تجربه کاربری UX به شمار میرود و می بایست از آن اجتناب کرد و در عوض تا زمان بارگذاری فونت مورد نظر از یک فونت سیستمی استفاده کنیم که به آن Flash Of Unstyled Text (FOUT) می‌گویند.
شاید بد نباشد بدانید که مرورگرهای کروم، اج، فایرفاکس و اپرا متن را تا 3 ثانیه پنهان می‌کنند و در صورت آماده نبودن فایل فونت از یک فونت سیستمی برای نشان دادن متن استفاده می‌کنند اما مرورگر سافاری تازمانی که فایل فونت مشخص شده بارگذاری نشده باشد، متن را پنهان نگه می‌دارد. راه حل این مشکل به کار بردن ترفندهایی برای نمایش فوری متن‌هاست. برای این منظور دو راهکار می توان به کار گرفت:
گزینه اول: استفاده از fon-display:swap
/* Before */
@font-face {
font-family: Helvetica;
} /* After */
@font-face {
font-family: Helvetica; font-display: swap;
}با این ویژگی مرورگر متوجه می شود متن را بلافاصله با یک فونت سیستمی نمایش دهد تا زمانی که فایل فونت مشخص شده برای آن متن به طور کامل بارگذاری شود.
راهکار دوم تغییر فونت‌ها متن پس از بارگذاری کامل:
این راهکار سه بخش دارد؛ ابتدا فونت‌های سفارشی را از استایل های خود حذف کنید یا از آنها استفاده نکنید. به این طریق مطمئن خواهید شد مرورگر متن را بلافاصله با فونت سیستمی نمایش می‌دهد.
سپس با استفاده از CSS Font Loading API زمانی که فونت شما به طور کامل بارگذاری شد را مشخص می‌کنید و به کمک قطعه کد کوچک زیر تعیین می‌کنید که وقتی فونت مورد نظر شما لود شد آن را به المانهای مورد نظر اعمال کنید.
/ Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font); // Load the font font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
همچنین می توانید از کتابخانه‌های سبکی مانند FontFaceObserver استفاده کنید که‌قدرت عمل بیشتری در اختیار شما قرار می دهند. آنچه مطالعه کردید در مورد ” FCP چیست؟ ” بود در قسمت بعد در رابطه با LCP یکی دیگر از معیارهای مهم Core web vitals و روش های بهبود آن صحبت خواهیم کرد.
