بهینه سازی سرعت سایت و تاثیر آن در سئو + نکات عملی + ابزار بررسی سرعت

خب، در سطح بسیار مقدماتی، چگونگی بارگیری یک صفحه ی وب را توضیح خواهم داد. به این ترتیب ما میتوانیم اهمیت سرعت لود در سئو سایت را متوجه شویم.

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

DOM چیست؟

زمانی که درخواست لود یک صفحه وب را دارید، مرورگر از آن صفحه، یک مدل شیء گرا (Document Object Model) ایجاد می کند. مدل DOM یک ساختار درختی از اشیاء موجود در صفحه HTML میسازد.

معمولا، DOM برای انجام همه چیز، نیاز به درخواست منابع اضافی از سرور شما دارد، و اینجاست که در طراحی سایت شما همه چیز شروع به کند شدن میکنه. امیدوارم داشتن این اطلاعات زمینه ای، به ما برای حل برخی از این مشکلات کمک کنه.

علت کند شدن سایت چیست؟

• اولین و مهمترین آنها تصاویر هستند. تصاویر بزرگ، بزرگترین متهمین بارگزاری کند صفحات وب هستند.
• میزبانی سایت نیز می تواند مشکلاتی را بعد از طراحی سایت ایجاد کند. مشکلاتی که در مقاله ای جداگانه آن را برای شما توضیح خواهیم داد.
• افزونه ها (Plugins) و ابزارک ها (Widgets)، و اساسا هر Script ثالثی توانایی کاهش سرعت بارگذاری را دارد.
• قالب شما و هر فایل بزرگ موجود در آن می تواند سرعت لود سایت را کم کند.
• Redirect ها، تعداد هوپ (HOP) های مورد نیاز برای وارد شدن به یک صفحه وب سبب کاهش سرعت می شود.
• سپس JavaScript که به زودی به اون خواهیم پرداخت.

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

ابزار بررسی سرعت گوگل

خب، منابع اولیه ای که در اینجا لیست کردم Google Tools و Page Speed Insights هستند. به عقیده ی من چیزی که درباره این دو واقعا جذابه اینه که این شانس رو بدست خواهیم آورد تا ببینیم با بالا رفتن سرعت صفحه ی وب چه چیز های اهمیت پیدا می کنند و خواهیم دید این تغییرات از دید کاربر چگونه هستند. اما اولین و مهمترین اینه که چگونه این موضوع، افرادی رو که به طراحی سایت شما سر می زنند رو  تحت تاثیر قرار میده. دوما ما چگونه می تونیم مزیت دوگانه ای که گوگل تفسیرش می کنه برای کیفیت بالاتر بهره مند بشیم.

خب ما می دانیم که Google در هر جایی، هر دو تا سه ثانیه، سایت هایی برای بارگزاری پیشنهاد می کند. بدیهیه که هر چه سریعتر بهتر. اما آن به نوعی جاییه که محدوده قرار داره. من شدیدا پیشنهاد می کنم که به آن نگاهی رقابتی داشته باشید. رقبای خود را در برخی از این ابزار ها قرار دهید و سرعت اهداف تون رو در برابر آنچه در صنعت شما رقابتی است رو benchmark کنید.

اینجا ما استاندارد های واقعی کاربری Chrome رو داریم و متاسفانه این ابزار برای وبسایت های بزرگ و محبوب در دسترسه، اما شما می تونید داده های خوبی رو از اون بگیرید. این برنامه در BigQuery قرار داره، پس یک مقدار دانش مقدماتی از SQL لازمه. طراحی سایت فروشگاهی برای بسیاری از فروشگاه‌های بزرگ انجام شده است که میتوان از این استانداردها استفاده کرد.

Lighthouse یکی از منابع مورد علاقه من، که در حال حاضر در Chrome Dev Tools در دسترسه. اگه الان در یک صفحه ی وب هستید بر بروی Inspect Element کلیک کنید و Chrome Dev Tools رو باز کنید درمنتهای سمت راست Audit رو میبینید  درست اینجا می تونید Lighthouse Report رو در مرورگر خودتون اجرا کنید.

چیزی که منو عاشق این منبع میکنه، مثال ها و راهکارهای ویژه ایه که به شما میده و شما می تونید ازشون استفاده کنید. واقعیت جالب برای دونستن اینه که این منبع به صورت اتوماتیک  بر روی Fast 3G Simulated خواهد بود و توجه کنید که اونها بر بروی کاربران تلفن همراهی که از 3G استفاده می کنند متمرکز شده اند. من دوست دارم که اون رو به Applied Fast 3G تغییر بدم  چونکه اینجا Lighthouse به صورت واقعی بارگزاری رو اجرا می کنه. کمی بیشتر طول می کشه ولی اینطور به نظر می رسه که دقیقتره.

