آشنایی با ابزَار توسعه دهنده( Developer Tools یا DevTools )گوگل کروم

[vpsboard 2 مدیر کل انجمن]

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

 

 ابزار توسعه دهنده وب کروم (یا DevTools) به کاربرا این امکان رو میده که داخل مرورگرشون روی انواع وب سایت و برنامه های تحت وب مختلف کار کنن و نهایت استفاده رو ببرند.

1 – DNS Lookup / DNS

هنگام دسترسی به یک صفحه وب، مرورگر تمام منابعی که نیازمند DNS Lookup هستند و باید تا زمان تکمیل lookup منتظر بمانند را شناسایی می‌کند. DNSlookup مبتنی بر hostname ها می باشد. به عنوان مثال، اگر Google Analytics را در وب سایتتان اضافه کنید، نه تنها برای دامنه شما DNS lookup انجام می دهد بلکه برای google-analytics.com نیز این کار را انجام می‌دهد. (اگر اطلاعی درباره DNS Lookup ندارد این قسمت را بخوانید)

 

کاهش DNS Lookup کمک بزرگی به بهبود سرعت سایت می‌کند، به همین دلیل است که همواره توصیه می‌شود عناصر واسطه بیشتری را روی CDN قرار دهید زیرا این کار درخواست های DNS lookup را کاهش می‌دهد. همچنین باید توجه داشته باشید که در ابزارهای زیاد، اگر تست های سرعت را چندین بار اجرا کنید، آن‌هاDNS را cache می کنند، به این معنی که این اطلاعات را در تست های بعدی مشاهده نخواهید کرد. اما lookup همچنان برای بازدیدکنندگان جدید که وارد سایت شما می شوند انجام می‌شود. سایت WebPageTest که از نگاه بنده بهترین ابزار برای آنالیز درخواست های http و همینطور تجزیه و تحلیل آبشاری سایت هست، برای رفع این مشکل راه حل مناسبی به نام First View و Repeat View دارد. از این طریق می توانید تصویر کلی بهتری را مشاهده کنید.
همچنین می توانید از resource hint هایی مانند DNS prefetching استفاده کنید که به مرورگر امکان انجام DNS lookup در یک صفحه در پس زمینه در حالی که کاربر در حال استفاده از مرورگر است را می‌دهد. این امر باعث کاهش latency یا همان تاخیر در DNS lookup در زمان کلیک کاربر روی یک لینک انجام می‌شود. مثال زیر را مشاهده کنید:

 

1 2 3 4 5 6

<!— Prefetch DNS for external assets —> <link rel=“dns-prefetch” href=“//fonts.googleapis.com”> <link rel=“dns-prefetch” href=“//www.google-analytics.com”> <link rel=“dns-prefetch” href=“//cdn.domain.com”>

2 – Initial Connection / Connect (ارتباط اولیه یا اتصال)

ارتباط اولیه که با عنوان ارتباط TCP و ارتباط در بعضی ابزارها شناخته می‌شود، مجموع زمان مورد نیاز برای ایجاد یک ارتباط TCP است. این مورد برای ایجاد یک ارتباط بین یک کاربر یا هاست محلی و سرور استفاده می‌شود و روشی سه مرحله ای می‌باشد که نیازمند کاربر و سرور به منظور تبادل بسته ها قبل از شروع تبادل اطلاعات است.

 

کاهش زمان TCP کمی دشوارتر است. بهترین نقطه برای شروع این است که مطمئن شوید روی یک هاست وب سریع با تاخیر پایین سایت شما پیاده شده است. این handshake با ارسال داده از طرف کاربر در حین SYN اتفاق می‌افتد، بنابراین به ارتباط ها امکان جایگزینی در حین handshake را می‌دهد.
همچنین preconnect را فراموش نکنید که به مرورگر اجازه می‌دهد ارتباط‌های ابتدایی را قبل از ارسال واقعی درخواست HTTP به سرور ایجاد کنید. مثال زیر طرز فعال کردن preconnect را نشان میدهد.

 

1 2 3

<link href=‘https://cdn.mizfa.com’ rel=‘preconnect’ crossorigin>

3 – SSL / TLS

SSL، که در بعضی ابزار ها به عنوان SSL negotiation نیز معرفی می‌شود، زمان کلی مرورگر برای اجرای SSL/TLS handshake می‌باشد. مشخصاً این را زمانی مشاهده می‌کنید که CDN و یا هاست شما روی HTTPS فعال باشد.

 

در زیر تعدادی روش برای افزایش سرعت سایت هایی که روی HTTPS اجرا می شوند آورده شده است.

