13 نکته بهبود سرعت وب سایت

سوال مهم این است که چرا واقعاً به این 13 نکته بهبود سرعت وب سایت نیاز داریم؟ ساده است! چون برای تجربه کاربری بهتر است. اگر کاربر روی لینک سایت شما کلیک کند و سپس به جای منتظر ماندن، سریع باز شود، این عامل بسیار مهم برای عملکرد خوب در سئو وب سایت در نظر گرفته می شود.

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

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

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

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

تحقیقات نشان می‌دهد که مدت زمانی که کاربر قبل از ترک سایت شما منتظر می‌ماند، تقریباً بین 0.3 تا 3 ثانیه است. اگر وب سایت شما بیشتر از آن زمان برای نمایش اطلاعات طول بکشد، کاربر تمرکز خود را از دست می دهد و احتمالاً پنجره مرورگر را می بندد.

وب‌سایت‌هایی که سریع‌تر هستند، نرخ پرش پایین‌تر، نرخ تبدیل بالاتر، رتبه‌بندی بالاتر در جستجوی ارگانیک و البته در مجموع تجربه کاربری بهتری خواهند داشت.

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

چه چیزی بر سرعت سایت تاثیر می گذارد

دلایل متعددی وجود دارد که زمان بارگذاری سایت شما ممکن است تاخیر داشته باشد. این می تواند هر چیزی باشد، اما رایج ترین عوامل عبارتند از:

• استفاده از فایل های سنگین CSS و جاوا اسکریپت
• سرور/هاست ضعیف
• حجم تصویر بزرگ
• عدم استفاده از کش مرورگر
• ویجت ها و افزونه های زیاد
• هاتلینک کردن تصاویر و سایر منابع از سرورهای کند
• حجم ترافیک یالا
• مرورگرهای قدیمی
• اتصال آهسته شبکه (دستگاه های تلفن همراه)

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

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

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

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

معیارهای زیادی وجود دارد که می‌توانید به‌عنوان مالک وب‌سایت آن‌ها را اندازه‌گیری کنید، اما من پیشنهاد می‌کنم روی بزرگ‌ترین رنگ محتوایی(LCP)، تأخیر ورودی اول(First Input Dela) و تغییر چیدمان تجمعی(CLS) تمرکز کنید.

این سه معیار توسط گوگل به عنوان Core Web Vitals تعریف شده اند.

چندین راه حل موجود است که می توانید از آنها برای نظارت بر معیارهای Core Web Vitals استفاده کنید، مانند ابزار page speed توسط گوگل.

سرعت خوب برای وب سایت چیست؟

تحقیقات نشان می‌دهد که مدت زمانی که کاربر قبل از از دست دادن تمرکز منتظر می‌ماند، تقریباً بین 0.3 تا 3 ثانیه است. این بدان معناست که شما باید سعی کنید در کمتر از 3 ثانیه مقداری از محتوا را به کاربر نشان دهید.

اگر فرض کنیم که شما تصمیم گرفته اید از معیارهای Core Web Vitals همانطور که قبلاً ذکر شد استفاده کنید، این آستانه های توصیه شده است که باید آنها را هدف قرار دهید:

در اینجا می‌توانید در مورد معیارهایی که گوگل برای رسیدن به این آستانه‌ها استفاده کرده است، بیشتر بخوانید.

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

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

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

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

1-تعداد درخواست های HTTP را کاهش دهید

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

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

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

شما باید تصاویر غیر ضروری، فایل های جاوا اسکریپت، شیوه نامه ها، فونت ها و غیره را حذف کنید. اگر از CMS مانند وردپرس استفاده می کنید، باید پلاگین غیر ضروری را حذف کنید زیرا اغلب فایل های اضافی را در هر صفحه بارگذاری می کنند.

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

2-به HTTP/2 کوچ کنید

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

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

می توانید وب سایت خود را به HTTP/2 تغییر دهید. جزئیات نحوه انجام این کار به ارائه دهنده میزبانی که استفاده می کنید بستگی دارد.

HTTP/2 چندین مزیت نسبت به HTTP/1.1 دارد. از جمله آنها امکان ارسال چندین فایل به طور همزمان، از طریق یک اتصال را دارد. این امر از سربار درخواست های متعدد جلوگیری می کند.

3-بهینه سازی اندازه تصویر

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

به عنوان مثال، وب سایت ها گاهی اوقات از تصاویری با وضوح 2x یا حتی 3x استفاده می کنند، بنابراین آنها به خوبی در نمایشگرهای با چگالی بالا مانند صفحه نمایش شبکیه نمایش داده می شوند.

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

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

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

4-استفاده از شبکه تحویل محتوا (CDN)

ارائه فایل های استاتیک ممکن است مشکل باشد. از آنجایی که این کار اصلی 99٪ از وب سایت های موجود نیست، هوشمندانه است که این بخش از زیرساخت خود را به شخص دیگری برون سپاری کنید.

خوشبختانه خدماتی وجود دارد که مخصوصاً برای این کار طراحی شده اند: شبکه های تحویل محتوا یا CDN.

