وقتی به سایتهای gtmetrix، pingdom و یا pagespeed سر میزنیم با اشتیاق زیاد منتظر دیدن بالاترین نمره از سایت خودمان هستیم اما بیشتر مواقع با این صحنه روبرو میشویم:
رنگ قرمز که عذاب دهنده تمام تلاشهای قبلی ما در طراحی و پیاده سازی سایت است. درست است که زمان و انرژی زیادی را در مرحله طراحی سایت صرف کردیم اما این ابزارها به ما نشان میدهند باید به چیزهای دیگر هم توجه داشته باشیم.
در این مقاله قرار است چندین نکته مهم که در ماههای اخیر با آن دست و پنجه نرم کردم تا عدد ۳۸ را بهبود ببخشم با شما به اشتراک بگذارم.
گزینهای که هزینه بردار است اما تاثیر بسیار زیادی بر عملکرد سایت میگذارد. ارتقا هاست و استفاده از وب سرور لایت اسپید(Litespeed) تاثیر چشم گیری بر تمام المانهای سنجش وبسایت دارد. طبق گزارشی که در سال ۲۰۲۲ در hostafrica منتشر شد، NginX(۳۳٪)، Apache(۳۰/۸٪)،cloudflare(۲۲٪) و وب سرور LiteSpeed توانسته ۱۲/۳٪ در سراسر جهان مورد استفاده قرار بگیرد و این آمار روند رو به رشدی از سال ۲۰۱۱ تا به حال داشته است. آزمایشی توسط تیم لایت اسپید برای اندازه گیری عملکرد سایت وردپرسی روی ۳ نوع وب سرور انجام شد و Litespeed توانست در هر ثانیه ۶۹,۶۱۸ درخواست را پاسخ دهد. عملکرد وب سرورها در تصویر زیر مشخص است:
البته با نصب پلاگین litespeed cache در سایت وردپرسی کارایی آن به طرز چشم گیری افزایش پیدا میکند. میتوانید از طریق لینک اقدام به خریداری و یا ارتقا هاست خود کنید.
امکان استفاده از CDN های داخلی مثل ابرآروان و ستون هست اما نمونه خارجی و البته رایگان Cloudflare نیز در دسترس هست. پیکربندی لازم را با دقت و با کمک متخصص انجام دهید تا مشکلی در وبسایت شما بوجود نیاید.
کمتر کسی کاهش حجم تصاویر را نادیده میگیرد اما ویدیوها چطور؟ ویدیوها را نباید دست کم گرفت. برای بهینه سازی ویدیوها ۲ کار انجام دهید. اول آنکه ویدیوهای مختلف بجای آپارات مستقیم از روی هاست نمایش داده شوند و دوم preload=none به تمام ویدیوها اضافه کنید.
نمونه کد استفاده شده برای ویدیو:
<video controls preload="none" poster="p1.jpg" class="lazyloaded"> <source src="...." type="video/mp4"> </video>
هنگام تست در Pagespeed Insight اگر با خطای زیر روبرو شدید چه باید کرد؟
خطای بالا به این نکته اشاره دارد که تا زمانی که وب فونتهای بارگذاری نشدند کاربر چه چیزی مشاهده کند؟
۲ تکینک به شما کمک میکند:
۱- از font-display:swap استفاده کنید تا در چند لحظه ابتدایی بارگذاری در صورت نیاز از فونتهای سیستمی کاربر استفاده کند.
۲- از fall back استفاده کنید تا در زمان بارگذاری وب فونت از فونتهایی که حتما روی تمام سیستمها وجود دارد استفاده کند مثل Arial
هدف از swap و fall back آن است که وقفه کوتاهی که وجود دارد و وب فونتها در حال بارگذاری هستند امکان استفاده از فونتهای سیستمی برای نمایش هر چه سریعتر نوشتهها وجود داشته باشد.
الف ) بارگذاری اسکریپتها با تاخیر: با کمک GTmetrix و PageSpeed Insight اسکریپتهایی که زمان بارگذاری زیادی دارند را شناسایی کرده و آنها را با تاخیر(Delay) بارگذاری کنید. برای این کار میتوانید از افزونه wp rocket استفاده کنید.
ب) انتقال اسکریپتها : اسکریپتهای غیرضرور مثل اسکریپتهای مربوط به یکتانت، سنجاق، گفتینو و ... را از قسمت هدر به فوتر وبسایت منتقل کنید.
ج) حذف و عدم بارگذاری : با کمک پلاگین asset clean up از بارگذاری اسکریپت های غیر ضروری جلوگیری کنید. و یا اسکریپتها را در صورت عدم استفاده حذف کنید.
د) Minify & Combine : با کمک افزونههایی مثل wp rocket یا asset clean up میتوانید آن را انجام دهید.
با استفاده از افزونه WP-Sweep میتوانید دیتابیس را پاک سازی کنید و اطلاعات اضافی و بی فایده را از آن حذف کنید. چنانچه اقدام به حذف پلاگینهای مختلف کردید حتما باید دیتابیسهای مرتبط با آنها را نیز حذف کنید. برای این کار با دسترسی مستقیم به PhpmyAdmin جداول افزونههای حذف شده را به صورت دستی پاک کنید.
حتما در طول مسیر تمام اقدامات خود را ارزیابی مستمر کنید تا نتیجه آنها به درستی درک شود. تمام تجربههایی که در قالب ۶ نکته بهبود سئو سایت مطرح شد در قالب پروژه سایت پلکان یادگیری انجام و نتایج نهایی آن به صورت زیر است:
۱- سایت GTmetrix
۲- سایت Pingdom
۳- سایت Page Speed Insight
نسخه موبایل
نسخه دسکتاپ