چگونه وبسایت‌مان را آنالیز و سریع نماییم

داشتن سرعت بارگذاری سریع و کارا برای صفحات وبسایت‌تان از همه چیز مهمتر است، این موضوع فقط برای بالا بردن رنک موتورهای جستجوگر اهمیت ندارد، بلکه برای بهتر کردن تجربه کاربری نیز موردی الزامی است. در سال ۲۰۰۶ آمازون اطلاعیه ای منتشر کرد که در آن نشان می‌داد که در هر ‍۱۰۰ میلی‌ثانیه لود سریع‌تر وبسایت، ۱ درصد بیشتر به آن‌ها سود می‌رسد. گوگل نیز اخیرا مطلبی منتشر کرد که در آن اشاره شده بود وبسایت‌ هایی که زمان لود آن‌ها کمتر از ۵ ثانیه است، کاربران ۷۰ درصد بیشتر زمان‌شان را روی بازدید از وبسایت قرار می‌دهند. 

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

ابزارهایی برای آنالیز سرعت صفحه‌تان

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

• Pingdom Website Speed Test
• GT Metrix Page Speed Aanalyzer
• Google Page Speed Insights

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

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

Google Page Speed، به شخصه در کارهای‌م متوجه شدم که این ابزار نسبت به بقیه موارد کمی را برای بهتر وضعیت سرعت وبسایت نسبت به بقیه ارائه می کند، اما با این وجود ابزار مناسب و معروفی در این زمینه است. 

به امتیازات بالا متوسل مشو!

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

آنالیز صفحات وب‌تان با استفاده از Pingdom

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

چگونه سرعت برگه‌ها را افزایش دهیم

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

مشکل Leverage Browser Caching 

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

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

برای خواندن اطلاعات بیشتر راجع به این قضیه می توانید این نوشته را مطالعه کنید.

ادغام سازی، کوچک کردن و انتقال منابع

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

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

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

برای کدهای جاوااسکریپت نیز قسمت از بستن تگ‌ body از تگ script و منبع دادن به فایل اصلی استفاده کنید.

استفاده از CDN برای منابع

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

برای این کار می توانید از سرویس‌های ارائه دهنده CDN استفاده کنید،‌ اما در کنار این موضوع خود شما نیز می توانید چنین سروری را طراحی کنید. برای این کار یک ساب‌دومین ایجاد نموده و فایل های سی‌اس‌اس، جاوااسکریپت و تصاویر را در آن جا قرار دهید و بعد برای آدرس دهی به صورت csscdn.yourwebsite.com عمل کنید. در چنین حالتی برای فراخوانی فایل سی‌اس‌اس می توانید بنویسید csscdn.yourwebsite.com/styles.css . می توانید این حالت را برای دیگر فایل‌ها نیز ایجاد کنید. 

تصاویرتان را فشرده کنید

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

فشرده سازی تمام فایل‌ها به صورت بسیار شگفت زده‌ای می تواند سرعت صفحات‌تان را بهبود دهد. Tinypng توانایی این را دارد تا یک فایل تصویری ۵۷ کیلوبایتی را به بدون افت کیفیت بسیار به یک فایل ۱۵ کیلوبایتی تبدیل کند. اگر وبسایتی دارید که از حجم تصاویر بسیار زیادی استفاده می کنید و می خواهید چنین حالتی را تغییر دهید می توانید آن ها را با استفاده از این سرویس فشرده کنید. 

به عنوان فردی که توسعه دهنده است استفاده از ابزارهای خودکار سازی مانند  Gulp یا Grunt پیشنهاد می شود. با استفاده این ابزارها می توانید عملیات کوچک کردن فایل‌های کدنویسی شده و یا تصاویر را فشرده نمایید. انجام چنین کارهایی بسیار مفید هستند.