LCP چیست و چطور بهبود دهیم؟

یکی از مشکلاتی که سایت‌های مختلف با آن روبرو هستند، مشکل عدم بارگذاری کامل محتوا با وجود گذشت زمان زیاد است. دلایل زیادی برای آن وجود دارد اما مهم‌ترین دلیل آن در صورتی که از هاست و سرور مناسب استفاده می‌کنید، این است که محتوای صفحه حجم زیادی دارد و منابع بارگذاری نظیر سرعت اینترنت یا هاست نمی‌تواند آن را به خوبی در اختیار کاربر قرار دهد. این مسئله باعث می‌شود تا کاربر زمان زیادی منتظر بماند و همین مسئله منجر به ترک سایت توسط کاربران می‌شود. یکی از مفاهیم مهمی که هنگام آنالیز سایت با جی تی متریکس وجود دارد، LCP است. قصد داریم در این مقاله به بررسی مفصل این خطا بپردازیم و ببینیم که چه راهی برای رفع آن وجود دارد! اگر مایل هستید، در ادامه این مقاله همراه ما باشید تا تجربه کاربری سایت خود را بهینه‌سازی کنید.

LCP  و اهمیت آن برای سایت‌ها

اجازه دهید این بخش را با یک سوال مهم پاسخ دهیم! به نظر شما دلیل ورود کاربران به سایت چیست؟ ساده‌ترین پاسخ برای این مسئله رفع نیازی است که کاربر دارد. مهم‌ترین نیازی که کاربر به سایت شما دارد، محتوای آن است تا بتواند به آن دسترسی داشته باشد. در واقع کاربران برای ورود به سایت هدف خاص خود را دارند و این مسئله زمانی اتفاق می افتد که کاربران به محتوای آن صفحه نیاز داشته باشند. حال اگر کاربر به محتوای صفحه نیاز داشته باشد اما آن صفحه در مدت زمان بسیار طولانی بارگذاری شود، کاربر سایت را بسته و به سراغ سایت دیگر می رود. این مسئله نه تنها باعث از دست رفتن کاربران و مشتریان می شود، بلکه باعث می‌شود تا رضایت کاربر جلب نشود. دلیل این مسئله هم تجربه کاربری نامناسب است که در نهایت کاربر از سایت خارج می‌شود.

• آموزش افزایش سرعت بارگذاری سایت با ابزار GTmetrix – بخش اول

مدت زمانی که طول می‌کشد تا یک صفحه بارگذاری شود، بسیار مهم است. المان‌های سایت برخی در همان زمان ابتدایی بارگذاری می‌شوند اما برخی کمی طول می‌کشد. FCP مفهومی است که نشان می‌دهد اولین المان سایت چقدر طول می‌کشد تا بارگذاری شود. در حالی که این مفهوم نشان نمی‌دهد که برای بارگذاری فایل‌های حجیم که معمولاً مهم‌ترین محتوای هر صفحه هستند، چقدر زمان لازم است. همین مسئله باعث شده است تا مفهوم LCP اهمیت بسیار زیادی پیدا کند! مفهوم LCP که مخفف کلمه Largest Contentful Paint است، نشان‌دهنده این موضوع است که فایلی که بیشترین حجم در صفحه را دارد چقدر زمان می برد تا صفحه شما به صورت کامل لود شود.

اگر سایت خود را به صورت کامل به کمک جی تی متریکس آنالیز کنید، متوجه می‌شوید که این پارامتر اهمیت بسیار زیادی دارد! این معیار بر اساس ثانیه است و طبیعتاً مدت زمانی است که طول می‌کشد تا محتوای حجیم صفحه شما نمایش داده شود. بنابراین هر چقدر این مدت زمان کمتر باشد، آن محتوا بهینه‌تر است و هر چقدر زمان بیشتر طول بکشد، از حالت بهینه بودن خارج می‌شود. اگر بخواهید LCP بهینه داشته باشید، باید حتماً تجربه کاربری کمتر از 1.2 ثانیه باشد که البته گاهی اوقات دست پیدا کردن به چنین عددی غیر ممکن است. در نهایت، با بهینه‌سازی این پارامتر می‌توانید تجربه کاربری سایت خود را بهینه‌سازی کنید.

چرا عدد LCP پایین نیست؟

اگر با این مفهوم به خوبی آشنا شده‌اید شاید این سوال برایتان پیش بیاید که مهم‌ترین دلایل بهینه نبودن این پارامتر چیست! 4 دلیل بسیار مهم برای آن وجود ددارد که در این قسمت از مقاله می‌خواهیم آن را به صورت کامل و مفید بررسی کنیم:

