راهکارهای بهبود First Contentful Paint
افزایش سرعت وردپرس با بهبود FCP همراه با 10 راهکار موثر ایکارسو
با پیادهسازی یک تگ پیش بارگذاری که حاوی لوگو است، به مرورگر دستور می دهید که لوگو را زودتر از زمان معمول بارگذاری کند، بنابراین FCP را حتی بیشتر بهبود می بخشد. یکی از روشهای کاربردی برای بهبود سئو داخلی سایت و افزایش ترافیک،... با این وجود، ممکن است این روش همانند روش عملی دقت کافی در ارزیابی را نداشته باشد. پس اگر به دنبال ارزیابی دقیقتری هستید؛ باید یه صورت عملی و از طریق ارتباط با کاربرهای واقعی میزان FCP را ارزیابی کنید. با انجام روش عملی میتوانید میزان و نحوه تعامل بازدیدکنندگان از طریق دستگاههای هوشمند مختلف را مشاهده کنید. First Contentful Paint را میتوان به دو صورت آزمایشگاهی (In the Lab) و عملی (In the Field) اندازهگیری کرد.
این معیار نشان میدهد که کاربر چهزمانی برای اولینبار بخشی از محتوای صفحه را میبیند. هرچه FCP کمتر باشد، بهتر است و تاثیر مثبتی بر رتبهبندی سایت دارد. برای بهینهسازی FCP، توصیه میکنیم از ترکیبی از روشهای مذکور استفاده کنید. همچنین، استفاده از ابزارهایی مانند PageSpeed Insights میتواند به شما در شناسایی مشکلات عملکرد و پیداکردن راهحلهای مناسب کمک کند. اگر کم باشد، کاربر سریعتر میفهمد که درخواست او درحال پردازش است که منجر به افزایش رضایت کاربر میشود.
Largest Contentful Paint شاخصی است که زمان لازم برای نمایش بزرگترین عنصر قابل مشاهده در صفحه را اندازهگیری میکند. هدف از این شاخص، اندازهگیری زمانی است که کاربر احساسی از ثبات و پایداری صفحه پیدا میکند و میتواند به طور مؤثری با آن تعامل داشته باشد. از آنجایی که تمرکز این پارامتر بر بارگذاری اولین المان بصری در صفحه است؛ با کاهش حجم و تعداد این المانها میتوانیم به بهینهسازی این معیار کمک کنیم. با روشهای مختلفی میتوان به کاهش و رفع خطای First contentful paint کمک کرد که در ادامه آنها را معرفی میکنیم. به عنوان یک توسعه دهنده ، می دانید که کدام منابع برای سایت شما مهمترین هستند. با استفاده از این دانش ، می توانید این منابع مهم را برای بارگذاری درلحظه مشخص کنید و سرعت بارگذاری صفحه افزایش دهید.
بنابراین سعی کنید با بهینهسازی معیارهای فعلی و رفع خطای اونها از قافله عقب نمونید و آماده باشید تا معیارهای جدید از راه برسن. شما همچنین میتونید برای دریافت خدمات حرفهای در زمینه آنالیز سایت و بهبود سئو از ابزار سئو فارسی میزفا تولز با امکانات فراوان استفاده کنید. همانطور که در مقاله افزایش سرعت سایت وردپرس گفته شد، بهبود این پارامتر مزایای بسیار زیادی از جمله کاهش نرخ پرش، افزایش نرخ تبدیل، بهبود تجربه کاربری و رتبهبندی سایت را به همراه خواهد داشت. با استفاده از ابزارهای مختلف میتوان معیار FCP را ارزیابی کرد و سپس به بهبود آن پرداخت. در این مقاله از دیماکده، هر یک از موارد را به صورت مفصل بررسی خواهیم کرد.
بنابراین طبق توصیه گوگل حالت ایده آل برای یک وب سایت این است که 75 درصد از صفحات آن دارای فاکتور FCP با عدد 1.8 ثانیه یا کمتر از آن باشند. علاوه بر این ، اگر منبعی جزئی از مسیر رندرینگ بحرانی (Critical Rendering Path) صفحه شما باشد ، هر نوع تغییر مسیر منشاء آن را از بین ببرید. راهکاری دیگر برای جلوگیری از دیر لود شدن سایت وردپرس، مشکل بارگذاری فونت های سفارشی است. در حالی که می توانید اسکریپت های مهم را Inline کنید ، آنها هنوز نیاز به بارگیری و تجزیه دارند. احتمالا تابحال برای بررسی سرعت سایت وردپرسی خود، آن را در PageSpeed Insights بررسی کرده اید. درست مانند سایر مواردی که به گوگل مربوط میشوند، برای این معیار نیز روش خاصی برای اندازهگیری وجود دارد.
همچنین نحوه بهینهسازی آن را بررسی کردیم و گفتیم که میتوان بهواسطه بهینهسازی تصاویر، فشردهسازی فایلهای CSS و کدهای جاوا اسکریپت، استفاده از قابلیت لیزی لودینگ، کش مرورگر، شبکه توزیع محتوا و... فاصله زمانی بین ورود کاربر به وبسایت و مشاهده اولین محتوا را کاهش داد تا تجربه کاربری بهبود یابد. هر چند فاکتور FCP یک معیار از Core Web Vitals به شمار نمی رود، اما اگر به تجربه کاربری وب سایت خود اهمیت می دهید، نباید آن را نادیده بگیرید. یک صفحه وب بعد از کنار هم قرار دادن بسیاری از عناصر مثل HTML، شیوهنامههای CSS، اسکریپتهای جاوا و … توسط مرورگر قابل ارائه به مخاطب میشه. یک سند HTML خودش شامل تگهای مختلفه، اما همه اونها به سرعت توسط اکثر مرورگرها آنالیز میشن.
مهم نیست که چقدر خوب جاوا اسکریپت رو بهینهسازی کنید، باز هم در مقایسه با پردازش HTML کند عمل میکنه. در واقع هر چیزی که به JS نیاز داشته باشه میتونه تاثیر منفی بر FCP داشته باشه و وقتی صحبت از بهبود FCP میشه، هر میلیثانیه اهمیت داره. برای مثال توجه داشته باشید که بسیاری از تمها شامل عناصر فانتزی در بالای صفحه هستن که از اسکریپتهای زیادی استفاده میکنن و میتونن باعث بروز خطای FCP بشن. همچنین از قرار دادن عناصری مثل انیمیشنهای سنگین و پلاگینهای اسلایدر در بالای صفحه خودداری کنید. اگر با روشهای بهینه سازی FCP بتوانید کاری کنید که سرعت بارگذاری بیشتر شود، نمره مربوط به آن کاهش پیدا خواهد کرد.
در بیشتر موارد، لوگو اولین عنصری است که در صفحه ظاهر میشود، بنابراین در اینجا چند تکنیک ساده وجود دارد که بارگذاری آن را سرعت میبخشد. به عنوان مثال تغییر در رنگ پس زمینه به عنوان یک محتوا شناخته نمی شود ، زیراکه کاربر آن را به عنوان یک محتوا نمی شناسد پس قائدتا جزوه fcp محسوب نشده و به نوعی fp می باشد. در اخر پیشنهاد میشه برای بهتر نتیجه گرفتن از یک مـتخصص سئو یا هر کسی که بهش اعتماد دارید و دانش داره کمک بگیرید. بهتره یک مثال واقعی و خوب بزنیم.در گوگل و صفحه اصلی آن سرچ کنیم Larry Page و در فریم دوم باکس سرچ گوگل نمایش داده بشه یعنی FCP رخ داده. در فریم دوم هست که یک Content ایجاد شده، درواقع همان باکس سرچ هست.
اگر مخاطب ببیند که بارگذاری صفحات سایت شما زمان زیادی به طول میانجامد، به سرعت از سایتتان ناامید میشود. بر طبق مطالعات Top Designs Firms، حدود 42 درصد کاربران به محض مواجه شدن با یک سایت کند، آن را ترک میکنند و زمان زیادی منتظر نخواهند ماند. هر وبسایت رندر شده توسط کلاینت به مقدار قابل توجهی جاوا اسکریپت برای بارگیری در مرورگر نیاز دارد. اگر جاوا اسکریپت ارسال شده به مرورگر را بهینه نکنید، کاربر ممکن است تا زمانی که جاوا اسکریپت دانلود و اجرا نشود، هیچ محتوایی را در صفحه ببیند یا نتواند با آن تعامل داشته باشد. به طور خلاصه میتوان گفت که با ارزیابی دقیق و پیادهسازی این روشها میتوانید میزان First Contentful Paint را بهینه، سرعت سایت را افزایش داده و تجربه کاربری را بهبود بخشید. همانطور که پیشتر گفتیم؛ صفحات وب مملو از کدهای CSS، HTML و JavaScript حجیم و سنگین هستند.
این خطا مربوط به عدم بارگیری یا وجود یک فایل است که باعث تاخیر در رندر میشود. در یکی از مقالات پیشین لیمومگ با عنوان «برطرف کردن خطا ۴۰۴ در وردپرس» به طور کامل این فاکتور را بررسی کردهایم. بهتر است به طور مرتب سایتتان را برای خطاها پس از اتصال سایت به سرچ کنسول بخش coverage را بررسی کنید تا هیچ خطایی از چشمتان پنهان نماند. اما مشکل از جایی شروع میشود که این بارگذاری تنبل باعث افزایش زمان FCP میشود. چطور؟ چون وقتی این ویژگی فعال باشد، شامل لوگو هم میشود و بارگذاری آن را به تاخیر میاندازد.
همچنین نتایج برای نمایش در دسکتاپ و نمایش در گوشی موبایل در دسترس است. بنابراین نتیجه ای که می توان گرفت این است که قابلیت Lazy Loading باید بر روی تصاویری که در بالای صفحه ی یک وبسایت مانند لوگو قرار دارند غیر فعال شود. برخی اوقات این دو اصطلاح به جای یکدیگر استفاده شوند، اما از نظر فنی دو معیار متفاوت هستند. همانطور که توضیحات را دادیم ، First Contentful Paint زمانی است که مرورگر اولین عنصر DOM را در صفحه نمایش می دهد. و شما می توانید این را به عنوان هر محتوای قابل استفاده (اگر نه تعاملی) در صفحه در نظر بگیرید.. برای بهینه سازی فاکتور FCP می توانید ابتدا با داده های Lighthouse که شامل بخش های Opportunities و Diagnostics می شوند، شروع کنید.
فعال بودن قابلیت Lazy Loading بدان معناست که تگهای بارگذاری با تأخیر به همۀ تصاویر موجود در صفحه اختصاص داده میشود، از جمله تصاویر بالای وبسایت که سریعاً به کاربر نمایش داده میشود. اگر تجربه استفاده از جاوا اسکریپت را دارید، این گزینه می تواند برای شما مناسب باشد. برای این کار می توانید از داده های Paint Timing API استفاده نمایید. نکته مهم این است که ابزارهای کاربردی گوگل براساس تجربه کاربر در کروم جمع آوری شده است که برای رتبه دادن به سایت ها مورد استفاده قرار می گیرد. با آنالیز وب سایت خود بر اساس داده های این ابزارها میی توانید بررسی کنید که وب سایت شما در چه وضعیتی قرار دارد.
با فعالسازی این قابلیت میتوانید لود محتواهای غیرضروری یا محتواهایی که هنوز برای کاربر نمایش داده نشده را به تعویق بیندازید تا المانهای مهم در مدتزمان کمتری لود شوند. هنگامی که مرورگر شروع به لود یک صفحه میکند؛ ابتدا کدهای HTML، فایلهای CSS و کدهای جاوا اسکریپت خط به خط از بالای صفحه اجرا میشوند. یعنی مرورگر پیش از لود هر نوع عنصر محتوایی دیگر ابتدا باید این منابع را اجرا کند. اما از آنجا که حجم این منابع بالاست؛ معمولا اجرای آنها طول میکشد و میزان سرعت و FCP سایت را کاهش میدهد. منظور از نرخ تبدیل یا همان بونس ریت، تبدیل بازدیدکنندگان به کاربران و مشتریان دائمی است.
آمار برای این کار از طریق Chrome User Experience Report یا CrUX از کاربران واقعی جمع آوری می شود . BreadCrumb یک راهکار کاربردی برای راهنمایی کاربران به جهت درک ساختار سایت است که در سئو هم تاثیرگذار خواهد بود. اما برای بهینهسازی بیشتر میتوانید تنظیمات preload یا پیشبارگذاری را نیز تغییر بدهید. هنگامی که مرورگر صفحه «HTML» را از سرور شما دریافت میکند، درخت «DOM» را تجزیهوتحلیل میکند. اگر هر استایلشیت یا فایل « JS » در«DOM» وجود داشته باشد، مرورگر باید قبل از تجزیه درخت «DOM» باقیمانده را متوقف کند.
هرچه زودتر مرورگر شروع به درخواست لینک های اعلام شده Preload شده کند ، صفحات سریعتر بارگیری می شوند. تمام Resource Hints برای فعال شدن از ویژگی rel تگ استفاده می کنند. Document Object Model یا DOM نمایانگر تمام اشیایی است که یک صفحه وب را تشکیل می دهند. از نظر گرافیکی ، آن را به عنوان درختی با شاخه هایی از گره ها و اشیاء نشان می دهند. اگر تصاویر یا نمادهایی در درون قالب یا افزونه های شما بصورت کدنویسی قرار دارند ، باید آنها را به صورت دستی پیدا کنید و آدرس های منبع آنها را با حالت Inline کردن تصاویر جایگزین کنید.
به عنوان مثال، میتوانید زمان دریافت html توسط مرورگرها یا بارگیری کل صفحه را اندازه گیری کنید اما این مورد همیشه تأثیر خوبی ایجاد نمیکند. از آن جایی که حتی یک میلیثانیه هم در کسب و کارتان تغییر ایجاد میکند، باید تمام تلاش خود را به کار گیرید تا بتوانید سرعت سایتتان را بهبود ببخشید. اما چطور میتوان بهینه سازی FCP را انجام داد؟ ما در این مقاله به شما آموزش میدهیم که چگونه سایتتان را به بهترین شکل ممکن سریع و کاربر پسند کنید. FCP یک معیار مهم و کاربر محور برای اندازهگیری عملکرد درک شده است، زیرا نقطهای را مشخص میکند که بازدیدکنندگان میتوانند ابتدا هر محتوای مصرفی را روی صفحه ببینند. یک FCP سریع به کاربر اطمینان میدهد که در حین بارگذاری صفحه شما اتفاقی در حال رخ دادن است.
پس تفاوت اصلی بین FP و FCP در این است که FP زمانی را نشان میدهد که مرورگر شروع به رندرینگ صفحه میکند؛ اما شاخص FCP زمانی را نشان میدهد که یک محتوای قابلمشاهده به کاربر ارائه شود. FCP یکی از معیارهایی است که باید برای بهبود سرعت و افزایش تجربه کاربری آن را انجام دهید. این مهم 15 درصد از نمره کل وبسایت را به خود اختصاص داده است امامعیارهای دیگری وجود دارند که تأثیر بیشتری را روی کاربران میگذارند. عملکرد وب راهی برای فراخوانی همۀ عناصر و معیارهایی است که باید برای بهبود ساختار وبسایت خود، آن را دنبال کنید. از راهکارهای بالا برای کاهش FCP استفاده کنید تا بتوانید کاربران کم حوصله امروزی را سَر حال بیاورید.
بارگذاری با تأخیر (Lazy Loading) یک تکنیک بهینه سازی سرعت است که بارگذاری برخی از تصاویر را به تعویق میندازد تا زمانی که کاربر به نقطهای از صفحه که در آن تصاویر ظاهر میشوند، حرکت کند. این بدان معناست که تگهای بارگذاری با تأخیر به همۀ تصاویر موجود در صفحه اختصاص داده میشود، از جمله تصاویر بالای وبسایت که سریعاً به کاربر نمایش داده میشود. First Contentful Paint یا FCP مدت زمانی را بررسی می کند که اولین بخش محتوایی یا ساختار سایت برای کاربر به نمایش در می آید. در این مقاله توضیح دادیم که فاکتور FCP چیست و چه اهمیتی در سئو سایت دارد. اگر فکر می کنید راه های دیگری برای بهبود فاکتور FCP وجود دارد، با ما در بخش نظرات در میان بگذارید تا خواننده های دیگر این مقاله از آن استفاده کنند.
اصل اساسی کاهش « LCP » در تمام تکنیکهای ذکر شده ذیل، کاهش دادههای دانلود شده در دستگاه کاربر و کاهش زمان ارسال و اجرای آن محتوا است. همچنین میتوانید فونتهای اضافی را حذف و از یک فونت با وزنهای مختلف استفاده کنید. در این صورت، میتوانید میزان First Contentful Paint را با موفقیت بهینه کنید. برخی از Resource Hints روی منابع موجود در صفحه فعلی اعمال می شود ، در حالی که برخی دیگر روی صفحات بعدی ممکن اعمال شود. تمام Resource Hints برای فعال شدن از ویژگی rel تگ استفاده می کنند.
بارگذاری محتوای متنی را که کاربران میتوانند در حین اسکرول کردن بقیه صفحه بخوانند، اولویتبندی کنید. به بیان سادهتر، لازم نیت کل محتوا صفحه، در همان ابتدا ورود کاربر به نمایش درآید. ابزارهای فیلد، ابزارهایی هستند که میتوانید از آنها برای پیگیری نحوه نمایش صفحه برای کاربران خود استفاده کنید. کاربران واقعی این ابزارها به APIها و فرضیات مربوط به سایت شما متکی نیستند؛ بلکه آنها مستقیماً در زمان حال بر روی سرور شما اجرا میشوند تا دقیقترین و بهروزترین اطلاعات ممکن را دریافت کنید. فاکتورهای مؤثر بر کاهش سرعت، موارد سادهای نیستند و برای بهبود FCP نیاز به سطح تخصص بالا و مشاوره دیجیتال مارکتینگ در حوزه سئو، برنامهنویسی و حتی UX است. در ادامه قصد داریم راجعبه مفهوم First Contentful Paint شفافسازی کنیم و نگاهی دقیق به نحوه بررسی و بهبود FCP بیندازیم.
اگر CSS را برای بارگذاری به طور غیر همزمان تنظیم کرده باشید ، مرورگر قبل از بارگیری استایل های موردنیاز ، محتوای سبک دهی نشده را به کاربران نشان می دهد. این رفتار با عنوان Flash of Unstyled Content یا FOUC شناخته شده است و یک تجربه ناخوشایند برای کاربران است. اولین رنگ محتوا یک معیار عملکرد است که نشان میدهد بازدیدکنندگان با چه سرعتی میتوانند محتوای واقعی (متن، تصاویر، ویدیو و غیره) را در صفحه شما مشاهده کنند. اولین قدم داشتن یک میزبان خوب DNS است و ما از Cloudflare استفاده میکنیم زیرا معمولاً سریعترین میزبان DNS در جهان است. کاش میتونستیم یک کد جادویی توی این مقاله میزفا به شما بدیم و اون رو در هاست قرار میدادید و سرعت سایتتون زیر ۰.۹ ثانیه میشد ولی خب به راحتی نمیشه و این جور کدها مثل قدیم دیگه نداریم.
همچنین ، اگر از سرویس هایی مانند Cloudflare استفاده می کنید ، می توانید آن را برای ذخیره منابع HTML پیکربندی کنید . فعال کردن این ویژگی اگر و فقط اگر بیشتر محتوای سایت شما استاتیک باشد توصیه می شود. اگر بتوانید اندازه صفحه را زیر 100 KB نگه دارید ، استفاده از Inline کردن تصاویر زیاد جای نگرانی ندارد. بیشتر از آن ممکن است TTFB شما را تحت تأثیر قرار دهد ، و در نتیجه بجای بهبود First Contentful Paint ، به آن آسیب برساند. جالب اینجاست که این رتبه بندی فقط براساس یک تست سرعت انجام نمی شود بلکه نشان دهنده سرعت واقعی سایت شما برای کاربران در سراسر جهان است. آمار برای این کار از طریق Chrome User Experience Report یا CrUX از کاربران واقعی جمع آوری می شود .
امیدواریم با مطالعه این بخش از جت سئو هم اطلاعات مفیدی راجعبه نحوه بهینهسازی وبسایت خود بهدست آورده باشید و به پاسخ سؤالات خود برسید. لطفاً شما عزیزان هم تجربیات و پیشنهادهای خود را دراینخصوص با ما و سایر کاربران به اشتراک بگذارید تا دراسرعوقت به آن پاسخ دهیم. عناصر پیچیده و بیش از حد موجود در لندینگ پیجها یا صفحات اصلی وبسایت برای تحتتأثیر قرار دادن بازدیدکنندگان، موجب سنگین شدن DOM میشود و همین امر زمان FCP را افزایش میدهد. شما میتوانید با کاهش تعداد سلکتورهای CSS که استفاده میکنید به این امر کمک کنید. همراه با آن، میتوانید تعداد عناصری را که سلکتورها روی آنها اعمال میکنند، کاهش دهید.
اما First Paint (fp) زمانی است که مرورگر اولین بایتهای اطلاعات را ارائه میکند، خواه محتوا باشد یا نباشد. با این وجود، متریک First Contentful Paint همچنان نقش مهمی را به عنوان معیار Lighthouse (و تجربه کاربر) ایفا می کند. جالب است بدانید که برای تعیین امتیاز فاکتور FCP سایت شما، گوگل نتایج وب سایت شما را با داده های وب سایت های واقعی در HTTP Archive مقایسه می کند. این بخش که به اختصار به (CrUX) هم معروف است، به شما نشان می دهد که کاربران واقعی وب در کروم چه تجربه هایی دارند. چندین راه برای استفاده از این ابزار وجود دارد که آنها را معرفی خواهیم کرد. همچنین شما در این ابزار مانند Lighthouse می توانید ببینید که برای کاربران موبایل و دسکتاپ چه داده هایی مورد انالیز قرار می گیرند.
اگر نیاز به افزایش سرعت سایت خود دارد، می توانید آنرا به یک تیم حرفه ای بسپارید. بیشتر پلاگین های بارگیری تنبل محبوب در حال حاضر شامل این ویژگی هستند. روش بعدی برای افزایش سرعت وردپرس این است که منابع Render-Blocking را از بین برد. اولین قدم برای رسیدن به بهبود FCP و بالا بردن سرعت سایت وردپرس ، بهبود TTFB است. زمان پاسخگویی سرور یا Time to First Byte یا TTFB مدت زمانی است که اولین بایت محتوای صفحه توسط مرورگر دریافت می شود. اولین قدم برای بهینه سازی FCP و کم کردن مقدار آن برای هر سایتی، تهیه لیستی از ارزیابیهای آزمایشگاهی و عملی است که نمونهای از آن را در این مقاله دیدیم.
FCP کند نشان می دهد که هیچ کاری انجام نمی شود و بنابراین جریان کار با کندی مواجه است. ابزارهای مختلفی برای این کار وجود دارد؛ اما آیا میدانید بهترین ابزار برای اندازهگیری FCP چیست؟ page speed insight یکی از ابزارهای رایگان و قدرتمند برای اندازهگیری FCP است. کارکردن با این ابزار ساده است که در ادامه به شما آموزش خواهیم داد. این امر TTFB را به طور چشمگیری کاهش میدهد زیرا صفحات از پیش ساخته شدهاند. بدون کَشینگ صفحه در هر بازدید، میزبانی وب باید جستجوهای پایگاه داده و پردازش PHP را از ابتدا انجام دهد که معمولاً برای 1 تا 3 ثانیه و حتی بیشتر طول میکشد. FCP بستگی زیادی به زمان TTFB دارد زیرا TTFB حرف اول را در کاهش این مهم میزند.
با ارزیابی این معیار به صورت آزمایشگاهی و در محیطی شبیهسازی شده، میتوانید قبل از انتشار سایت و بروز هرگونه خطای عملی، ارورها را برطرف کنید. منظور از نرخ پرش (Bounce Rate) تعداد بازدیدکنندگانی است که پس از بازدید یک صفحه و بدون انجام هیچ اقدامی آن را ترک میکنند. بدون تردید هرچه میزان نرخ پرش بیشتر باشد؛ به همان میزان نیز احتمال از دست دادن مشتریان بالقوه افزایش مییابد. این معیار 10٪ از کل امتیاز عملکرد سرعت وب سایت را به خود اختصاص می دهد. Google چند وقتی است رتبه بندی سایت ها را بر اساس امتیاز First Contentful Paint آغاز کرده است. این به مرورگر می گوید که استایل ها را بصورت غیر همزمان بارگیری کند در حالی که مرورگر بارگیری سایر عناصر صفحه را بدون وقفه ادامه می دهد.
خرید دوره آموزش سئو کلاه خاکستری