چگونه صفحات سایت خود را آنالیز و سرعت بارگذاری آن را افزایش دهیم
در سال ۲۰۰۶، وب سایت آمازون اعلام کرد هر ۱۰۰ میلی ثانیه که سایتاشن سریعتر بوده، حدود ۱% افزایش درامد داشته اند. بررسی اخیر Google نشان می دهد بیشتر کاربران حدود ۷۰% زمان بیشتری در سایتهایی که زیر ۵ ثانیه بارگذاری می شوند سپری می کنند.

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

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

تعدادی ابزار مجانی وجود دارد که بتوانید با آنها صفحات وب را بررسی کنید و کشف کنید چه چیزی باعث افت سرعت load و بارگذاری آن شده. سه مورد که در پایین آمده از نظر من معروفترین ها هستند که کار با آنها نیز بسیار آسان است.

· Pingdom Website Speed Test)

· GT Metrix Page Speed Aanalyzer)

· Google Page Speed Insights)

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

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

در واقع بعد از استفاده از دو ابزرا اول و تسریع و بهبود عملکرد سایت ، استفاده از Google Page Speed خیلی ضرورتی ندارد ، اما همچنان یک ابزار مفید و پر استفاده است.

اگر رتبه ی مناسبی دارید، متوقف نشوید

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

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

برای شروع، به سادگی وارد Pingdom شوید، آدرس URL سایتتان را وارد کنید، سروری نزدیک به محل اقامت فعلیتان را انتخاب کنید و بر روی ” شروع تست – Start test ” کلیلک کنید. هنگامی که آنالیز و بررسی سایت انجام شد، اطلاعاتی مانند رتبه ی کلی صفحه به علاوه ی مدت زمان صرف شده برای بارگذاری و load شدن صفحه را خواهید دید و همچنین برنامه مواردی که تغییر آنها باعث بهبود سرعت سایت می شود را به شما نمایش خواهد داد.

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

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

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

برنامه ی ذخیره سازی مرورگر یا cache

ذخیره ساز مرورگر (cache) به طور عمده به جای ارجاع دادن کاربر به وب سرور، به مرورگر کاربر می گوید به حافظه ی ذخیره سازی یا همان cache در مرورگر درخواست بدهد. با این حال، این موضوع باعث افزایش سرعت سایت برای بازدیدکنندگان جدید نمی شود. بلکه فقط سرعت را برای بازدیدکنندگان قبلی به شدت افزایش می دهد. برای انجام این مورد ، باید تعدادی خط به .htaccess خود اضافه کنید.

فایل .htaccess شما در پوشه ی root وب سایت شما قابل دسترسی خواهد بود.اگر چنین فایلی ندارید، به سادگی یک فایل متن (text) ایجاد کنید، کد دستوری زیر را در آن وارد کنید و آن را با پسوند .htaccess در فولدر root وب سایت خود ذخیره کنید.

ادغام، کاهش حجم و انتقال منابع

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

به خاطر داشته باشید زمانی که فایل های javascript و css را به یک فایل منتقل و ادغام می کنید، مطمئن شوید در ترتیب صحیحی قرار گرفته اند. شما می توانید از کنترلگر مرورگر استفاده کنید برای بررسی و کنترل ترتیب بارگذاری فایل ها، سپس به دنبال هر فایل برود و محتوا را کپی و سپس در یک فایل جداگانه paste کند. این روند می تواند اطمینان ایجاد کند که به طور مثال، قابلیت جاوا اسکریپتی مانند jQuery قبل از هر عملکرد جاوا اسکریپت که به jQuery متکی است، بارگیری می شود. همین امر برای CSS نیز اعمال می شود تا اطمینان حاصل شود که قوانین مجددی که انتظار می رود قوانین CSS را بازنویسی کنند به خوبی اعمال شده اند.

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

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

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

بارگیری منابع استاتیک از یک CDN می تواند چندین مسئله سرعت را تصحیح کند. این مورد اجازه خواهد داد که صفحه شما بارگیری شود در حالی که مرورگر مطالب را از دامنه دیگری به دست می آورد. این روش همچنین به شما اجازه می دهد تا اگر وب سایت شما از کوکی استفاده می کند ، مشکل “دریافت محتوا از یک دامنه ی بدون کوکی – Serve content from a cookieless domain ” که ممکن است با آن مواجه شده باشید را رفع کنید.

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

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

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

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

برای فشرده سازی دستی تصاویر، یک ابزار رایگان به نام Tinypng وجود دارد که در آن شما می توانید به سادگی تصاویر خود را بر روی صفحه بکشید ( drag کنید) ، آنها را فشرده سازی کنید و سپس می توانید نسخه های فشرده سازی شده را دانلود کنید.

فشرده سازی تمام فایل های شما می تواند سرعت بارگذاری صفحه شما را به طور قابل توجهی افزایش دهد. Tinypng قادر به فشردن یک تصویر ۵۷ کیلو بایتی به یک تصویر ۱۵ کیلو بایتی بدون ایجاد تفاوت کیفیت قابل توجه است. اگر صفحه وب شما دارای تصاویر بزرگ ( با حجم بالا ) است و یا تعداد زیادی تصویر را نمایش می دهد، فشرده سازی تمام تصاویر به تنهایی باعث خواهد شد صفحه شما در کسری از زمان بارگذاری شود.

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

 

منبع ارمانت