• سرعت پایین پاسخ سرور

هر سایتی دارای محتوایی است و این محتوا روی سرور ،میزبانی می‌شود! اگر سرور شما کیفیت خوبی نداشته باشد، سرور دیر پاسخ می‌دهد و این مسئله می‌تواند باعث کاهش سرعت بارگذاری سایت شود. این در حالی است که گاهی اوقات کاربران فکر می کنند چون هاست اشتراکی خریداری کرده اند، هاستینگ از سرور با کیفیت استفاده می کند اما گاهی اوقات این طور نیست و هاستینگ هم سرور معمولی تهیه کرده و سایت شما را روی آن میزبانی می کند. اگر سرور میزبانی شما یک سرور قدرتمند و حرفه‌ای باشد، در مدت زمان بسیار کوتاهی محتوا برای کاربران بارگذاری می‌شود. هر چقدر سرور شما ضعیف‌تر باشد، زمان بیشتری برای بارگذاری محتوای سایت نیاز است.

البته این مسئله می‌تواند دلایل زیادی داشته باشد که از مهم‌ترین آن‌ها می‌توان به دور بودن لوکیشن سرور باعث کند شدن پاسخ سرور اشاره کرد. پس اگر سرعت پاسخ دادن سرور کند باشد، ممکن است باعث بهینه نبودن LCP شود که روی امتیاز کلی جی تی متریکس بسیار تاثیرگذار است. راه‌کارهای مختلفی برای این موضوع وجود دارد که مهم‌ترین آن‌ها بهینه‌سازی سرور، استفاده از CDN نزدیک به کاربران، کش کردن عناصر سایت و… است که به بررسی کامل آن‌ها خواهیم پرداخت.

• جاوا اسکریپت و CSS بلاک کننده رندر (Render-blocking)

بلاک شدن رندر مربوط به کدهای سایت از دیگر مواردی است که باعث کاهش بهینه بودن LCP می شود! گاهی اوقات فایل های جاوا اسکریپت و CSS به نحوی هستند که توسط مرورگر یا سرور بلاک می‌شوند و این مسئله زمان بارگذاری فایل های سنگین را تا حد زیادی افزایش می دهد. معمولاً فایل‌های سی‌اس‌اس و جاوا اسکریپت با این مشکل مواجه می‌شوند و بهتر است با بهینه‌سازی کدهای خود از بروز چنین مشکلی جلوگیری کنید. در هر سایت جاوا اسکریپت و CSS به دو بخش تقسیم بندی می شوند که دسته اول ضروری و دسته دوم غیر ضروری هستند. شما باید بارگذاری هر نوع جاوا اسکریپت و CSS را به تاخیر بیندازید.

• چگونه منابع خارج از سرور را بدون افت سرعت بارگذاری کنیم؟

• سرعت پایین لود شدن منابع

در سایت‌های مختلف فایل‌هایی هستند که روی یک سرور دیگر وجود دارند از طریق آن‌ها شروع به بارگذاری می‌کنند. در برخی مواقع، دسترسی کاربران به چنین فایل‌هایی ساده نیست و ممکن است با سرعت بسیار پایینی در دسترس آن‌ها قرار بگیرد. به همین دلیل است که بهتر است اگر از فایل‌هایی که روی سرور دیگری وجود دارند استفاده می‌کنید، حتماً آن‌ها را بررسی کنید و در صورت امکان، آن را بر روی سرور خود میزبانی کنید. البته گاهی اوقات مشکل از منابع نیست و نیاز به بهینه‌سازی یا کاهش حجم فایل دارید! شما باید دلیل آن را پیدا کنید و ببینید چه راه‌کاری برای رفع آن وجود دارد.

• رندر در سمت کلاینت

دلایل دیگری هم برای بهینه نبودن CLS وجود دارد و این مسائل باعث می‌شود تا این پارامتر از حالت استاندارد خود خارج شود. دلیل مهم دیگر، این است که همه چیز را در بخش کاربران فراخوانی می کنید! در واقع هنگامی که شما تمام فایل‌های ضروری و غیرضروری خود را می‌خواهید در بخش کلاینت رندر بگیرید، باید توجه داشته باشید تا تا حد ممکن فایل‌های جاوا اسکریپت غیرضروری را کاهش دهید! زیرا زیاد بودن فایل‌های غیر ضروری آن باعث می‌شود تا زمان بارگذاری صفحه زیاد شود و این مسئله باعث دیر بارگذاری شدن فایل حجیم صفحه می‌شود. اگر در سایت خود این مشکل را دارد، می‌توانید فایل‌های غیرضروری جاوا اسکریپت خود را در بخش سبک‌تری از سایت خود بارگذاری کنید. این مسئله به افزایش سرعت بارگذاری سایت شما کمک زیادی می‌کند.