Page Speed Insights واقعا خیلی جذاب هست. الان اونها Chrome User Experience Report رو یکی کردند. اما اگر شما جز یکی از اون سایت های بزرگ نباشید، حتی سرعت واقعی صفحه ی خودتون رو نمی تونید اندازه بگیرید. این بستگی به این داره که شما چگونه باشه و Feedback ایجاد می کنه و به اون امتیاز میده. اما چیز خوبیه که ازش آگاه باشید. هنوز هم چیز های باارزشی برای ارائه داره.

بررسی سرعت سایت بر روی موبایل

این خیلی باحاله چون mobile speed سایت شما رو تست می کنه. اگر scroll رو به طرف پایین حرکت بدید، اون مستیقیما به ROI برای بیزینس یا وبسایتون وصل می شه. بنابراین ما می تونیم Google leveraging real-world metrics رو ببینیم (متاسفانه قسمت بیزینس در ایران بعلت تحریم ها فعال نیست.) تعمیمش بدید به درصد افرادی که شما به علت این مقدار پایین بودن سرعت سایتتون از دست داده اید. این یک روش عالیه که یک جورایی همه ی ما رو با خودتون همراه کنید و برای بهتر شدن بجنگید.

Pingdom و GTmetrix محصولات یا ابزار هایی جدا از Google هستند اما به همون اندازه بسیار مفیدند.

معنی معیارهای سنجش Google Page Speed چیست؟

• first paint که به صورت مقدماتی میشه اولین non-blank paint ای که بر روی اسکرین است. این می تونه حتی اولین تغییر پیکسل باشه. این تغییر اولیه first paint در نظر گرفته می شه.
• First contentful paint وقتیه که اولین content ظاهر می شه. این می تونه بخشی از nav یا نوار جستجو یا هرچیز دیگه ای باشه.
• First meaningful paint وقتیه که محتوای اولیه قابل دیدنه. وقتی که شما یک جورایی اولین بازخوردو می گیرید که " آره، خودشه، این همون چیزیه که من بخاطرش وارد این سایت شدم. این می شه first meaningful paint.
• time to interactive زماینیه که از لحاظ بصری قابل استفاده و قابل تعامل باشه. چنان که همه ی ما وارد صفحات وبی شدیم که به نظر کامل می رسن ولی ما نمی تونیم تماما ازشون استفاده کنیم. اینجا جاییه که این metric به کار میاد. پس چه زمانی این برای کاربر قابل استفاده است؟ مجددا توجه کنید که چه قدر این metric ها کاربرمحور هستند.
• بارگذاری محتوای DOM، این وقتیه که HTML کاملا بارگذاری و آنالیز می شه. پس یکسری موارد خوب هست که باید بهشون توجه کنید و به طور کلی ازشون آگاه باشید.

چندتا راه برای بالا بردن Page Speed

HTTP/2 قطعا می تونه باعث افزایش سرعت بشه. تاچه حد، شما خودتون باید به نوعی تحقیق و تست کنید.

Preconnect, prefetch and preload در سرعت بخشیدن به طراحی وب سایت بسیار جالب و مهم هستند. ما می بینیم که گوگل این کار رو در SERP های خودش انجام می ده. اگر یک element رو بررسی کنید می تونید ببینید که گوگل برخی از URL ها رو prefetch میکنه بطوری که این کار برای شما سریع تر بشه اگر که شما بروی برخی از اون نتایج کلیک کنید. به همین ترتیب، شما می تونید این کارو در سایت خود انجام بدید. این کمک می کنه به بارگذاری و سرعت پروسه رو بالا می بره و کمک خیلی بزرگی به سئو سایت شما میکنه.

Cashing خیلی خیلی مهمه. ختما تحقیق کنید در موردش و مطمئن شوید که به درستی تنظیم شده. همینطور درمورد CDN ها، بسیار مهم اند برای بالا بردن سرعت سایت، اما شما باید خاطرجمع شوید از اینکه CDN شما به درستی پایه ریزی شده باشه.

امروزه راحت ترین و احتمالا سریعترین راه برای شما که سرعت سایتتون رو بالا ببرید، فشرده سازی تصاویر است. این کار خیلی راحتیه. انواع مختلفی از ابزارهای رایگان برای فشرده سازی عکس ها وجود دارند. Optimizilla یکی از اونهاست. شما حتی می تونید از ابزارهای رایگان کامپیوترتون Save for Web استفاده کنید و آنها رو به شکلی مناسب فشرده کنید.

شما همینطور می تونید منابع رو Minify کنید. این خیلی خوبه که آگاه باشید از اینکه Minification و bundling و compression چه کاری انجام می دهند. بنابراین شما می تونید یکسری مکالمات فنی تر رو با توسعه دهندگان یا با هر کسی که در سایت کار میکنه داشته باشید. طراحی سایت ارزان از جمله طراحی ‌هایی است که بسیار مورد توجه قرار میگیرد. البته وب مهر در آینده تمامی این موارد را برای شما توضیح خواهد داد.

منبع: https://moz.com/blog/page-speed-optimization