۲۳ ابزار توسعه برای بهینه سازی و افزایش سرعت وب سایت – بخش اول

وقتی صحبت از بهبود سرعت و بهینه سازی وب سایت در مرحله توسعه به میان می آید انقدر تعداد ابزارها زیاد است که معمولا یادآوری همه آنها سخت است.برای همین ما لیستی از ۲۳ ابزار خوب در این زمینه آماده کرده ایم تا به عنوان مرجع از آن استفاده کنید.اسم بعضی از آنها را شنیده اید و احتمالا اسم بعضی را نه.

ابزارهای بهینه سازی سمت کاربر (Cliend Side)

۱.Test Mobile Speed with Google

این یک ابزار ارائه شده توسط گوگل است تا کارایی سایت در موبایل را چک کند. این ابزار از سایت محبوب WebPageTest.org قدرت گرفته است.

بعد از تست می توانید گزارش را در سایت ببینید یا در ایمیل تان دریافت کنید.

این ابزار آنلاین سرعت بارگذاری وب سایت تان را بر اساس سرعت ۳G و در مرورگر کروم روی گوشی Moto G4 محاسبه کرده و نمایش می دهد.همچنین تعداد کاربرانی که به خاطر سرعت کم سایت از دست می دهید را تخمین می زند و کارهایی مثل:

• سرعت سایت شما را با سایت های هم موضوع سایت شما مقایسه می کند
• مهمترین راه حل های بهبود سرعت وب سایت تان را نیز به شما می گوید.دیگه چی می خوای؟!

۲. SiteSpeed.io

SiteSpeed.io یک ابزار متن باز – یا مجموعه ای از ابزار هاست که بوسیله آن می توانید سرعت سایت خود را بررسی و بهبود بخشید.

• Coach : بهترین روش ها و توصیه ها برای افزایش کارایی وب سایت را ارائه می کند.
• Browsertime : اعداد و ارقام و فایل های HAR را از مرورگر شما جمع آوری می کند.
• Chrome-HAR : ابزاری برای مقایسه فایل های HAR.
• PageXray : معیار مختلف مثل سایز، تعداد درخواست ها و … را از فایل های HAR استخراج می کند.

برای نصب ابزار(های) فوق می توانید از npm استفاده کنید:

npm install sitespeed.io -g
sitespeed.io --help

یا داکر:

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ --video --speedIndex

۳. Lighthouse by Google

Lighthouse هم یک ابزار برای بررسی و افزایش کیفیت صفحات وب سایت است.این ابزار داخل Chrome DevTools یکپارچه شده است همچنین به صورت پلاگین کروم یا دستور خط فرمان CLI قابل نصب است و یک ابزار ضروری برای اندازه گیری، دیباگ و افزایش پرفورمنس اپ های سمت کاربر مدرن است.

می توانید پلاگین آن را از Chrome Web Store دانلود کنید.

یا با npm نصب اش کنید:

npm install -g lighthouse

و بعد با این دستور آن را اجرا کنید:

lighthouse 

از برنامه نویسی Lighthouse برای ساختن ابزار بهینه سازی خودتان نیز می توانید استفاده کنید.

این ابزارهای وابسته به Lighthouse رو حتما چک کنید:

• webpack-lighthouse-plugin : یک پلاگین Lighthouse برای Webpack.
• treo : از Lighthouse  به صورت سرویس استفاده کنید و از پلن شخصی رایگان اش لذت ببرید.
• calibreapp : یک سرویس پولی بر پایه Lighthouse که بوسیله آن می توانید معیارهای کارایی وب سایت را بوسیله Google Chrome واقعی دنبال کرده ، بفهمید و بهبود دهید.
• lighthouse-cron : ماژولی برای دنبال کردن آمار و امتیاز Lighthouse در طی زمان.

۴. Lightcrawler

کار Lightcrawler این است که سایت شما را زیر و رو می کند و بعد هر صفحه را با Lighthouse باز می کند.

با نصب آن توسط npm شروع کنید:

npm install --save-dev lightcrawler

سپس آن را از طریق خط فرمان مثل دستور زیر باز کنید.البته آدرس سایت هدف و مسیر فایل JSON تنظیمات را هم باید برایش مشخص کنید:

lightcrawler --url  --config lightcrawler-config.json

فایل تنظیمات می توانید چیزی شبیه این باشد:

{
"extends": "lighthouse:default",
"settings": {
"crawler": {
"maxDepth": 2,
"maxChromeInstances": 5
},
"onlyCategories": [
"Performance",
],
"onlyAudits": [
"accesskeys",
"time-to-interactive",
"user-timings"
]
}
}

۵. YSlow

YSlow یک ابزار جاوا اسکریپتی بوک مارکی(Bookmarklet) است که می تواند به مرورگر شما اضافه شده و روی هر صفحه ای که بازدید می شود اجرا شود. این ابزار صفحات وب را آنالیز می کند تا علت کند بودن وب سایت را بر اساس قوانین Yahoo مشخص کند.

برای نصب YSlow باید بوک مارک لت آن را بکشید و روی نوار بوک مارک مرورگرتان رها کنید. اطلاعات بیشتر اینجا.

۶. GTmetrix

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

۷. Page Performance

این مورد یکی پلاگین کروم است که می تواند سریعا یک گزارش کارایی برای تان آماده کند.اگر مثل من همیشه تب های زیادی باز می کنید، این پلاگین روی تب فعال عمل کند.

۸. The AMP Project

پروژه AMP یا Accelerated Mobile Pages یک پروژه متن باز برای سریع تر کردن وب توسط گوگل است. AMP توسعه دهندگان را قادر می کند وب سایت هایی بسیار سریع با تجربه کاربری عالی برای همه پلتفرم های موبایل و دسکتاپ بسازند.این کار بوسیله حذف همه اسکریپت ها و اضافات سایت و نمایش محتوای اصلی وب سایت امکان پذیر شده است.

پروژه AMP در هسته خود ۳ کامپوننت اصلی دارد:

• AMP HTML : همان HTML است ولی با کمی محدودیت تا کارایی بالای آن تضمین شود.
• AMP JS : یک کتابخانه JavaScript که AMP HTML را رندر می کند.
• AMP Cache :  یک سیستم تحویل محتوا (CDN)  برای کش و تحویل صفحات AMP. با AMP Validator یا amphtml-validator می توانید از معتبر بودن صفحات AMP مطمئن شوید.

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

در قسمت بعد ابزارهای بهینه سازی در سطح کدنویسی و همچنین سمت سرور را بررسی خواهیم کرد…