این 4 مورد از مهم‌ترین دلایلی هستند که باعث می‌شود LCP از حالت بهینه خود خارج شود و سایت بهینه‌ای برای خود نداشته باشید. در بخش بعدی می‌خواهیم به بررسی راه‌های بهبود LCP بپردازیم تا بتوانید یک سایت بهینه و حرفه‌ای داشته باشید.

• اهمیت بکاپ گیری از اطلاعات سرور و روش های آن

راه‌های بهبود LCP چیست؟

اکنون که با مفهوم این پارامتر آشنا شدید، زمان آن می‌رسد که با راه‌های LCP آشنا شوید. در این قسمت مقاله می‌خواهیم راه‌های بهبود LCP را بررسی کنیم. این بخش به بررسی 10 روش عالی و حرفه‌ای برای بهبود LCP می‌پردازیم که می‌توانید متناسب با مشکل سایت خود، یک یا چند مورد از آن‌ها را برای بهینه‌سازی سایت خود استفاده کنید. راه های عالی برای رفع این مشکل عبارتند از:

1. بهینه‌سازی و بهبود سرعت پردازش سرور

اگر سرعت پردازش و منابع سرور شما بهینه نباشد، این مسئله باعث می‌شود تا LCP از حالت بهینه و ایده‌آل خود خارج شود. برای رفع این مشکل شما باید به بهینه‌سازی سرور خود بپردازید تا محتوای سایت شما سریع‌تر توسط مرورگر کاربر فراخوانی شود. حتی گاهی اوقات ممکن است نیاز به تغییر سرور داشته باشید تا بتوانید بهترین نتیجه را بگیرید. پیش از این که دست به چنین کاری بزنید، ابتدا مطمئن شوید که مشکل از سمت سرور است و نمی‌توانید آن را بهینه‌سازی کنید! اگر شما توانایی بهینه سازی سرور را ندارید و مطمئن هستید که مشکل سرعت پردازش از سرور است، از یک سرور قوی و بهینه‌تر استفاده کنید تا نتیجه بهتری بگیرید.

1. استفاده از CDN نزدیک به کاربر

یکی دیگر از مشکلاتی که باعث بروز این خطا می‌شود، این است که کاربر از لوکیشن سرور دور است و فراخوانی اطلاعات به زمان زیادی نیاز دارد. در این صورت بهتر است از سرور نزدیک کاربران استفاده کنید. به عنوان مثال اگر سرور شما آمریکا باشد، قطعاً مدت زمان بیشتری را نسبت به سروری که در ایران قرار دارد طول می‌کشد تا اطلاعات فراخوانی شود. به همین دلیل است که LCP طولانی می‌شود و تجربه کاربری سایت شما را به خطر می‌اندازد. در چنین شرایطی بهتر است از CDN نزدیک به کاربر استفاده کنید تا به جای فراخوانی اطلاعات از سرور اصلی، از سرور CDN بارگذاری شود سرعت بارگذاری بیشتر شود و تا فراخوانی اطلاعات در مدت زمان کوتاه‌تری انجام شود.

2. کش کردن عناصر وب‌سایت

گاهی اوقات صفحات حجم زیادی دارند اما محتوای آن ثابت است که امکان استفاده از کش وجود دارد! در واقع برای آن که کاربر هر بار نخواهد محتوای تکراری یک صفحه را بارگذاری کند، قابلیت بسیار خوبی به نام Cache یا حافظه پنهان وجود دارد. با استفاده از این قابلیت کاربر بخشی از اطلاعات تکراری صفحه را در حافظه مرورگر خود ذخیره می‌کند تا هنگام باز شدن سایت، دیگر اطلاعات از سرور بارگذاری نشود و مستقیم از طریق مرورگر بارگذاری شود. با کمک این راه کار می توانید سرعت بارگذاری سایت و LCP آن را بهینه سازی کنید. این کار به افزایش امتیاز جی تی متریکس سایت شما کمک بسیار زیادی خواهد کرد.

