سرعت صفحه چیست؟
سرعت صفحه اندازه گیری میزان بارگذاری محتوای صفحه شما است.
سرعت صفحه اغلب با "سرعت سایت" اشتباه گرفته می شود ، که در واقع سرعت صفحه نمونه بازدید از صفحه در یک سایت است. سرعت صفحه را می توان در "زمان بارگذاری صفحه" (زمان لازم برای نمایش کامل محتوا در یک صفحه خاص) یا "زمان تا اولین بایت" (چقدر طول می کشد تا مرورگر شما اولین بایت اطلاعات را از سرور وب)
با استفاده از Google PageSpeed Insights می توانید سرعت صفحه خود را ارزیابی کنید. نمره سرعت PageSpeed Insights شامل داده های CrUX (گزارش تجربه کاربر Chrome) و گزارش دو معیار سرعت مهم است: First Contentful Paint (FCP) و DOMContentLoaded (DCL).
بهترین شیوه های SEO
گوگل نشان داده است که سرعت سایت (و در نتیجه سرعت صفحه) یکی از سیگنال هایی است که الگوریتم آن برای رتبه بندی صفحات استفاده می کند. و تحقیقات نشان داده است که ممکن است گوگل زمان سرعت بایت اول را همانطور که سرعت صفحه را در نظر می گیرد اندازه گیری کند. علاوه بر این ، سرعت پایین صفحه به این معنی است که موتورهای جستجو می توانند صفحات کمتری را با استفاده از بودجه خزیدن اختصاص داده شده خود خزیده و این می تواند بر نمایه سازی شما تأثیر منفی بگذارد.
سرعت صفحه نیز برای تجربه کاربر مهم است. صفحات با زمان بارگذاری طولانی تر دارای نرخ پرش بیشتر و متوسط زمان پایین تر در صفحه هستند. بارهای طولانی تر نیز نشان داده شده است که بر تبدیل ها تأثیر منفی می گذارد.
در اینجا چند راه برای افزایش سرعت صفحه وجود دارد:
فعال کردن فشرده سازی
از Gzip ، یک برنامه نرم افزاری برای فشرده سازی فایل ، برای کاهش حجم فایل های CSS ، HTML و JavaScript خود که بیش از 150 بایت هستند ، استفاده کنید.
از gzip در فایل های تصویری استفاده نکنید. در عوض ، آنها را در برنامه ای مانند Photoshop فشرده کنید تا بتوانید کنترل کیفیت تصویر را در آن حفظ کنید. "بهینه سازی تصاویر" را در زیر مشاهده کنید.
CSS ، JavaScript و HTML را به حداقل برسانید
با بهینه سازی کد (شامل حذف فاصله ها ، کاما و سایر نویسه های غیر ضروری) ، می توانید سرعت صفحه خود را به طرز چشمگیری افزایش دهید. همچنین نظرات کد ، قالب بندی و کد استفاده نشده را حذف کنید. استفاده از CSSNano و UglifyJS توسط Google توصیه می شود.
کاهش هدایت ها
هر بار که صفحه ای به صفحه دیگری هدایت می شود ، بازدیدکننده شما با زمان بیشتری منتظر می ماند تا چرخه درخواست و پاسخ HTTP تکمیل شود. به عنوان مثال ، اگر الگوی تغییر مسیر تلفن همراه شما به این شکل باشد:
example.com -> www.example.com -> m.example.com -> m.example.com/home
... هر یک از آن دو تغییر مسیر اضافی ، بارگذاری صفحه شما را کندتر می کند.
حذف جاوا اسکریپت رندر مسدود کننده
مرورگرها قبل از رندر کردن یک صفحه باید یک درخت DOM با تجزیه HTML ایجاد کنند. اگر مرورگر شما در طی این فرآیند با اسکریپتی روبرو شد ، قبل از ادامه باید آن را متوقف کرده و اجرا کند.
گوگل پیشنهاد می کند که از مسدود کردن جاوا اسکریپت جلوگیری کرده و آن را به حداقل برسانید.
از ذخیره سازی مرورگر استفاده کنید
مرورگرها اطلاعات زیادی (شیوه نامه ، تصاویر ، فایل های جاوا اسکریپت و موارد دیگر) را ذخیره می کنند تا وقتی بازدیدکننده ای به سایت شما باز می گردد ، مرورگر مجبور نباشد کل صفحه را دوباره بارگیری کند. از ابزاری مانند YSlow استفاده کنید تا ببینید آیا تاریخ انقضا برای کش خود تنظیم کرده اید یا خیر. سپس هدر "منقضی" خود را برای مدت زمانی که می خواهید این اطلاعات ذخیره شود ذخیره کنید. در بسیاری از موارد ، مگر اینکه طراحی سایت شما به طور مکرر تغییر کند ، یک سال یک دوره زمانی معقول است. Google اطلاعات بیشتری در مورد استفاده از ذخیره سازی در اینجا دارد.
بهبود زمان پاسخگویی سرور
زمان پاسخگویی سرور شما تحت تأثیر میزان ترافیک دریافتی ، منابع استفاده شده در هر صفحه ، نرم افزاری که سرور شما استفاده می کند و راه حل میزبانی مورد استفاده شما قرار می گیرد. برای بهبود زمان پاسخگویی سرور ، به دنبال تنگناهای عملکردی مانند جستجوهای کند پایگاه داده ، مسیریابی آهسته یا کمبود حافظه کافی باشید و آنها را برطرف کنید. زمان بهینه پاسخگویی سرور زیر 200 میلی ثانیه است. درباره بهینه سازی زمان برای اولین بایت بیشتر بدانید.
از شبکه توزیع محتوا استفاده کنید
شبکه های توزیع محتوا (CDN) که شبکه های تحویل محتوا نیز نامیده می شوند ، شبکه های سرورهایی هستند که برای توزیع بار تحویل محتوا استفاده می شوند. در اصل ، نسخه های سایت شما در مراکز داده متعدد و دارای موقعیت جغرافیایی متنوع ذخیره می شوند تا کاربران دسترسی سریعتر و مطمئن تری به سایت شما داشته باشند.
بهینه سازی تصاویر
اطمینان حاصل کنید که تصاویر شما بزرگتر از اندازه مورد نیاز نیستند ، در قالب فایل مناسب باشند (PNG ها معمولاً برای گرافیک های کمتر از 16 رنگ بهتر است در حالی که JPEG ها معمولاً برای عکس ها بهتر هستند) و برای وب فشرده شده اند. به
از CSR sprites برای ایجاد یک الگو برای تصاویری که اغلب در سایت خود مانند دکمه ها و نمادها استفاده می کنید ، استفاده کنید. CSS sprites تصاویر شما را در یک تصویر بزرگ ترکیب می کند که به طور همزمان بارگیری می شود (که به معنی درخواست HTTP کمتری است) و سپس فقط بخشهایی را که می خواهید نمایش داده شود نمایش می دهد. این بدان معناست که شما در زمان بارگذاری صرفه جویی می کنید و باعث نمی شوید کاربران منتظر بارگذاری چندین تصویر باشند.