← ወደ ባህሪያት ይመለሱ
Pro

Resource Waterfall

Resource Waterfall ገጹን በጊዜ መስመር ላይ የጠየቀውን እያንዳንዱን ጥያቄ ይስባል፣ እያንዳንዱ አሞሌ በእውነተኛው ደረጃዎቹ - ወረፋ፣ ዲ ኤን ኤስ፣ ቲሲፒ፣ ቲኤልኤስ፣ በመጠባበቅ እና በማውረድ - ለFCP፣ LCP፣ DOMContentLoaded እና ጭነት ከሚጠቁሙ ምልክቶች ጋር።

አንድ ገጽ ቀርፋፋ ሲሰማው፣ ጥያቄው ሁልጊዜ አንድ ነው፡ ምን እየጠበቀ ነው? የአሳሹ የራሱ መልስ በኔትወርክ ፓኔል ውስጥ ይኖራል፣ ይህ ማለት DevToolsን መክፈት፣ እየፈተሹት ባለው ገጽ ላይ መሳቢያ መትከል እና የጭነቱን መጀመሪያ ለመያዝ እንደገና መጫን ማለት ነው።

Resource Waterfall puts that timeline in a floating panel beside the page. ማንኛውም ጥያቄ ሲጀመር የተቀመጠ እና ሰዓቱ በሄደበት የተከፋፈለው ባር ሆኖ ይታያል፡ ተሰልፏል ወይም ቆሟል፣ ዲ ኤን ኤስ ፍለጋ፣ TCP ግንኙነት፣ TLS መጨባበጥ፣ አገልጋዩን በመጠባበቅ እና በማውረድ ላይ። ረዥም ሰማያዊ ክፍል ዘገምተኛ አገልጋይ ነው; ረዥም አረንጓዴ የስብ ፋይል ነው; ረዥም ግራጫ ማለት ጥያቄው ተቀምጧል ተራውን እየጠበቀ ነው. ልዩነቱ ምን ማስተካከል እንዳለብዎት ይወስናል.

በጊዜ መስመር ላይ የተሰረዙ ጠቋሚዎች በመጀመሪያ ይዘት ያለው ቀለም፣ ትልቁ ይዘት ያለው ቀለም፣ DOMContentLoaded እና ጭነት ያሳያሉ፣ በዚህም ተጠቃሚው ምንም ነገር ከማየቱ በፊት የትኛዎቹ ጥያቄዎች እንዳጠናቀቁ እና የትኞቹ ደግሞ በኋላ እንደሚሄዱ ማየት ይችላሉ። የማገድ መርጃዎች እና መሸጎጫዎች በእያንዳንዱ ረድፍ ላይ ተጠቁመዋል፣ እና አንድ ነጠላ የማገጃ ማጣሪያ ዝርዝሩን በትክክል የመጀመሪያውን ቀለም ወደሚያዘገየው ነገር ይቆርጣል።

በጣም መጥፎውን አጥፊ በፍጥነት ለማግኘት በአይነት፣ በዩአርኤል ፈልግ ወይም በዝግተኛ ወይም በትልቁ ደርድር። ለሙሉ ዩአርኤል፣ ፕሮቶኮሉ፣ ማስተላለፍ እና ዲኮድ መጠኖቹ፣ ሁኔታው ​​እና ሙሉ የደረጃ ዝርዝሮችን ለማግኘት ማንኛውንም ረድፍ ጠቅ ያድርጉ። ፓኔሉ በቀጥታ ዥረት ሲከፈት የሚመጡ ጥያቄዎች፣ እና JSON ን ወደ ውጭ ይላኩ ሙሉውን የጊዜ መስመር፣ ወሳኝ ክንውኖችን ይገለበጣሉ፣ ስለዚህ የአፈጻጸም ግኝቱ ያለ ስክሪን ሾት ለሌላ ሰው ሊሰጥ ይችላል።

የቀጥታ ቅድመ እይታ
example.com
Resource Waterfall 42 ጥያቄዎች · 2.4 MB · 5 መስጠት-ማገድ
ሁሉም ማገድ css js img xhr
0ms 600ms 1.20s FCP LCP
■ /products doc 38 KB 562ms
■ theme.min.css css 214 KB 341ms
■ vendor.js js 684 KB 712ms
hero.webp img 312 KB 604ms
▪ app.css css መሸጎጫ 3ms
analytics.js js 46 KB 488ms
ተሰልፏል ዲ ኤን ኤስ TCP/TLS በመጠባበቅ ላይ (TTFB) አውርድ
ቁልፍ ባህሪያት

እውነተኛ ደረጃ መከፋፈል

እያንዳንዱ ባር በተሰለፉ ፣ ዲ ኤን ኤስ ፣ ቲሲፒ ፣ ቲኤልኤስ ፣ በመጠባበቅ እና በማውረድ የተከፋፈለ ነው ፣ ስለሆነም ዘገምተኛ አገልጋይ ፣ ወፍራም ፋይል እና የተሰለፈ ጥያቄ ወዲያውኑ ተለይተው ይታወቃሉ።

ቀለም እና የጭነት ጠቋሚዎች

ለFCP፣ LCP፣ DOMContentLoaded እና ሎድ የተሰረዙ መስመሮች ተጠቃሚው ይዘትን ከማየቱ በፊት የትኞቹ ጥያቄዎች እንደተጠናቀቁ እና አሁንም ከሱ በኋላ እንደሚሄዱ ያሳያሉ።

የሚሠራ-ማገድ ማጣሪያ