1.  HSTS مخفف عبارت HTTP Strict Transport Security می‌باشد، یک تقویت کننده امنیت است که صرفاً دسترسی مرورگرها فقط از طریق HTTPS محیا می‌کند. این ابزار با حذف redirect های HTTP و HTTPS غیر ضروری باعث کمک به عملکرد سرعت وب سایت شما می‌شود.
2. خاتمه دادن زودهنگام در کاهش تاخیر SSL/TLS handshake بسیار مهم است. با توزیع محتوا به کمک CDN تاخیر هر رفت و برگشت بین کاربر و سرور را کاهش می‌دهید. یک CDN به شما اجازه می دهد ارتباط نزدیکتر به کاربر را برقرار کنید.
3. OCSP stapling رویکردی جایگزین برای تعیین معتبر بودن یا نبودن یک سند SSL است. این رویکرد به وب سرور اجازه می‌دهد تا معتبر بودن گواهینامه ها را بررسی کند و نیاز به درخواست صدورگواهی از جانب کاربر را حذف کند و درخواست دیگر را کاهش دهد. هنگامی که با HTTPS سروکار دارید، OCSP به طور خودکار فعال می‌شود.
4. و البته HTTP/2 را داریم که دومین به روز رسانی عمده پروتکل HTTP از زمان HTTP1.1 می‌باشد. ویژگی های عملکردی HTTP/2 شامل بهبود سرعت مرور وب و همچنین افزایش امنیت می‌باشد.

4 – TTFB / Waiting

TTFB که خلاصه time to first byte است، مقدار زمانی است که طول می‌کشد تا یک کاربر یک درخواست HTTP ایجاد کرده و اولین بایت داده را از وب سرور دریافت کند. در Pingdom این مورد به عنوان زمان انتظار یا wait time شناخته می شود. TTFB یک جنبه مهم از بهینه سازی وب سایت است زیرا هرچه TTFB سریع‌تر باشد، منبع درخواستی سریع‌تر به مرورگر ارسال می‌شود. به طور میانگین هر چیزی با TTFB کمتر از 100 میلی ثانیه فوق العاده است. هرچیزی با میانگین TTFB 200 تا 500 میلی ثانیه استاندارد است و بین 500 میلی ثانیه تا 1 ثانیه کمتر از ایده آل و هرچیزی با TTFB بزرگتر از 1 ثانیه احتمالاً باید مورد بررسی قرار گیرد.

 

یکی از راه های ساده بهبود TTFB پیاده سازی caching روی سرور است. به عنوان مثال، اگر از وردپرس استفاده می کنید، پلاگین WordPress Cache Enabler می تواند یک فایل Cache استاتیک در قالب HTML روی سرور شما ایجاد کند. این مورد به کاربران اجازه می‌دهد تا از فرایند فشرده سازی منابع جلوگیری کنند، بنابراین صفحه با TTFB سریع‌تری تحویل داده می‌شود.

TTFB قبل از CDN

در اینجا مثالی از آزمایش TTFB بدون استفاده از CDN را مشاهده می‌کنید.

 

TTFB با CDN

در ادامه مثال قبل را با استفاده از CDN تکرار کردیم.

 

همانطور که مشاهده می کنید، با استفاده از CDN مقدار TTFB به نصف کاهش پیدا کرد. البته بسته به موقعیت سرور و POP ها این موارد متفاوت خواهند بود. از جمله راه های دیگر برای افزایش سرعت TTFB می توان به روز بودن Nginx و Apache و همچنین مدیریت منابع سرور از جمله CPU و IO و همینطور اسکریپت و پلاگین‌های نصب شده اشاره کرد.

5 – دانلود محتوا (Content Download)

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

هنگامی که درباره زمان دانلود محتوا صحبت می‌کنیم فشرده سازی تصویر نقش بزرگی در این مورد ایفا می کند. طبق HTTP Archive، از ژوئن 2017 تصاویر به طور متوسط 61% از حجم وب سایت ها را به خود اختصاص می دهند. مقالات جامع ما درباره بهینه سازی عکس می‌تواند بسیار به شما کمک کند و البته استفاده از CDN می تواند یکی از آسان ترین راه ها به منظور کاهش زمان دانلود محتوا باشد، زیرا از این طریق محتوا را از POP های نزدیک به کاربران به آن ها عرضه می کنید. استفاده از CDN باعث کاهش TTFB نیز می شود.

از راه های دیگر به منظور کاهش زمان دانلود می توان به استفاده از javascript و css تنها در موارد مورد نیاز و فشرده سازی با Gzip اشاره کرد. برای فشرده سازی فایل‌ها توسط سرور به مقاله جامع ما درباره نحوه فعال سازی gzip مراجعه نمایید.

6 – محتوای بارگذاری شده DOM