3. استفاده از حافظه کش برای کدهای HTML سایت

بخش کدنویسی سایت اهمیت زیادی دارد و اگر این بخش بهینه نباشد یا از قابلیت کش استفاده نکنید، ممکن است زمان زیادی طول بکشد تا سایت بارگذاری شود. این در حالی است که کدها در سایت معمولاً تغییر نمی‌کنند و بارگذاری هر بار آن‌ها از سرور تنها باعث طولانی شدن زمان لود سایت می‌شود. بنابراین اگر کدهای سایت شما تغییر نمی‌کند، بهتر است آن‌ها را هم مانند فایل‌های دیگر خود کش کنید تا با مشکل مواجه نشوید. حتی گاهی اوقات فشرده‌سازی این کدها هم می‌تواند مفید باشد اما باید حواستان باشد که چنین کاری باعث اختلال در عملکرد سایت نشود و در نهایت محتوای سایت به صورت کامل بارگذاری شود.

4. استفاده از تگ اتصال ثالث در مراحل اول

اتصالات سایت هم در سرعت بارگذاری سایت و LCP تاثیر بسیار زیادی دارند! گاهی اوقات با کمک کدنویسی می‌توانید به ایجاد یک اتصال زودتر کمک کنید؛ به عنوان مثال با استفاده از تگ “rel=”preconnect به راحتی می‌توانید اتصال زودتر ایجاد کنید. برای استفاده از این تگ می‌توانید از کد زیر استفاده کنید:

</ "link rel="preconnect" href="https://example.com>

همچنین شما می‌توانید جستجوهای مربوط به dns را سریع‌تر انجام دهید که این کار با قابلیت dns-prefetch انجام می‌شود و کد آن به صورت زیر خواهد بود:

</ "link rel="dns-prefetch" href="https://example.com>

این کدها به شما کمک می‌کند تا LCP بهینه‌تری داشته باشید.

5. به تاخیر انداختن JavaScript و CSS غیرضروری

در بخش بالا هم گفتیم که یکی از مسائلی که باعث می‌شود تا سرعت بارگذاری سایت شما کمتر شود، این است که فایل‌های غیرضروری همراه با فایل‌های ضروری در حال فراخوانی هستند. به خصوص در کدهای JavaScript و CSS این مسئله بسیار دیده می‌شود و باید حتماً دقت کنید که این مشکل را رفع کنید. برای این کار بهتر است فایل‌های JavaScript و CSS به دو دسته ضروری و غیرضروری دسته‌بندی کنید! سپس دسته ضروری را بارگذاری کنید و پس از آن دسته غیرضروری را بارگذاری کنید. این کار باعث می‌شود تا سرعت بارگذاری سایت شما تا حد زیادی افزایش پیدا کند و بتوانید بهترین نتیجه برای بهینه‌سازی LCP را بگیرید.

• رفع خطاهای GTmetrix برای افزایش سرعت بارگذاری – بخش اول

6. فشرده‌سازی کدهای CSS

کدهای سی اس اس یکی از کدهایی هستند که فشرده‌سازی آن اختلالی در عملکرد سایت ایجاد نمی‌کند اما در بهینه‌سازی سایت بسیار موثر است! در حقیقت این کار می تواند به بهینه سازی LCP کمک زیادی کند. گاهی اوقات کدهای سی‌اس‌اس باعث می‌شوند تا زمان بارگذاری سایت تا حد زیادی افزایش پیدا کند. بهینه‌سازی کدهای سی‌اس‌اس حتی با ابزارهای آنلاین یا پلاگین‌های مربوط به سیستم‌های سایت‌ساز امکان‌پذیر است. بنابراین اگر راه‌های قبلی را امتحان کردید اما نتوانستید نتیجه خوبی بگیرید، بهتر است فشرده‌سازی کدهای CSS را هم امتحان کنید تا LCP سایت بهینه‌سازی شود و بتوانید عملکرد بهتری از سایت در اختیار کاربران قرار دهید.

در تصویر بالا مشاهده می‌کنید که با فشرده‌سازی فایل‌های CSS چقدر زمان بارگذاری LCP کاهش پیدا کرده است! حال فرض کنید یک سایت حجیم دارید که در آن از فایل‌های متعدد سی‌اس‌اس استفاده شده است. در این صورت فشرده‌سازی آن می‌تواند کمک زیادی به بهبود LCP کند.

7. استفاده از قابلیت inline برای کدهای CSS

