بهینه سازی سرعت لود صفحه

سرعت لود صفحه در واقع اندازه گیری میزان سرعت بارگذاری محتوای صفحه شما است.

سرعت صفحه چیست؟

سرعت صفحه اغلب با “سرعت سایت” اشتباه گرفته می شود ، که در واقع سرعت صفحه برای نمونه بازدید از صفحه در یک سایت است. سرعت صفحه را می توان در “زمان بارگذاری صفحه” (مدت زمان نمایش کامل مطالب در یک صفحه خاص) یا “زمان برای اولین بایت” توصیف کرد (چه مدت طول می کشد تا مرورگر شما اولین بایت اطلاعات را از وب سرور دریافت کند).

شما می توانید سرعت صفحه را با استفاده از PageSpeed Insights Google ارزیابی کنید. PageSpeed Insights Speed Score شامل داده های CrUX (گزارش تجربه کاربر Chrome) و گزارش هایی در مورد دو معیار مهم سرعت است:

First Contentful Paint (FCP) و DOMContentLoaded (DCL)

بهینه سازی سرعت لود صفحه

بهترین روشهای سئو

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

سرعت صفحه نیز برای تجربه کاربر مهم است. صفحات با زمان بارگذاری بیشتر تمایل دارند که نرخ پرش بالاتری داشته باشند و متوسط زمان پایین تری در صفحه داشته باشند. همچنین نشان داده شده است که لودهای طولانی تر بر سایت تأثیر منفی می گذارد.

در اینجا چندین روش برای افزایش سرعت صفحه وجود دارد:

فعال کردن فشرده سازی

برای کاهش اندازه فایل های CSS ، HTML و JavaScript که بزرگتر از 150 بایت هستند ، از Gzip ، یک برنامه نرم افزاری برای فشرده سازی فایل استفاده کنید.

از gzip در فایل های تصویری استفاده نکنید. در عوض ، آن ها را در برنامه ای مانند فتوشاپ فشرده کنید که بتوانید کیفیت تصویر را در آن کنترل کنید.

بهینه سازی کد CSS ، JavaScript و HTML

با بهینه سازی کد (شامل حذف فاصله ، ویرگول و سایر نویسه های غیرضروری) ، می توانید سرعت لود صفحه خود را به طرز چشمگیری افزایش دهید. همچنین کامنت های کد ، قالب بندی و کد های استفاده نشده را حذف کنید. گوگل استفاده از CSSNano و UglifyJS را توصیه می کند.

کاهش ریدایرکت ها

هر بار که یک صفحه به صفحه دیگری ریدایرکت می شود ، بازدید کننده شما با زمان اضافی منتظر می ماند تا چرخه درخواست پاسخ HTTP تکمیل شود. به عنوان مثال ، اگر الگوی تغییر مسیر در موبایل شما به این شکل باشد:

“example.com -> www.example.com -> m.example.com -> m.example.com/home” ، هر یک از این دو تغییر مسیر اضافی بارگیری صفحه شما را کندتر می کند.

حذف جاوا اسکریپت render-blocking

قبل از اینکه مرورگرها یک صفحه را ارائه دهند ،باید با تجزیه HTML یک درخت DOM بسازند. اگر مرورگر شما در طی این فرآیند با اسکریپت روبرو شود ، قبل از ادامه کار باید آن را متوقف و یک بار اجرا کند.

گوگل پیشنهاد می کند از استفاده از جاوا اسکریپت render-blocking جلوگیری کرده و آن را به حداقل برسانید.

Leverage browser caching

مرورگرها اطلاعات زیادی را در حافظه پنهان می کنند (استایل شیت ها ، تصاویر ، فایل های جاوا اسکریپت و موارد دیگر) به طوری که وقتی بازدید کننده ای به سایت شما بازگشت ، مرورگر مجبور نیست کل صفحه را دوباره از نو بارگیری کند.شما می توانید از ابزاری مانند YSlow استفاده کنید تا ببینید آیا تاریخ انقضا برای حافظه پنهان خود تعیین کرده اید یا خیر. سپس هدر “منقضی شدن” را برای مدت زمانی که می خواهید این اطلاعات پنهان شود تنظیم کنید. در بسیاری از موارد ، مگر اینکه طراحی سایت شما به طور مکرر تغییر کند ، یک سال یک دوره زمانی معقول است.

زمان پاسخ سرور را بهبود ببخشید

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

از شبکه توزیع محتوا استفاده کنید

شبکه های توزیع محتوا (CDN) ، شبکه های تحویل محتوا نیز نامیده می شوند ، شبکه هایی از سرورها هستند که برای توزیع بار تحویل محتوا استفاده می شوند. اساساً ، کپی های سایت شما در مراکز مختلف داده که از نظر جغرافیایی متنوع هستند ذخیره می شود تا کاربران دسترسی سریعتر و مطمئن تری به سایت شما داشته باشند.

بهینه سازی تصاویر

مطمئن باشید که تصاویر شما از اندازه لازم بزرگتر نیستند و در قالب فایل مناسب قرار دارند (PNG ها معمولاً برای گرافیک با کمتر از 16 رنگ بهتر هستند در حالی که JPEG برای عکس بهتر است) و برای وب فشرده شده اند .

برای ایجاد الگویی برای تصاویری که مرتباً در سایت خود مانند دکمه ها و آیکون ها استفاده می کنید ، از CSS sprites استفاده کنید. CSS sprites تصاویر شما را در یک تصویر بزرگ ترکیب می کند که به یک باره بارگیری می شود (که به معنای کاهش درخواست های HTTP است) و سپس فقط بخشهایی را که می خواهید نشان دهید نمایش می دهد. این بدان معناست که سرعت لود بالا رفته و شما در زمان بارگیری صرفه جویی می کنید و کاربران را منتظر بارگیری چندین تصویر نمی گذارید.

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