کندی سایت و بارگذاری صفحات یکی از اصلی‌ترین دلایل افزایش نرخ پرش و کاهش نرخ تبدیل است. گوگل نیز با معرفی FCP و معیارهای Core Web Vitals شامل LCP،INP،CLS، سرعت را به یکی از فاکتورهای کلیدی رتبه‌بندی تبدیل کرده است. اما خبر خوب این است که برای بهبود این شاخص‌ها و افزایش سرعت سایت، نیازی به دانش کدنویسی ندارید و با چند تکنیک ساده و کاربردی می‌توانید تجربه کاربری مخاطبتان را به طرز چشمگیری افزایش دهید.
در این جلسه از دوره آموزشی مجموعه سئوماتیک، راهکارهای عملی بهینه‌سازی سرعت سایت را، که بدون نیاز به تخصص فنی قابل اجرا هستند، باهم بررسی می‌کنیم. از تمام تکنیک‌های موردنیاز برای افزایش سرعت و بهبود Core Web Vitals گرفته تا شناسایی کدهای بدون استفاده با ابزار Coverage، بهینه‌سازی تصاویر و استفاده از CDN، را قدم‌به‌قدم آموزش خواهیم داد.
اهمیت سرعت سایت و آشنایی با Core Web Vitals
وقتی صحبت از بهینه‌سازی سرعت سایت به میان می‌آید، اولین قدم این است که بدانیم سرعت چه تأثیری بر عملکرد سایت دارد و گوگل با چه معیارهایی آن را می‌سنجد. سرعت بارگذاری صفحات، مستقیماً روی تجربه کاربری تأثیر می‌گذارد و گوگل نیز با معرفی مجموعه معیارهای Core Web Vitals، آن را به یک فاکتور کلیدی در رتبه‌بندی تبدیل کرده است.
اگر می‌خواهید سایت خود را برای موتورهای جستجو بهینه کنید، توجه به سرعت و شاخص‌های Core Web Vitals ضروری است. Core Web Vitals مجموعه‌ای از معیارهای کلیدی است که گوگل برای سنجش تجربه کاربری در نظر گرفته است. این معیارها نشان می‌دهند که کاربران هنگام بازدید از صفحه شما، چه تجربه‌ای از نظر سرعت و واکنش‌پذیری دارند. درواقع گوگل به این شکل می‌سنجد که آیا سایت شما به اندازه کافی سریع و روان کار می‌کند یا خیر. این معیارها شامل سه شاخص اصلی و یک معیار دیگر در کنار Core Web Vitals می‌شوند:
- LCP (Largest Contentful Paint): زمانی که طول می‌کشد تا بزرگترین عنصر صفحه مثل تصویر یا ویدیو بارگذاری شود. استاندارد این شاخص کمتر از ۲.۵ثانیه است.
- INP (Interaction to Next Paint): زمان پاسخ‌دهی سایت به تعاملات کاربر مانند کلیک یا تایپ. این شاخص باید کمتر از ۲۰۰ میلی‌ثانیه باشد.
- CLS (cumulative layout shift): ثبات ظاهری صفحه هنگام لود شدن را اندازه‌گیری می‌کند.
- FCP (First Contentful Paint): زمانی که طول می‌کشد تا اولین محتوای صفحه مثل متن یا تصویر نمایش داده شود. عدد ایده‌آل برای این معیار کمتر از ۱.۸ثانیه است.
اهمیت این شاخص‌ها از آنجا مشخص می‌شود که گوگل به سایت‌هایی که Core Web Vitals بهتری دارند، در نتایج جستجو، اولویت بیشتری می‌دهد. به عبارت دیگر، بهینه‌سازی سرعت سایت نه تنها تجربه کاربری را بهبود می‌بخشد، بلکه شانس شما را برای دیده شدن در گوگل نیز افزایش می‌دهد.
آموزش شناسایی کدهای بدون استفاده با ابزار Coverage
بسیاری از قالب‌ها و افزونه‌های وردپرس، فایل‌های CSS و JS را در تمام صفحات بارگذاری می‌کنند، در حالی که ممکن است بخش زیادی از آن کدها در یک صفحه خاص استفاده نشوند. این کدهای اضافی، حجم صفحه را افزایش داده و سرعت بارگذاری را کاهش می‌دهند. گوگل هم در ابزارهایی مانند PageSpeed Insights، وجود کدهای بی استفاده را به عنوان یک مشکل گزارش می‌دهد که باید برطرف شود.
برای شناسایی این فایل‌های سنگین و بدون استفاده، نیازی به نصب ابزار خاصی ندارید. مرورگر کروم ابزاری به نامCoverage دارد که دقیقا همین کار را برای شما انجام می‌دهد. با استفاده از این ابزار می‌توانید متوجه شوید چه مقدار از کدهای CSS و JS در هر صفحه واقعا استفاده می‌شوند و چه مقدار بلااستفاده هستند.
مراحل کار با ابزار Coverage به شرح زیر است:
- صفحه مورد نظر سایت خود را در مرورگر کروم باز کنید.
- کلیدهای ترکیبی Ctrl + Shift + I (در ویندوز) یا Cmd + Option + I (در مک) را فشار دهید تا پنجره Inspect باز شود.
- روی آیکون سه نقطه در گوشه سمت راست بالای پنجره Inspect کلیک کنید.
- از منوی باز شده، گزینه More tools را انتخاب کنید و سپس روی Coverage کلیک کنید.
- در پنجره باز شده، روی دکمه گرد (ضبط) کلیک کنید و سپس صفحه را رفرش کنید.
- پس از بارگذاری کامل صفحه، لیستی از تمام فایل‌های CSS و JS بارگذاری‌شده نمایش داده می‌شود.
- به نوارهای رنگی کنار هر فایل توجه کنید. هرچه نوار قرمز بلندتر باشد، یعنی درصد بیشتری از کدهای آن فایل استفاده نشده است. فایل‌هایی که بیش از ۹۰٪ کد آن‌ها قرمز است، بهترین گزینه برای بهینه‌سازی هستند.
با شناسایی این فایل‌ها، می‌توانید گزارش دقیقی از کدهای کندکننده صفحه تهیه کنید و سپس اقدام به غیرفعال‌سازی یا تعویق بارگذاری آن‌ها کنید. در بخش بعدی، روش‌های عملی برای مدیریت این کدها را باهم بررسی خواهیم کرد.
۳ راهکار عملی افزایش سرعت بدون کدنویسی
حالا که با ابزار Coverage آشنا شدید و یاد گرفتید که چگونه کدهای بدون استفاده را شناسایی کنید، نوبت به اجرای راهکارهای عملی می‌رسد. خبر خوب این است که برای افزایش سرعت سایت نیازی به دانش برنامه‌نویسی ندارید و با سه راهکار ساده می‌توانید بهبود چشمگیری در عملکرد سایت یا صفحه خود ایجاد کنید.
راهکار اول: بهینه‌سازی فرمت و حجم تصاویر
تصاویر معمولاً سنگین‌ترین بخش هر صفحه هستند و تأثیر مستقیمی بر سرعت بارگذاری دارند. برای کاهش حجم تصاویر بدون افت کیفیت، از فرمت‌های نسل جدید مانند WebP برای عکس‌ها و SVG برای طرح‌های وکتور استفاده کنید. استاندارد حجم تصاویر باید زیر ۱۰۰ کیلوبایت و ترجیحاً زیر ۵۰ کیلوبایت نگه داشته شود. ابزارهای آنلاین متعددی وجود دارند که بدون نیاز به نرم‌افزار خاصی، تصاویر شما را به فرمت WebP تبدیل می‌کنند.
راهکار دوم: اتصال وب‌سایت به شبکه تحویل محتوا (CDN)
در حالت عادی، تمام کاربران از نقاط مختلف جغرافیایی برای دریافت اطلاعات به یک سرور اصلی متصل می‌شوند که این مسئله باعث تأخیر در پاسخ‌دهی می‌شود. شبکه تحویل محتوا یا CDN با ذخیره‌سازی نسخه‌ای کپی از فایل‌های سایت روی سرورهای متعدد در سراسر دنیا، نزدیک‌ترین سرور را برای پاسخ به درخواست کاربر انتخاب می‌کند. سرویس‌هایی مانند Cloudflare به سادگی و بدون کدنویسی قابل راه‌اندازی هستند و تأخیر شبکه را تا حد زیادی کاهش می‌دهند.
راهکار سوم: مدیریت بارگذاری کدها با Async و Defer
بسیاری از فایل‌های CSS و JS که در صفحات بارگذاری می‌شوند، برای نمایش اولیه صفحه ضروری نیستند اما روند بارگذاری را مسدود می‌کنند. با استفاده از تکنیک‌های Async و Defer می‌توانید این فایل‌ها را به گونه‌ای مدیریت کنید که بدون مسدود کردن رندر صفحه، بارگذاری شوند. در بخش بعدی این دو تکنیک را کامل‌تر بررسی خواهیم کرد.
اجرای همین سه راهکار ساده، زمان پاسخ‌دهی سرور و بارگذاری عناصر اصلی صفحه را به طرز چشمگیری بهبود می‌بخشند و تجربه کاربری روان‌تری برای بازدیدکنندگان سایت شما ایجاد می‌کنند.
تفاوت Async و Defer در بارگذاری کدها
در بخش قبلی با راهکار سوم یعنی مدیریت بارگذاری کدها آشنا شدید. حالا می‌خواهیم دقیق‌تر بررسی کنیم که Async وDefer چه تفاوتی با هم دارند و هر کدام چه کاربردی در بهینه‌سازی سرعت سایت شما دارند. برای اینکه مفهوم Async و Defer را راحت‌تر متوجه شوید، اول باید بدانید فایل جاوااسکریپت چیست.
جاوااسکریپت (JS) یک زبان برنامه‌نویسی است که به سایت شما قابلیت‌های پویا می‌دهد. مثلاً وقتی روی یک دکمه کلیک می‌کنید و منو باز می‌شود، یا وقتی فرمی را پر می‌کنید و پیغام تایید می‌بینید، همه اینها با جاوااسکریپت انجام می‌شوند. این فایل‌ها معمولاً سنگین هستند و اگر درست بارگذاری نشوند، سرعت سایت را کاهش می‌دهند. این دقیقاً همان چیزی است که ممکن است تجربه کاربری مخاطب شما را خراب کند.
وقتی مرورگر به یک فایل جاوااسکریپت می‌رسد، معمولاً بارگذاری بقیه محتوای صفحه را متوقف می‌کند تا آن فایل را کامل دانلود و اجرا کند. این کار باعث می‌شود کاربر برای چند لحظه صفحه خالی ببیند و این همان چیزی است که به آن «مسدود شدن رندر» می‌گوییم. برای حل این مشکل، دو تکنیک Async و Defer طراحی شده‌اند:
- Async: وقتی از این روش استفاده می‌کنید، مرورگر، فایل جاوااسکریپت را همزمان با بقیه محتوای صفحه دانلود می‌کند، اما به محض اینکه دانلود تمام شد، اجرایش را شروع می‌کند، حتی اگر بقیه صفحه هنوز کامل بارگذاری نشده باشد. این روش برای اسکریپت‌هایی مناسب است که به بقیه محتوای صفحه وابسته نیستند. مثلاً برای کدهای مربوط به نمایش تبلیغات یا ابزارهای آماری مثل گوگل آنالیتیکس که تأثیری روی نمایش اصلی صفحه ندارند، می‌تواند گزینه مناسب‌تری باشد.
- Defer: در این روش، مرورگر فایل را همزمان با بقیه محتوا دانلود می‌کند، اما اجرای آن را به تعویق می‌اندازد تا زمانی که تمام محتوای صفحه کامل شود. این روش برای اسکریپت‌هایی که به عناصر صفحه وابسته هستند، عالی است. مثلاً اسکریپت‌هایی که با منوها، اسلایدرها یا فرم‌ها کار می‌کنند، بهتر است با Defer بارگذاری شوند تا مطمئن شوید همه چیز صفحه قبل از اجرای آن‌ها آماده است.
به زبان ساده، هر دو تکنیک باعث می‌شوند که دانلود فایل‌های جاوااسکریپت، روند رندرینگ صفحه را متوقف نکند. اما تفاوت در زمان اجرای آن‌هاست. Async اسکریپت را به محض دانلود اجرا می‌کند، در حالی که Defer اجرا را تا پایان رندرینگ به تعویق می‌اندازد (رندرینگ فرآیندی که مرورگر کدهای سایت را می‌خواند و صفحه را به شکل گرافیکی به کاربر نشان می‌دهد). انتخاب درست بین این دو، تأثیر مستقیمی بر بهبود شاخص‌های LCP و FCP دارد و باعث می‌شود کاربران تجربه‌ی روان‌تری در حین بازدید از سایت شما داشته باشند.
از کدهای اضافی تا بهینه‌سازی سرعت سایت؛ نگاهی به جلسه آینده
در این جلسه از دوره آموزش رایگان سئوماتیک، با اهمیت سرعت سایت و معیارهای Core Web Vitals شامل LCP، INP و FCP آشنا شدید. سپس با ابزار Coverage یاد گرفتید که چطور کدهای بلااستفاده (Unused CSS و Unused JS) را در سایت خود شناسایی کنید. در ادامه سه راهکار عملی برای افزایش سرعت بدون کدنویسی شامل بهینه‌سازیتصاویر، استفاده از CDN و مدیریت بارگذاری کدها را بررسی کردیم و در نهایت با تفاوت Async و Defer آشنا شدید.
در جلسه بعدی، به سراغ مباحث متدولوژی‌های پیشرفته‌تر سئو تکنیکال و ابزارهای بهینه‌سازی تخصصی‌تر خواهیم رفت تا بتوانید ساختار کدهای سایت خود را کامل‌تر پوشش دهید و عملکرد سایت را به سطح بالاتری برسانید.
یک پاسخ