اگر فایل‌های CSS خود را تا حد امکان فشرده‌سازی کردید اما هنوز هم LCP راضی‌کننده ندارید، راه حل دیگری برای کدهای CSS شما وجود دارد. برای این کار شما می‌توانید اقدام به این‌لاین کردن کدهای سی‌اس‌اس خود کنید. این مسئله به شما کمک می‌کند تا زمان بارگذاری فایل‌های سی‌اس‌اس کاهش پیدا کند و به راحتی بتوانید به افزایش سرعت بارگذاری سایت خود و همچنین بهینه‌سازی LCP کمک کنید. البته توجه داشته باشید که تنها کدهای CSS ضروری را این‌لاین کنید! زیرا این‌لاین کردن بیش از حد کدها خودش به تنهایی می‌تواند سرعت بارگذاری سایت راه کاهش دهد.

8. کاهش سرعت بارگذاری منابع

در هر صفحه از سایت محتوایی وجود دارد که کمتر استفاده می شود و بارگذاری سریع آن مهم نیست! مانند محتوای تبلیغاتی که برای بسیاری از کاربران اهمیت ندارد و سرعت بارگذاری آن هم چندان مهم نیست. در چنین شرایطی بهتر است سرعت بارگذاری منابع دیگر را کاهش دهید تا منابع ضروری شما با سرعت بیشتری بارگذاری شوند! به عنوان مثال گاهی اوقات در یک صفحه ویدیو وجود دارد و بارگذاری آن بهتر است پس از سایر عناصر صفحه باشد. این مسئله تاثیر بسیار زیادی در LCP شما دارد و به راحتی می‌توانید با این کار زمان بارگذاری حجیم‌ترین فایل را کاهش دهید که در نهایت منجر به بهینه‌سازی LCP می‌شود.

سرعت سایت چه اهمیتی برای کسب و کارها دارد؟ – بخش اول

9. بهینه‌سازی و فشرده کردن تصاویر

تصاویر سایت شما باید تا جایی باشد که به نمایش درست و کیفیت آن لطمه‌ای وارد نکند! این مسئله به بهینه‌سازی LCP کمک زیادی می‌کند و می‌تواند باعث رشد سایت شما شود. در واقع فشرده‌سازی تصاویر به شما کمک می‌کند تا بتوانید سرعت بارگذاری یک صفحه را افزایش دهید و بتوانید به بهینه‌سازی LCP کمک کنید! دلیل آن هم این است که عکس‌ها تعداد زیادی دارند و معمولاً بیشترین زمان برای بارگذاری آن‌ها نیاز است. حال هر چقدر حجم آن‌ها کمتر باشد، سریع‌تر بارگذاری می‌شوند و می‌توانید به بهینه‌سازی LCP سایت خود بپردازید. برای این کار علاوه بر بهینه‌سازی تصاویر سایت، می‌توانید تصاویر نامربوط را حذف کنید یا از فرمت‌های جدید نظیر WebP که با توجه به حجم بسیار کم، باعث بهینه‌سازی حجم سایت شما خواهد شد.

10. پیش بارگذاری منابع مهم

پیش بارگذاری منابع مهم سایت یکی دیگر از راه های بهینه سازی LCP است که روی سرعت بارگذاری سایت هم تاثیر بسیار زیادی دارد! فرضاً شما می‌توانید فایل‌های خود را که فایل CSS وجود دارند را از قبل بارگذاری کنید. در قابلیت‌های کدنویسی استفاده از تگ <link rel=”preload”> به شما کمک می‌کند تا بتونید این کار را انجام دهید. پیشنهاد می‌کنیم برای کدهای ضروری سایت خود نظیر CSS یا JavaScript حتماً این کار را انجام دهید تا سرعت بارگذاری سایت بهینه شده و افزایش پیدا کند.

نتیجه‌گیری

ال سی پی یکی از خطاهایی است که هنگام بررسی سایت در جی تی متریکس ممکن است با آن روبرو شوید و روی امتیاز کلی سایت تاثیر بسیار زیادی دارد. این مفهوم در واقع سنگین‌ترین فایلی است که در سایت شما وجود دارد است و اگر بهینه نباشد، زمان بارگذاری سایت را تا حد زیادی افزایش می دهد. در این مقاله سعی کردیم به بررسی کامل این مفهوم بپردازیم که امیدواریم مفید واقع شده باشد. اگر سوالی دارید، برای راهنمایی از طریق بخش نظرات مطرح کنید تا پاسخ دهیم.