بالون » آموزش سئو » آموزش افزایش سرعت سایت

آموزش بهینه سازی و افزایش سرعت سایت با حفظ زیبایی

اولین نکته قبل از بهینه سازی و افزایش سرعت سایت :

قرار نیست یک سایت زشت اما سریع داشته باشید !

هدف از بهینه سازی و افزایش سرعت سایت ایجاد تجربه کاربری بهتر است.

هنر واقعی بهینه سازی و افزایش سرعت لود سایت زمانی است که شما زیبایی و امکانات ظاهری سایت خودتون رو حفظ کنید.

اگر قرار باشد یک سایت زشت داشته باشید که تجربه کاربری خوبی نداشته باشد.

دیگر افزایش سرعت ارزش نخواهد داشت.

پس رضایت کاربر را فراموش نکنید

تجربه کاربری بهتر

مهمترین ابزارهای سنجش سرعت لود سایت

page speed insight گوگل

page speed insight مهمترین معیار سنجش سرعت سایت در گوگل است.

با استفاده از این ابزار می توانید سرعت سایت خود را بر اساس معیار های مورد نظر گوگل بسنجید.

ضمنا این ابزار پیشنهادات و راهنمایی های بسیار خوبی هم برای بهینه سازی و بهبود سرعت لود سایت ارائه می دهد.

pageSpeedinsights

GTmetrix

GTmetrix هم یکی دیگر از ابزارهای خوب برای سنجش سرعت سایت است.

در گذشته این ابزار معیارهایی برای سنجش سرعت سایت تعریف کرده بود ولی در حال حاضر این ابزار هم سرعت سایت را با استفاده از معیارهای تعریف شده توسط گوگل می سنجد.

این ابزار هم امکانات خوبی برای سنجش سرعت سایت در اختیار شما قرار می دهد.

یکی از امکانات خوبی که این ابزار دارد ، ارائه ویدئو از نحوه لود شدن سایت شما است.

ویدئو زیر از صفحه آموزش سئو توسط GTmetrix تهیه شده:

WebPageTest

WebPageTest هم ابزار سنجش سرعت سایت است. این ابزار هم پارامترهای مهم از نظر گوگل را بررسی می کند.

اما یک سری جزئیات و پارامترهای بیشتر را تحلیل و گزارش میدهد.

این ابزار بیشتر برای کاربران با تسلط بالا به مفاهیم کد نویسی پیشنهاد میشود.

WebPageTest
WebPageTest

خب تا اینجا سه تا ابزار اصلی برای بهینه سازی سرعت سایت رو بهتون معرفی کردیم.

در نظر داشته باشید ابزارهایی که سرعت سایت رو بررسی می کنند زیاد هستند.

ولی واقعیت این است که همان ابزار اولی برای بهینه سازی سرعت سایت از نظر گوگل کافی است.

نهایتا اگر موارد خاصی دیگری را خواستید بررسی کنید 2 ابزار بعدی به شما کمک خواهند کرد.

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

ابتدا هدف از بهینه سازی را بدون تعریف پارامترهای سخت و پیچیده آموزش میدهم

بعد هم یک سری ابزار برای اجرای آنها معرفی میکنم.

وقتی می خواهیم سرعت لود یک سایت رو افزایش بدیم یعنی اتفاقات زیر در همگام لود سایت رخ دهد.

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

مهمترین پارامترهای تاثیر گذار در این زمینه اینها هستند

1- سرور مشغول نباشد ، یعنی توانایی پاسخگویی سریع به درخواست کاربر را داشته باشد

2- سرور کدهای صفحه را از قبل پردازش کرده باشد و سریعا جواب را به کاربر بفرستد. به عبارتی روی سرور کش فعال باشد.

بعد از این نوبت میرسد به پردازش کدهایی که سرور ارسال کرده است

خب حالا باید کدها بهینه باشند ، یعنی چی؟

بخش مهم این است که تا جای ممکن فایلهای css , javascript کمتری برای لود صفحه مورد نیاز باشند و حجم اونها هم کم باشه

فرض کنید صفحه html ارسالی به کاربر شامل 10 تا فایل css و javascript باشه که باید لود بشن

خب حالا مرورگر کاربر باید 10 تا درخواست دیگه بفرسته به سرور و صبر کنه تا جواب اونها بیاد و بعد شروع کنه به پردازش کدها

در این فاصله معمولا به کاربر صفحه سفید نشون میده که یک تجربه کاربری نامناسب است.

مورد مهم بعدی چی است؟

عکس ها ، یکی از عناصر صفحه که معمولا حجم بسیار زیادی دارند ، عکس ها هستند.

برای عکس ها باید 3 کار مهم انجام بدهید

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

مثلا یک عکس که قرار است حداکر در ابعاد 100 در 100 پیکسل در سایت قرار بگیرد، نباید خودش بیشتر از 100 در 100 پیکسل باشد

بعضی ها عکس های با ابعاد بزرگ لود کرده و با کد های html کوچک کرده و نمایش میدهند که این کار غیر بهینه است.

دوم اینکه باید حجم عکس را با روش های مناسب بهینه کنید تا به کمترین حجم مورد نظر برسد.

سوم ، لود تنبل عکس ها است. یعنی:

وقتی یک صفحه سایت رو باز میکنید احتمالا تعدادی عکس در قسمت های پایینی صفحه قرار دارد که همان اول دیده نمی شوند

خب پس بهتر است آن عکس ها لود نشوند

و زمانی که کاربر اسکرول زد و به آن قسمت رفت آن عکس ها لود بشوند

احتمالا در خیلی سایت ها این مدل لود شدن عکس ها را دیده اید.

به این روش اصطلاحا لود تنبل (lazy loading) می گویند.

در مرورگرهای قدیمی باید این کار را با استفاده از کد جاوا اسکریپت انجام دهید

اما در مرورگرهای جدید با اضافه کردن اتربیوت “loading=”lazy به تگ img می توانید این کار را انجام دهید.

ادامه دارد

Time needed: 30 minutes.

چهار مرحله اصلی برای بهینه سازی و افزایش سرعت سایت

  1. کش را روی سایت فعال کنید

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

  2. عکس ها را بهینه کنید

    عکس ها را هم از نظر ابعاد مورد نظر و هم از نظر حجم بهینه کنید.

  3. لود تنبل را برای عکس ها فعال کنید

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

  4. فایلهای مورد نیاز برای لود صفحه را تا جای ممکن کم کنید.

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

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

به بالای صفحه بردن