بهترین راه برای افزایش سرعت بارگذاری سایت

افزایش سرعت بارگذاری سایت

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

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

چرا افزایش سرعت بارگذاری سایت مهم است؟

نمایش سریع‌تر سایت، یکی از فاکتورهای مهم سئو است. همچنین راهی برای فراهم آوردن تجربه کاربری (UX) خوبی برای بازدیدکنندگان می‌باشد. به این دلیل که احتمالا همه‌ی کاربران اینترنت پرسرعت ندارند.

اقداماتی که در ادامه بیان می‌شود تأثیر زیادی در بهینه سازی سرعت وب سایت شما دارند. علاوه بر آن، به این دلیل که WordPress از سیستم‌های مدیریت محتوای محبوب در دنیاست و سهم زیادی از بازار CMS ها را دارد، توصیه‌ها و راهکارهای ویژه‌ای نیز مخصوص این CMS بیان خواهد شد. البته باید بدانید که پلاگین‎هایی که برای هر بخش معرفی شده اند، تنها معروف‎ترین‎های دنیای وب هستند. پس لازم است پیش از نصب، حتما در مورد آنها تحقیق نمایید تا با وب سایت شما تداخل نداشته باشد.

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

اما پیش از هر اقدامی، باید درباره وضعیت سرعت وب سایتتان اطلاعاتی کسب کنید، سایت‌های gtmetrix و pingdom و yslow و webpagetest و developers.google گزارش‌های نسبتاً جامعی در اختیار شما قرار می‌دهند.

انتخاب یک ‌هاست خوب

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

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

استفاده از شبکه‌های تحویل محتوا CDN

فناوری CDN که مخفف کلمات Content delivery network و به معنای شبکه توزیع محتوا است. شرکت‌های بزرگ اینترنتی، برای کنترل ترافیک سایت و سرویس‌های اینترنتی خود از چندین سرور در نقاط مختلف جهان برای ذخیره سازی و توزیع اطلاعات خود در سراسر جهان استفاده می‌کنند. برای اینکه درخواست‌های کاربران از نزدیک‌ترین سرور پاسخ داده شود. این کار باعث افزایش سرعت بارگذاری و نمایش سریعتر سایت می‎شود. مزایای دیگر CDN می‌توان به امنیت، همیشه در دسترس بودن، پخش صحیح فشار بر روی چندین سرور اشاره کرد.

فعال سازی g-zip

یکی از عواملی که برای  افزایش سرعت بارگذاری سایت می‌توانید انجام دهید استفاده از g-zip است. g-zip یک الگوریتم فشرده سازی فایل است. اگر سرور سایت پاسخ‌های خود را با الگوریتم gzip compress فشرده سازی کند حجم نهایی سایت کاهش پیدا خواهد کرد. در نتیجه محتوای سایت در زمان کمتری به نمایش در خواهد آمد، همچنین پهنای باند مصرفی را نیز کاهش می‌دهد.

برای فعال کردن این قابلیت، فایل htaccess را که در ریشه هاست شما وجود دارد را باز کنید. سپس دستورات زیر را برای فعالسازی g-zip به آن اضافه کنید:

در وردپرس نیز پلاگین های Check and Enable GZIP compression و GZip Ninja Speed Compression از پلاگین های پرطرفدار برای فعال سازی g-zip هستند.

فعال کردن Cache

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

در وردپرس پلاگین های W٣ Total Cache و WP Super Cache از پلاگین های پرطرفدار برای کَش کردن یک سایت وردپرسی هستند. همچنین به کمک قابلیت browser caching یا کش مرورگر می‌توانید با ذخیره کردن فایل‌ها بر روی مرورگر کاربران، تمامی فایل‌های موجود در سایت را طبق زمانی که شما برای آن مشخص می‌کنید، ذخیره نمایید تا در بازدید بعدی کاربر، با سرعت بیشتری آن صفحه را مشاهده نماید.

برای فعال کردن این قابلیت در وردپرس، فایل htaccess را که در ریشه هاست شما وجود دارد را باز کرده و دستورات زیر را برای فعالسازی کش به آن اضافه کنید:

فشرده سازی فایل‌های css و js