DOM مخفف Document Object Model می باشد. هنگامی که از inspector کروم یا فایرفاکس استفاده می‌کنید تبی دارد به نام elements در واقع این تب در حال مشاهده نمایه بصری از DOM هست، Chrome DevTools پس از دستکاری در صفحه DOM را با HTML یا javascript نمایش می‌دهد. همچنین می توانید به آن به عنوان HTML تجزیه شده نیز نگاه کنید.
هنگامی که به بررسی سرعت صفحات وب سایت می پردازیم، همواره باید مواردی که ممکن است DOM را مسدود کنند و باعث ایجاد تاخیر در زمان بارگذاری می‌شوند را در نظر داشته باشید. این موارد به عنوان render blocking resources در نظر گرفته می‌شوند، مانند HTML، CSS و جاوا اسکریپت. بیشتر ابزارهای تست سرعت سایت مجموع محتوای DOM را نمایش می دهند در حالیکه این زمان با زمان کلی بارگذاری متفاوت است.

 

7 – زمان بارگذاری (Load Time) / بارگذاری کامل (Fully Loaded)

Load Time که با عنوان Fully Loaded نیز در بعضی ابزار ها شناخته می‌شود، زمان کلی پایان دانلود، رندر و نمایش به کاربر است. این مورد از معیارهای بسیار مهم است که باید مورد توجه قرار گیرد چرا که این زمان در Devtools واقعی تر از ابزارهای تست آنلاین است، به این علت که ابزارهای تست سرعت سایت لوکیشن ایران را ندارند و شما می‌توانید با مرورگر خود یک ابزار تست سرعت سایت در ایران باشید.

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

8 – Data Transferred / Bytes In / Page Size

Data Transferred در Devtools کروم (دیتا انتقال داده شده)، که در WebPageTest به عنوان Bytes In شناخته می‌شود، و در Pingdom به عنوان Page Size، اندازه کلی تمامی asset ها (تمام فایل‌های پیوست شده در سند html) در صفحه وب می باشد. هرچه این مقدار کوچکتر باشد، بهتر است. توصیه های ما درباره کاهش زمان بارگذاری محتوا که در بالا آورده شد را دنبال کنید و در عوض Data Transfered وب سایت شما کاهش پیدا می‌کند.

تا سال 2016 متوسط اندازه صفحه، کمی بیشتر از 2 مگابایت بود که بسیار بزرگ است. اندازه صفحه وب از سال 2010 تا 2016 317% افزایش یافته و به مقدار 1530 کیلو بایت رسیده است. پیشنهاد می کنیم حداقل 1 مگابایت یا کمتر برای اندازه صفحه وب سایت خود در نظر بگیرید. اگرچه این امر در تمام محیط ها امکان پذیر نیست.

9 – درخواست های HTTP

درخواست‌ها مجموع کلی درخواست های HTTP تولید شده در وب سایت شما را نشان می دهند. هر فایل پیوست شده (CSS، JavaScript، Image) درخواست مربوط به خود را تولید می‌کند. در مجموع هرچه درخواست های HTTP صفحه شما بیشتر باشد، زمان بارگذاری هم طبیعتا بیشتر می‌شود.

روش های زیادی برای کاهش تعداد درخواست ها وجود دارند که می توان به موارد زیر اشاره کرد:

• قرار دادن کدهای کوچک جاوا اسکریپت به صورت درون خطی
• کاهش asset هایی مانند اسکریپت های واسطه و پلاگین هایی که درخواست های خارجی زیادی تولید می کنند.
• استفاده نکردن از framework های واسطه که به آن ها نیاز ندارید.
• کم کردن کد.
• ترکیب فایل های css و javascript.

10 – کدهای وضعیت (Status Codes)

کدهای وضعیت یا همان Status Codes ، که با عنوان کدهای خطا (Error) و کدهای پاسخ سرور (Server Response Codes) نیز شناخته می‌شوند، پیام هایی هستند که شامل اطلاعات کامل وضعیت ها درخواست بین کاربر و سرور می باشند. کاربر درخواست خود را به یک سرور HTTP ارسال می کند که میزبان یک وب سایت است، سپس سرور پیام پاسخ را در قالب یک کد بازمی گرداند.

اگر مشکلی در یک درخواست HTTP باشد، لیستی از کدهای وضعیت وجود دارد که مرورگر شما را با استفاده از آن مطلع می سازد تا بتوانید منبع مشکل را پیدا کنید. روشی که مرورگر پاسخ را مدیریت می‌کند بسته به کد و فیلد header پاسخ دارد. به عنوان مثال، خطای Not Found 404 بدان معناست که محتوا دیگر وجود ندارد یا حذف شده است.