አንድ ጠቅታ ዝርዝሩን ወደ ሃብቶች ይቀንሳል።

መሸጎጫ ስኬቶች ተጠቁሟል

ከመሸጎጫ የቀረቡ ግብአቶች ምልክት ተደርጎባቸዋል እና እንደ ሚስጥራዊ የዜሮ ባይት ረድፎች ከመታየት ይልቅ ምልክት ተደርጎባቸዋል፣ ስለዚህ መሸጎጫዎ በትክክል እንደሚሰራ ማረጋገጥ ይችላሉ።

አጣራ፣ ፈልግ እና ደርድር

በአይነት ጠባብ - ሰነድ ፣ CSS ፣ JS ፣ ምስሎች ፣ ቅርጸ-ቁምፊዎች ፣ XHR ፣ ሚዲያ - በዩአርኤል ይፈልጉ ፣ ወይም በዘገየ ወይም በትልቁ ደርድር በሴኮንዶች ውስጥ የከፋ ወንጀለኛን ለመድረስ።

ሊላክ የሚችል የጊዜ መስመር

ከቲኬት ጋር ለማያያዝ ወይም ከኋላ ካለው ሩጫ ጋር ለማነፃፀር ሁሉንም ፏፏቴ እንደ JSON ይቅዱ፣ ችካሎች፣ አጠቃላይ እና የጥያቄ ደረጃዎችን ጨምሮ።

የተለመዱ የአጠቃቀም ሁኔታዎች

በመጀመሪያ ቀለም ምን እንደሚዘገይ መፈለግ

ሀብቶችን ለማገድ ያጣሩ እና ትክክለኛውን የቅጥ ሉሆች እና ስክሪፕቶችን በጎብኚዎ እና በሚታየው ይዘት መካከል የቆሙትን ይመልከቱ።

ዘገምተኛ ሶስተኛ ወገንን በመያዝ ላይ

በዝግታ ደርድር እና ትንታኔ፣ ቅርጸ-ቁምፊ ወይም የውይይት አቅራቢ ከኮድዎ ጋር ምንም ግንኙነት ከሌለው ረጅም የጥበቃ ደረጃ ጋር ከላይ ሲታዩ ይመልከቱ።

ቀርፋፋ አገልጋይ ከትልቅ ፋይል በመንገር ላይ

የደረጃ ቀለሞችን አንብብ፡ በመጠበቅ ጊዜ የሚያሳልፈው ጊዜ የኋላ ወይም የሲዲኤን ችግር ነው፣ ለማውረድ የጠፋው ጊዜ የፋይል መጠን ችግር ነው። ማስተካከያው ለእያንዳንዱ የተለየ ነው.

መሸጎጫ እና መጭመቅ ማረጋገጥ

ዳግም ጫን እና ንብረቶቹ ከመሸጎጫ የሚመጡ መሆናቸውን እና የዝውውር መጠኖች ከዲኮድ መጠኖች በጣም ያነሱ መሆናቸውን ያረጋግጡ፣መጭመቂያው እንደበራ ነው።

ግኝቱን ለሌላ ሰው መስጠት

የጊዜ መስመሩን እንደ JSON ወደ ውጭ ይላኩ እና ከቲኬት ጋር አያይዘው ቀጣዩ ሰው ክፍለ ጊዜዎን ለማባዛት ከመሞከር ይልቅ ተመሳሳይ ቁጥሮችን እንዲያይ ያድርጉ።

እንዴት እንደሚጠቀሙ
1

Resource Waterfall ን ይክፈቱ

በDevSuite Pro dock ውስጥ የResource Waterfall አዶን ጠቅ ያድርጉ። ገጹ እስካሁን የጫነው ሁሉም ነገር በጊዜ መስመሩ ላይ ወዲያውኑ ይታያል።

2

ለሙሉ ምስል እንደገና ይጫኑ

ከመጀመሪያው ጥያቄ፣ ሰነዱ ራሱ እና የቀለም ምእራፎችን ጨምሮ ጭነቱን ለመያዝ ፓኔሉ ክፍት ሆኖ እንደገና ይጫኑ።

3

አስፈላጊ የሆነውን ነገር ቆርጠህ አውጣው

የማገጃ ሃብቶችን ብቻ ለማየት የማገጃ ቺፑን ይጫኑ ወይም እንደ js ወይም img አይነት ይምረጡ። በጣም መጥፎውን ወንጀለኛ ከላይ ለማስቀመጥ በዝግታ ደርድር።

4

ነጠላ ጥያቄን ይፈትሹ

ለሙሉ ዩአርኤል፣ ፕሮቶኮሉ፣ መጠኖቹ፣ ደረጃው እና የደረጃ-በደረጃ ክፍፍል በሚሊሰከንዶች ማንኛውንም ረድፍ ጠቅ ያድርጉ እና ከፈለጉ ዩአርኤሉን ይቅዱ።

5

ማስረጃውን ወደ ውጪ ላክ

JSON ወደ ውጪ መላክ ሙሉውን የጊዜ መስመር ከትኬት ደረጃዎች እና ድምር ጋር ይገለበጣል፣ ወደ ትኬት ለመለጠፍ ወይም በፊት እና በኋላ መዝገብ ሆኖ ያቆይ።

ለመሞከር ዝግጁ ነዎት?

DevSuite Pro ን በነፃ ይጫኑ እና 71+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።

ወደ Chrome ያክሉ ወደ Edge ያክሉ ወደ FireFox ያክሉ