یکی از مواردی که سایت‌های بررسی سرعت بارگذاری وب سایت، احتمالا به آن تذکر بدهند، حجم فایل‌های CSS و JS است. با فشرده سازی آن‌ها می‌توانید حجم این فایل‌ها را کاهش دهید. با این کار گامی دیگر در بارگذاری سریع‌تر وب سایتتان برداشته‌اید. ابزارهای آنلاینی نظیر csscompressor و jscompress وجود دارند که با قرار دادن فایل‌های CSS و JS سایت خود در آن‌ها، کار فشرده سازی را انجام می‌دهند.

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

در وردپرس نیز پلاگین‎های WP Minify Fix و WP Super Minify و Better WordPress Minify از پلاگین های پرطرفدار برای فشرده سازی فایل‌های سی اس اس و جاوا اسکریپت هستند.

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

حجم تصاویر از عوامل مهم در سرعت بارگذاری سایت است. با بهینه سازی تصاویر سایت خود می‌توانید تا حد بسیار زیادی حجم کلی سایت خود را کاهش دهید. امروزه تکنولوژی‌های طراحی وب به حدی پیشرفت کرده‌اند که نیازی نیست برای نمایش هر شکل و ظاهری از تصاویر با فرمت‌های JPG و PNG استفاده کنید. بلکه فرمت‌های برداری مثل SVG، کدهای CSS و فونت‌های تصویری، بسیاری از نیازهای بصری سایت شما را برآورده می‌کنند.

برای بهینه سازی تصاویر که موجب افزایش سرعت بارگذاری سایت می‌شوند می‌توانید از روش‌های زیر استفاده کنید:

• استفاده از تصاویر کوچک:

  استفاده از تصاویر بزرگ به جای تصاویر بندانگشتی Thumbnail یکی دیگر از اشتباهی است که برخی از طراحان وب مرتکب آن می‌شوند. اگر به جای یک تصویر بند انگشتی ۱۰۰ در ۱۰۰ پیکسل یک تصویر ۵۰۰ در ۵۰۰ پیکسل یا بزرگ‌تر استفاده کنید، عملاً از یک تصویر با حجم بالاتر استفاده کرده‌اید که بر سرعت بارگذاری سایت شما تأثیر خواهد گذاشت. پس در هر قسمت از سایت خود، از تصاویر با اندازه مناسب استفاده کنید.

• استفاده از Sprites:

  همچنین سعی کنید تعداد در خواست‌ها به سرور را برای فراخوانی تصاویر به حداقل برسانید. استفاده از Sprites یکی از راهکارهای مناسب و اصولی است. برای مثال به جای ارسال ۵ درخواست به سرور برای نمایش ۵ آیکون می‌توانید این ۵ آیکون را همگی در قالب یک تصویر قرار دهید. سپس با استفاده از css ، فقط آن یک تصویر را فراخوانی کنید. این کار علاوه بر افزایش سرعت بارگذاری، باعث می‌شود که در پهنای باند سایت نیز صرفه جویی کنید. سایت‌های spritecow و spritegen از ابزارهای آنلاینی هستند که برای شما یک Sprite می‌سازند.

• تصاویر کش شده:

  تصاویر “Gravatar” یا همان تصاویر کوچکی که در کنار نام افراد در قسمت نظرات دیده می‌شود، تا حدی سرعت بارگذاری صفحه را پایین می‌آورند. بهتر است که آن‌ها را به صورت کش شده نمایش دهید. یا اینکه می‌توانید از تصویر پیش فرض استفاده کنید.

• قابلیت LazyLoad:

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

  در وردپرس نیز پلاگین های WP Smush و EWWW Image Optimizer از پلاگین های پرطرفدار برای بهینه سازی و کاهش حجم تصاویر به شمار می‌آید. اما برای بارگذاری تصاویر بصورت LazyLoad می‌توانید از پلاگین‌های Lazy Load و BJ Lazy Load استفاده کنید. برای تغییر و مدیریت تصاویر گرآواتار دو پلاگین WP User Avatar و Avatar Manager بیشترین کاربرد را دارند.

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

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

بهینه سازی جداول در وردپرس

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

این اطلاعات قدیمی به مرور باعث پر شدن فضای دیتابیس می‌شود. و این اتفاق موجب کاهش سرعت می‌شود. درخواست‌ها با سرعت کمتری پردازش می‌شوند و سرعت بارگذاری کاهش می‌یابد. پس برای افزایش سرعت بارگذاری سایت می‌توانید از افزونه‌های WP-Optimize و WP-DBManager استفاده کنید. این افزونه‌ها از افزونه‌های پرطرفدار برای بهینه سازی دیتابیس وردپرس هستند.