CDN ها تحویل فایل های ثابت مانند CSS، تصاویر، فونت ها و جاوا اسکریپت را به بازدیدکنندگان شما بهینه می کنند.

CDN ها از سرورهای توزیع شده جغرافیایی استفاده می کنند. این به این معنی است که نزدیکترین سرور به بازدید کننده شما فایل های ذخیره شده را سرویس می دهد.

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

5-کد موبایل اول را بنویسید

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

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

6-زمان Time to first byte یا TTFB را به حداقل برسانید

Time to first byte یا TTFB زمانی است که مرورگر برای دریافت اولین بایت داده از سرور نیاز دارد. بنابراین این یک نگرانی سمت سرور است، اما نقش مهمی در عملکرد کلی وب سایت شما ایفا می کند، بنابراین باید کمی برای بهبود آن وقت بگذارید.

عامل اصلی تحت کنترل شما در مورد TTFB زمان پردازش سرور است. بنابراین می توانید برخی از نکات توصیه شده توسط Google را برای بهبود TTFB را اجرا کنید:

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

TTFB زیر 200ms عالی در نظر گرفته می شود. محدوده 200 تا 500 میلی‌ثانیه طبیعی و مشکلی در نظر گرفته می‌شود. TTFB به طور مداوم بالاتر از 600ms باید بررسی شود. وب تمیم می تواند در کنار نظارت بر سایر معیارهای Web Vitals به شما کمک کند.

7-از خدمات میزبانی مناسب را انتخاب کنید

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

شما سه گزینه اصلی (به علاوه یک جایزه) برای میزبانی دارید:

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

البته، مثل همیشه، قبل از انتقال سایت، ابتدا باید عملکرد را کاملا اندازه گیری کنید.

8-فشرده سازی Gzip را پیاده سازی کنید

شما باید فشرده سازی gzip را در سرورهای HTTP خود فعال کنید. فشرده سازی Gzip اندازه پاسخ های HTTP را برای انواع فایل های خاص به حداقل می رساند. و معمولاً فقط برای پاسخ های متنی استفاده می شود. این عمل باید زمان بارگذاری را کاهش دهد و در پهنای باند صرفه جویی کند.

9-فایل های CSS، JavaScript و HTML را کوچک و ترکیب کنید

قبلاً اشاره کردم که باید سعی کنید هر دو JS و CSS را در یک درخواست برای هر یک بارگذاری کنید. این کار با کوچک کردن و ترکیب فایل‌های JS و CSS جداگانه در بسته‌های منفرد انجام می‌شود.

مرورگرها محدودیتی برای درخواست شبکه موازی دارند، بنابراین اگر وب سایت شما در مجموع به 3 درخواست برای بارگیری نیاز داشته باشد، به احتمال زیاد سریعتر از زمانی است که مجبور به بارگیری 30 منبع مختلف باشد.

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

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

کاری که اکثر وب‌سایت‌های بهینه‌سازی شده انجام می‌دهند، ابتدا کوچک کردن فایل‌های جاوا اسکریپت و CSS و سپس ترکیب آن‌ها در بسته‌های واحد است.

10-بارگیری جاوا اسکریپت به صورت ناهمزمان

وقتی مرورگر به <اسکریپت> جاوا اسکریپت را از یک منبع راه دور بارگیری می کند میرسد، قبل از ادامه رندر وب سایت منتظر می ماند تا فایل بارگیری شود. که به آن بارگذاری سنکرون می گویند.

اگر پرچم async را روی <script> تگ کنید سپس مرورگر اسکریپت را به صورت ناهمزمان بارگذاری می کند. تا زمانی که اسکریپت بارگیری می شود، به بارگزاری صفحه ادامه می دهد.

11-استفاده از تکنیک‌های Prefetch، Preconnect و Prerender را در نظر بگیرید

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

تکنیک های بهینه سازی عملکرد زیر را در نظر بگیرید:

واکشی اولیه یا DNS prefetching: می‌توانید به مرورگر بگویید که نام‌های دامنه خاصی باید قبل از اینکه مرورگر منابع آن نام دامنه را ببیند، به یک آدرس IP حل شود. این می تواند یک بهینه سازی کوچک به نظر برسد، اما در سرعت سایت شما می تواند تفاوت ایجاد کند.

پیش اتصال یا TCP preconnect: مانند روش واکشی اولیه DNS، پیش اتصال DNS را حل می کند، اما همچنین باعث می شود که TCP handshake و در صورت تمایل TLS negotiation را نیز انجام دهد.

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

پیش اجرا یا Prerendering: این باید برای زمانی رزرو شود که شما واقعاً می دانید که قدم بعدی یک کاربر رفتن به یک صفحه خاص است.

12-تعداد پلاگین ها را کاهش دهید

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

اما افزونه ها سرعت را کم میکنند. هر افزونه مطمئناً فایل های CSS و جاوا اسکریپت اضافی را بارگیری می کند. برخی از افزونه ها زمان TTFB را نیز افزایش می دهند زیرا برای هر درخواست صفحه نیاز به پردازش اضافی در سرور دارند.

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

13-از کش وب سایت استفاده کنید

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

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

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