توصیه هایی برای بارگذاری سریع تر سایت

پس از صرف زمان و هزینه بالاخره سایت شما رونمایی شده است و به دنبال بازدیدکنندگان جدید و مشتریان ثابت برای آن هستید نکته حیاتی اینجاست که فقط چند ثانیه فرصت دارید تا در اولین تجربه ورود به سایت‎تان نظر بازدیدکنندگان را جلب کنید؛ لحظه ای را تصور کنید که ثانیه‌ها به سرعت سپری می‌شوند و مخاطب از همه جا بی‌خبر هنوز چیزی از وب سایت شما را نمی‌بیند، احتمالاً زیرلب ناسزایی می‌گوید و پنجره مرورگر خود را می‌بندد و یا به سراغ یک سایت دیگر می‌رود. منتظر خبر بدتری از این بودید؟! هر چقدر هم سایت شما زیبا و جذاب باشد، اگر دیر نمایش داده شود ، قطعاً شما تنها بازدیدکننده ثابت وب سایت‎تان خواهید بود.

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

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

گام صفر – بررسی سرعت وب سایت

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

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

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

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

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

فعال سازیg-zip

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

#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
#End Gzip

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

فعال کردن Cache

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

## EXPIRES CACHING ##
 
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
 
## EXPIRES CACHING ##

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

یکی از آیتم‌هایی که ممکن است سایت‌های بررسی سرعت بارگذاری وب سایت، در مورد آن تذکر بدهند، حجم فایل‌های CSS و JS است. با فشرده سازی آن‌ها می‌توانید حجم این فایل‌ها را کاهش دهید و گامی دیگر در بارگذاری سریع‌تر وب سایتتان بردارید. ابزارهای آنلاینی نظیر csscompressor و jscompress وجود دارند که با قرار دادن فایل‌های CSS و JS سایت خود در آن‌ها، کار فشرده سازی را انجام می‌دهند. دقت کنید که این ابزارها همیشه خالی از اشکال نیستند و ممکن است پس از فشرده سازی فایل‌ها، شاهد بهم خوردن ظاهر و عملکرد بخش‌هایی از سایت باشید. پس با احتیاط از آن‌ها استفاده کنید و حتماً پیش از هر اقدامی یک نسخه پشتیبان از فایل‌ها و وب سایت خود بگیرید.
برای وردپرس: پلاگین‎های WP Minify Fix و WP Super Minify و Better WordPress Minify از پلاگین های پرطرفدار برای فشرده سازی فایل‌های سی اس اس و جاوا اسکریپت هستند.

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

حجم تصاویر از مواردی است که تأثیر زیادی در سرعت بارگذاری سایت دارند. با بهینه سازی تصاویر سایت خود می‌توانید تا حد چشم گیری حجم کلی سایت خود را کاهش دهید و در نتیجه کاربران می‌توانند سایت شما سریع‌تر ببینند. امروزه تکنولوژی‌های طراحی وب به حدی پیشرفت کرده‌اند که نیازی نیست برای نمایش هر شکل و ظاهری از تصاویر با فرمت‌های JPG و PNG استفاده کنید، بلکه فرمت‌های برداری مثل SVG، کدهای CSS و فونت‌های تصویری، بسیاری از نیازهای بصری سایت شما را برآورده می‌کنند.
استفاده از تصاویر بزرگ به جای تصاویر بندانگشتی Thumbnail یکی دیگر از اشتباهی است که برخی از طراحان وب مرتکب آن می‌شوند. اگر به جای یک تصویر بند انگشتی ۱۰۰ در ۱۰۰ پیکسل یک تصویر ۵۰۰ در ۵۰۰ پیکسل یا بزرگ‌تر استفاده کنید، عملاً از یک تصویر با حجم بالاتر استفاده کرده اید که بر سرعت بارگذاری سایت شما تأثیر خواهد گذاشت؛ از این رو در هر قسمت از سایت خود، از تصاویر با اندازه مناسب بهره ببرید.
همچنین سعی کنید تعداد در خواست‌ها به سرور را برای فراخوانی تصاویر به حداقل برسانید، استفاده از Sprites یکی از راهکارهای مناسب و اصولی است. برای مثال به جای ارسال ۵ درخواست به سرور برای نمایش ۵ آیکون می‌توانید این ۵ آیکون را همگی در قالب یک تصویر قرار دهید و با استفاده از css ، فقط آن یک تصویر را فراخوانی نمایید. این کار ضمن افزایش سرعت بارگذاری، موجب صرفه جویی در پهنای باند سایت می‌شود. سایت‌های spritecow و spritegen از ابزارهای آنلاینی هستند که برای شما یک Sprite می‌سازند.

علاوه بر این‌ها نیازی به آن نیست که کل تصاویر سایت در ابتدا بارگذاری و نمایش داده شوند؛ با بهره گیری از قابلیت LazyLoad زمانی که مرورگر کاربر به محلی می‌رسد که آن عکس قرار دارد، آن عکس ظاهر می‌شود در نتیجه سرعت نمایش سایت بیشتر می‌شود.
تصاویر “Gravatar” (همان تصویر کوچکی در کنار نام افراد در قسمت نظرات دیده می‌شود) تا حدی سرعت بارگذاری صفحه را پایین می‌آورند توصیه می‌شود که آن‌ها را به صورت کش شده نمایش دهید و یا از تصویر پیش فرض استفاده کنید.
برای وردپرس: پلاگین های WP Smush و EWWW Image Optimizer از پلاگین های پرطرفدار برای بهینه سازی و کاهش حجم تصاویر به شمار می‌آید و برای بارگذاری تصاویر بصورت LazyLoad پلاگین های Lazy Load و BJ Lazy Load محبوب هستند. برای تغییر و مدیریت تصاویر گرآواتار دو پلاگین WP User Avatar و Avatar Manager بیشترین کاربرد را دارند.

بهینه سازی برای دستگاه‌های مختلف

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

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

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