የJavaScriptን በቅድሚያ ማስተካከል (Defer/Async) በድህረገፅዎ ላይ TBT ጊዜን ለመቀነስ

የተዘገየ JavaScript ጭነት በ browser የገፅ ይዘትን ለማሳየት የሚጠቀምበት JavaScript ፋይሎችን በትክክለኛው ቅደም ተከተል በመዘገየት የTotal Blocking Time (TBT) ጊዜን ለመቀነስ የሚያገለግል መንገድ ነው። በቀላሉ፣ ለአስፈላጊ ያልሆኑ script ፋይሎች defer ወይም async መጨመር የአስደሳች ስራ ክፍል ታነሽ እንዲሆን ያደርጋሉ፤ ከዚህም ተነስቶ ተጠቃሚው ገፁን ፈጣን ያይ፣ ቀድሞ ይጫን ይችላል፣ Core Web Vitals ሜትሪክስም ይሻሻላል። በ site ውስጥ የተዘገየ JavaScript ጭነት ለመተግበር በመጀመሪያ አስፈላጊ የሆኑ ፋይሎች መለየት ይኖርበታል፣ በየተያያዘ script ፋይሎች defer የተለመደ ነው፣ በተነጻ ሶስተኛ ወገን script ፋይሎች async ይምረጡ፣ እና ከማሻሻያ በኋላ PageSpeed Insights, Lighthouse እና Chrome DevTools በመጠቀም TBT ዋጋውን መለካት ያስፈልጋል።

በዘመናዊ የድህረገፅ ስራዎች የአፈፃፀም ችግር ብዙውን ጊዜ ከምስል አይደለም፣ ከያለቀስታ JavaScript አጠቃቀም ነው። በ e-commerce ገፅ ላይ የምርት ማጣሪያዎች፣ የቀጥታ ድጋፍ፣ የማስታወቂያ ፒክሴል፣ የትንበያ ኮድ፣ የአስተያየት ተጨማሪዎች፣ የA/B ፈተና መሣሪያዎች እና የቴማ script በአንድ ጊዜ የተጫኑ ከሆነ የ browser ዋና ስራ ክፍል ረጅም ጊዜ ይታገዳል። ይህ በተለይ በሞባይል መሳሪያዎች ላይ የተጠናቀቀ ነው። ተጠቃሚው በመጀመሪያ ራስ ርዕስን ቢያይም፣ ማውከል ሲሞከር ምንም ምላሽ ሊያገኝ አይችልም፣ በLighthouse መዘገበ ላይ Total Blocking Time ከፍተኛ ይታያል።

በዚህ መምሪያ ውስጥ defer እና async ባህሪዎች ምን እንደሚያደርጉ፣ የትኛውን መተግበር እንደሚገባ፣ በWordPress እና በብቻ የተጻፉ ሶፍትዌር ፕሮጀክቶች ውስጥ እንዴት እንደሚተግበሩ፣ በመለካት ላይ ምን ይጠበቅ እንደሚገባ፣ የTBT ግንዛቤ እና ውስጥ የሚገኙ ፍትዋት በደረጃ ደረጃ እናሳያለን። በHostragons መስመር ላይ የተደረጉ ገፆች ለብዙ የድህረገፅ መስፈርቶች ይስማማሉ፤ በተጨማሪም ትክክለኛ የhosting, CDN, SSL እና የcache ውሳኔዎች የJavaScript ኦፕቲማይዜሽንን እንዴት እንደሚያግዙም እናቀርባለን። Hostragons ድረ-ገጽ ሆስቲንግ ፓኬጎች

TBT ምንድነው እና ለ JavaScript ስለምን በጣም የተያያዘ ነው?

TBT የ Total Blocking Time አቀማመጥ ነው፣ እና የገፁ ለተጠቃሚ ግንዛቤ በዝግጅት ሲያስቀመጥ የኩነት ስር የሚያንገባ ዋና ትራድ የመሰከሩን ይለካል። Lighthouse ላቦራቶሪ ሙከራዎች ውስጥ፣ First Contentful Paint ከ Time to Interactive በመካከል ያለው የ50 ሚሊሴካንድ በላይ የሚቆይ አጭር ሥራዎች ብዛት TBT እንደጨመሩ ያደርጋሉ። ለምሳሌ፣ አንድ JavaScript ስራ 180 ms ይቆያል ብለህ አስባ፤ ከመጀመሪያው 50 ms በኋላ የቀረው 130 ms የ block ጊዜ በ TBT ውስጥ ይታያል።

ይህ ሜትሪክ ለተጠቃሚ ተሞክሮ አስፈላጊ ነው። ምክንያቱም መጎብኘት አድርገው ገፁ ከተከፈተ በኋላ ሰው መናብሩን፣ ወይም ሱቅ ላይ ያለውን Add to Cart አዝራሩን፣ ወይም የፍለጋ ቦታውን ሲያጫውቱ በ browser ውስጥ JavaScript ከሚሰራ በሆነ ጊዜ ግንዛቤ ይዘገያል። ተጠቃሚው ይህን እንደ መዝጋት፣ የግንዛቤ ዘግይት፣ ወይም የተበላሸ መረጃ እንደሚቆጠር ያያል። በ2026 SEO መደበኛ መስፈርቶች፣ Google ገፁን በአንድ መደብ አያደርግም፣ ነገር ግን በፍጥነትና በቆይታ የግንዛቤ ያቀርባሉ የሚሉ ገፆች ለተጠቃሚ ተሞክሮ እና ለተለዋዋጭ ውጤት አስተሳሰብ ያስገኛሉ።

የፍጥነት ከፍተኛ TBT የተደጋጋሚ ምልክቶች

• በ Mobile PageSpeed Insights ሪፖርት TBT ወደ 300 ms በላይ ከተሄደ።
• በ Lighthouse ሪፖርት Reduce JavaScript execution time ወይም Minimize main-thread work ማሳሰቢያ ማየት።
• ገፁ ቢታይም መናብሩ፣ slider፣ filter ወይም form ቦታዎች እንደዘግይት የሚሰሩ።
• የ 3ኛ ጥፊያ ማስታወቂያ፣ የቀጥታ ድጋፍ ወይም አንሌይዚስ script በሪፖርት ከፍተኛ ወጪ እንደሚታየው።
• በተለይ የመግቢያ Android ስልኮች ላይ ማንበብና መጫወት የጊዜ ዘግይት መከራት።

በጣም የሚመከሩት TBT ከ 200 ms በታች ቆይታ ከፍተኛ ይቆጠራል። ለተዘጋጅተ የ e-commerce ወይም SaaS አማያያይቶች ወደዚህ መድረስ ለማድረግ deferና async ብቻ በመቀነት ሊሆን ይችላል፤ ግን ኮድ መከፋፈል፣ የበደለ ፓኬጅ ማስወገጃ፣ caching፣ የ server መልስ ጊዜ ማሻሻል፣ እና የ CSS አስፈላጊ ማስተካከል ይደርሳሉ። ነገር ግን የ JavaScript የቅርብ ዘግይት ጭነት በብዙ ፕሮጀክቶች በመጀመሪያ የሚደረግ እና ፈጣን ውጤት የሚሰጥ ማሻሻያ ነው።

Defer እና Async ምንድነው?

HTML ውስጥ script ታጣቂው በመደበኛ ሁኔታ ሲጠቀም ፣ browser የHTMLን መለያየት ይቆማል፣ JavaScript ፋይሉን ይወስዳል፣ ይከፍታል ከዚያም የገፁን አሰራር ይቀጥላል። ይህ ባህሪ ለአስፈላጊ script አንዳንድ ጊዜ አስፈላጊ ሊሆን ይችላል፣ ነገር ግን ለፋይል ሁሉ ሲጠቀም የተጨማሪ ጊዜ የሚጠየቅ ያደርጋል። defer እና async attributes ይህን ባህሪ በማስተካከል ፋይሉን ማውረድና መከፈት በተለያዩ ህጎች ይደረጋሉ።

Defer እንዴት ይሰራል?

defer የተጨመረ script ፋይል በHTML በመለያየት ሂደት በመካከለኛ ይውረዳል፤ ነገር ግን መከፈቱ ከHTML ሰነዱ ሁሉ አብራሪ ከተለያየ በኋላ ይከናወናል። ከሆነ defer የተጠቀሙ ከዚህ በላይ ፋይሎች፣ በHTML ውስጥ ተደርጓቸው ቅደም ተከተል እየተከተለ ይከፈታሉ። ስለዚህ በአንዱን በሌላው script የሚጠየቅ ፋይሎች ብዙ ጊዜ የተረጋጋ አማራጭ ነው። ለምሳሌ የLibrary ፋይል በመጀመሪያ፣ በኋላ በእሱ የተያያዘ theme script ካለ defer ይሆናል።

የአይነቱ አጠቃቀም እንደዚህ ይሆናል፡ <script defer src=/js/app.js></script>. በዚህ አጠቃቀም app.js ፋይሉ የገፁን መጀመሪያ ምሳሌ አልቆምም፣ ከDOM ዝግጅት በኋላ ቅደም ተከተል ይከፈታል። በዘመናዊ browser ውስጥ defer በጣም የተስተካከለ ነው፣ ለቀይ script ፋይሎችም የታመነ optimization መሣሪያ ነው።

Async እንዴት ይሰራል?

async የተጨመረ script ፋይል እንዲሁም በHTML በመለያየት ሂደት ተውልዳል፣ ነገር ግን የውሉ ማቅረብ ሲጨርስ በዚያው እንዲያውቅ ይከፈታል። በዚህ ጊዜ HTML መለያየት አግልጋሎቱ ጥቂት ሊቆም ይችላል። async በፋይሎች መካከል ቅደም ተከተል አይሰጥም። የተመዘገበ በመጀመሪያ ይከፈታል። ስለዚህ በተወሰኑ በራሱ የሚሰሩ analysis, ad, tracking pixel, external widget ወይም social media script ለተለያዩ ይሻላል።

የአይነቱ አጠቃቀም፡ <script async src=/js/analytics.js></script>. ይህ ፋይል ሌላ local script በመጀመሪያ እንዲከፈት መጠበቅ አይገባውም። ካለ analytics.js በገፁ በኋላ የተቀመጠ variable ወይም jQuery እንደሚታወቀ library የሚያያዝ ከሆነ async ስህተት ሊያስከትል ይችላል። ስለዚህ async ፈጣን ነው፣ ነገር ግን ጥንቃቄ አግባብ ያስፈልጋል።

Defer እና Async የተወዳዳሪ ሰንጠረዥ

አስተማማኝ ደንብ ይህ ነው፡ ፋይሉ በተከታታይ መሰራት አስፈላጊ ከሆነ defer ይጀምሩ። ፋይሉ በግልፅ ከሆነ async ይመልከቱ። የሚጠባበቁ ከሆነ staging አካባቢ ላይ መጀመሪያ defer ይፈትኑ፣ የኮንሶል ስህተቶችን እና አስፈላጊ ተግባራትን ያላቸውን ይሞሉ። Staging አካባቢ እና የመጠባበቂያ መመሪያ

የተዘጋጁ ጃቫስክሪፕት የመጫኛ ሂደት እንዴት እንደሚደረግ በእርዳታ የሚያስተምረው ዕቅድ

ሁሉንም ጃቫስክሪፕት ትኬት ላይ defer ወይም async መያደር በአጭሩ ጊዜ የድር ጣቢያውን ውጤት ሊያሳድግ ይችላል፤ ነገር ግን በስራ ውስጥ ላይ፣ ክፍያ፣ ፍለጋ፣ ምናሌ፣ ፎርም ማረጋገጫ ወይም ሰረታ ያሉ ጠቃሚ ተግባሮችን ሊያበላሽ ይችላል። በትክክል ተግባር ለማድረግ ምርመራ፣ ምድብ ማድረግ፣ ትንሽ ለውጥ፣ መሞከርና መከታተል የሚከተለው ዙርያ ማስጠቀም አስፈላጊ ነው።

1. የአሁኑን ውጤት መለካት

መጀመሪያ ከመጀመርዎ በፊት የመሳሰሉ ውጤት ያዘጋጁ። PageSpeed Insights በአንድ ላይ ሞባይልና ዴስክቶፕ ውጤትዎን ያውሩ። Lighthouse ሪፖርት ላይ TBT፣ First Contentful Paint፣ Largest Contentful Paintና Speed Index ውጤቶችን ያከታተሉ። Chrome DevTools Performance ሴክሽን ላይ ዋነኛውን ስራ ሰንጠረዥ ይመልከቱ፤ ረጅም ቢሆኑ ቢሎክ የጃቫስክሪፕት መተላለፊያ፣ አውጪና መስራት ወጪ እንደሚያመለከት ይወቁ።

የመጀመሪያው ውጤት ተግምጋሚ ሰንጠረዥ ሊያቀርቡ ይችላሉ፡፡ ሞባይል TBT 780 ms፣ JavaScript execution time 2.8 ሰከንድ፣ main-thread work 4.5 ሰከንድ። ከማሻሻያ በኋላ ሞባይል TBT ወደ 280 ms ከወረደ ወደ 64% ማሻሻያ ይደርሳል። እንደዚህ ዓይነት ውጤቶች የተደረጉት ለውጦች ምን እንደተጠቀሱ በቡድን ውስጥ ማስታወቅ ያሳለፋል።

2. የscript አይነቶችን ዝርዝር ያዘጋጁ

በገጽ ምንጭ ኮድ ወይም Network ሴክሽን ላይ የሚጫኑ ሁሉንም JavaScript ፋይሎች ይዝረዝሩ። የእያንዳንዱ ፋይል ምንጭ፣ መጠን፣ መቼ ይወስደዋልና ግንኙነቶቹ ይታወቁ። ፋይሎችን በሚከተሉት ምድቦች ለውጥ ማድረግ ቀላል ያደርጋችኋል:

• አስፈላጊ script ፋይሎች: ለመጀመሪያ ግምት ወይም ዋነኛ ኔቪጌሽን በድንገት የሚያስፈልጉት ኮድ።
• በተያያዙ script ፋይሎች: ቲማ፣ slider፣ filter፣ ጋለሪ እና መተግበሪያ ሞዱሎች።
• በተለየ script ፋይሎች: Analitik፣ ማስታወቂያ፣ pixel፣ chat እና ማህበረሰብ ሚዲያ አካላት።
• የማይወድቁ ወይም ቆሻሻ script ፋይሎች: የተዘጋጀ እንዳይጠቀም የተያዘ ፋይሎች።
• በሁኔታ የሚጫኑ script ፋይሎች: እንደ ኒደር በቅድሚያ ወይም በተወሰነ ገጽ ላይ ለማረጋገጫ የሚፈልጉት።

ጥሩ አሻሻያ በዘወትር defer መጨመር ሳይሆን፣ ምንም የማይያደር ፋይልን ማጥፈት ነው። 90 KB ተጠናቀቀ ፋይል በሞባይል በመተላለፊያና በመስራት ከ 300 ms በላይ ወጪ ሊያመጣ ይችላል። ስለዚህ በመጀመሪያ ያልተያዘውን ማጥፈት፣ ከዚያም የቀረውን ማሻሻያ ማድረግ የተገቢ ስራ ነው።

3. ለdefer የሚሆኑ ፋይሎችን ይለዩ

በአብዛኛው ዋነኛ ቲማ script፣ ምናሌ ህይወት፣ slider ኮድ፣ የምርት ጋለሪ ሞዱሎችና መተግበሪያ bundle ፋይሎች defer ለማድረግ ጥሩ ናቸው። ነገር ግን አስፈላጊ የሆነው፣ script በ document.write ያሉ አሮጌና የተቆለፈ ዘዴዎች ላይ አይተዛዛም ይሆናልና፣ እና በDOM እንደዘገበ በኋላ ቢሰራ ችግር አይደርስም።

በWordPress ቲማ ላይ jquery-migrate፣ ቲማ ዋነኛ ፋይልና አክል ፋይሎች የተያያዙ ግንኙነቶች ሊኖሩት ይችላሉ። jQuery ኮር አይነትን async ማድረግ በብዙ ጣቢያዎች ረገድ ያስከትላል፤ ብዙ አክልዎች jQuery ቅደም ተከታታይን ይጠብቃሉ። ከዚህ በፊት ለjQuery የተያያዙ ፋይሎችን በትክክል defer ማድረግ ወይም በአክል ደረጃ የተሻሻለ የማጫኛ አማራጮችን መጠቀም የተሻለ ነው። WordPress ፈጣን ኦፕቲማይዜሽን መመሪያ

4. ለasync የሚሆኑ ፋይሎችን ይለዩ

Google Analytics፣ የማስታወቂያ ትኬቶች፣ Facebook Pixel፣ LinkedIn Insight Tag፣ የውጭ chat widget እና የማህበረሰብ ኮድ async ለማድረግ ተወዳዳሪዎች ናቸው። ነገር ግን ሁሉ script የሚተላለፍ አንድ አይነት አይደለም። በአንዳንድ የቀጥታ ድጋፍ መሣሪያዎች ገጹ በመጫን መደበቅ ይፈልጋሉ፤ በአንዳንድ ማስታወቂያ ሲስተሞች container ቅደም ተከታታይን ይጠብቃሉ። ስለዚህ የማብራሪያ ሰነድ አስፈላጊ ነው።

በተለየ የanaliz ኮድ async ማድረግ በተጠቃሚ ልምድ ጥፋት አያደርግም። ነገር ግን የውሂብ ጥፋትን ለማሳካት በትክክል ተነሳሽ መቆጣጠር ያድርጉ። ታግ ማከማቻ ከሚጠቀሙ በኋላ ታጎቹን በአንድ container ውስጥ ማድረግ ከማድረግዎ በፊት ታግ trigger መግቢያን ያስተካክሉ። ለምሳሌ የአስተያየት ፎርም ያልባወረ ገጽ ላይ የአስተያየት መከታተል ኮድ፣ የምርት ገጽ ያልባወረ ላይ የምርት መተግበሪያ script አይጫን።

5. በሁኔታና በክስተት የሚተጋገዱ የማጫኛ ዘዴዎችን ይጨምሩ

defer እና async ጥሩ መጀመሪያ ናቸው፤ ነገር ግን የሚበለጠ ማሻሻያ ለ JavaScript ፋይሎች በተጠቃሚ እንቅስቃሴ መጫኛ ለTBT ትልቅ ልዩነት ያመጣል። የቀጥታ ድጋፍ ሳጥን ገጹ በመጫን አይደለም፣ ተጠቃሚው ከ5 ሰከንድ በኋላ ወይም የእርዳታ ቁልፍ በመጫን ይጫን። የካርታ embed ኮድ ተጠቃሚው ወደ እርዳታ ክፍል በመሳተፍ ይጫን። የቪዲዮ አጫዳ script ተጠቃሚው የማጫያ ቁልፍን በመጫን ይጫን።

ይህ አቅም በይዘት ሳይቶችና በኩርፖሬት ድር ጣቢያዎች ላይ በሚገኝ በጣም ይረዳል። ምክንያቱም ተጠቃሚው በእያንዳንዱ ገጽ ላይ ሁሉንም widget አያስፈልግም። ከመጀመሪያ ውጤት 200 KB JavaScript ማሳወጥ በደካማ ሞባይል ፕሮሴሰሮች ላይ TBTን በብዙ ms ይቀንሳል።

6. ይዘጋጁና በደንብ ይሰራቡ

ለውጦቹን በማይኖር ስራ አውታረ ጣቢያ ላይ ከማድረግ በፊት በተመዘገበ አውታረ ጣቢያ ይሞክሩ። ዋነኛ ገጽ፣ ምድብ ገጽ፣ የምርት ወይም የአገልግሎት ገጽ፣ የእርዳታ ገጽ፣ የግባት ፎርምና የክፍያ ሂደት ላይ በተጠቃሚ ሞክር ይሰራቡ። በ browser console ላይ ስህተቶች አሉ እንደሆነ ይመልከቱ። ምናልባት "Cannot read property", "is not defined", "undefined function" ስህተቶች ቅደም ተከታታይ ወይም ግንኙነት ችግር እንደሆነ ይጠቁማሉ።

በሕይወት ጣቢያ ላይ የሚደረጉትን ለውጦች በትንሽ ቡድን ያስተላልፉ። መጀመሪያ የተለየ script ፋይሎችን ያሻሽሉ፣ ከዚያ ዋነኛ ቲማ script ላይ ይሂዱ። እያንዳንዱ ለውጥ በኋላ Lighthouse ሪፖርት በአንድ አውታረ እና መሳሪያ ስምልል ያድርጉ። በአንድ ቡድን ምርመራ አትተገብሉ፤ 3 ሙከራ መስተዋት ትክክል ውጤት ይሰጣል።

WordPress ሳይትዎች ላይ Defer እና Async ከፍተኛ ስራዎች ማስታወሻዎች

በWordPress ኢኮስስተም JavaScript ፋይሎች በቴማ እና እቃዎች wp_enqueue_script ፋንክሽን ይጫናሉ። ከ2026 ጀምሮ በዘመናዊ WordPress ቅርጸት script strategy በተቆጣጣሪ መንገድ ማዘጋጃት ይቻላል። ነገር ግን አሮጌ ቦታዎች፣ page builder እቃዎች እና የማይስማማ optimization እቃዎች ግጭት ሊያስከትል ይችላሉ።

የperformance plugin ትጥቀም ሲደርስ፣ JavaScript ሁሉንም በአንድ ቀንድ መቆሰር ሳይሆን exclusion list ማቅረብ ይመከራል። የክፍያ ገፅ፣ የአባል ግባይ፣ የአስተዳዳሪ ቀለጠ አምባ፣ የደህንነት ማረጋገጫ እና captcha script በጥንቃቄ ልትታዩ ይገባቸዋል። WooCommerce የሚጠቀሙ ሳይትስ ላይ የቅርብ ህዋሳት፣ የክፍያ ግንዛቤ script እና variation selector በውስጥ በትክክል መሞከር አስፈላጊ ነው። ዋሩ ኮመርስ ሆስቲንግ መፍትሕ

WordPress ላይ በተግባር የሚተገበር ስርዓት ይህ ሊሆን ይችላል፦ መጀመሪያ አይጠቀሙት eklentileri ያስወግዱ። ከዚያም ለአስፈላጊ ገፆች ብቻ የሚያስፈልጉ እቃዎችን conditional ያድርጉ። በኋላ በቴማ እና plugin script ላይ defer ይፈትኑ። በመጨረሻ በበለጠ አካባቢ የሚገኙ script ላይ async ወይም በርዝማዊ እንዲጫኑ ይጠቀሙ። ይህ ዘዴ በአንድ ጊዜ ትልቅ ጉዳት እንዳይፈጠር ይረዳል።

የአንደኛ ልዩ ሶፍትዌርና Framework ፕሮጀክቶች ላይ የሚወሰኑ ነገሮች

React, Vue, Angular, Next.js, Nuxt ወይም ተመሳሳይ ዘመናዊ መዋቅሮች ላይ የJavaScript አፍጻጸም ግን በHTML ታጅቦ defer ማከል ብቻ አይደለም። Package መጠን፣ code splitting፣ tree shaking፣ dynamic importና hydration ወጪዎች TBT እንዲሁም ተወላጅ ናቸው። በአንድ ብዙ bundle ፋይል 700 KB ከሆነ፣ defer ተጠቅመም ሆነ በቀጥታ ማሰራት ላይ main thread አይቀርም።

በልዩ ሶፍትዌር ፕሮጀክቶች route-based code splitting ይጠቀሙ። ተጠቃሚው በመነሻ ገፅ ላይ ሳለ፣ admin panel፣ ግራፊክ ቤተ-መዝገቦች ወይም የተከታታይ አርክት ኮድ አይወርድ። ከባድ ክፍሎችን በdynamic import በወቅቱ ይጠራ፡፡ አይጠቀምም የሆኑ የመያዣ ኮድ በpackage analyzer ይታዩ። በታላቅ date, graphics ወይም animation libraries ፋይሎች ፋንታ፣ ቀላል አማራጮች ይይዙ።

በserver-side rendering ወይም static generation በሚጠቀም ፕሮጀክቶችም አጠናካኝ አይደለም። HTML በፍጥነት ቢመጣም፣ በhydration ደረጃ በመተከል ብዙ component በአንድ ጊዜ ንቃት ሊያደርግ TBT ይማታል። በአይነት የሆኑ ንቁ ያልሆኑ ይዘቶች client-side JavaScript አይተጠቅምም። ይህ የ2026 የperformance አቀራረብ በመሀከል ይገኛል።

Hosting፣ የሰርቨር ምላሽ ሰዓትና የJavaScript ውጤት ግንኙነት

TBT በቀጥታ በብራውዘር ውስጥ የJavaScript መስራት ጊዜን ይዳረጋል፤ ነገር ግን hosting መሠረት በቅንነት ውጤቱን ያሳድጋል። የTTFB የቆስለ ሰዓት፣ መጠባበቅ አለመሆን፣ HTTP/2 ወይም HTTP/3 የሚያገለግሉ አይኖሩ፣ የአውታረ ቅርፅ ደካማ በመሆኑና ከሩቅ ቦታ የሚመጡ የቆስለ ጊዜያት የJavaScript ፋይሎች ዝግጅትን ይዘግያሉ። ፋይሎች በዘግያ የሚደርሱ ጊዜ የገፅ እውነታ ሲገጠም የተጠቃሚ ልምድ ይደክማል።

የጥሩ hosting መሠረት፣ Brotli ወይም Gzip መጠባበቅ፣ የብራውዘር አገልግሎት እና ማስታወሻ የተካተተ፣ የዘመናዊ PHP እቃ፣ ፈጣን የዲስክ ቴክኖሎጂና CDN የተያያዘ አካትን የሚያበረታታ ኦፕቲማይዜሽን ይደግፋል። SSL ሰርቲፊኬት በትክክል መጫን በዘመናዊ ብራውዘር ጥቅሞች፣ HTTP/2 እና የተረጋጋ የሶስተኛ ጎን አካትን በሚገባ አስፈላጊ ነው። Hostragons SSL መድረክ ማህበረሰቦች Hostragons የዳይሬን ምርመራ

ምሳሌ፣ አንድ JavaScript ፋይል ያልተጠባበቀ 320 KB ከሆነ፣ በBrotli 95 KB ደርሶ ይቀናል። ይህ TBT ወደቀን በእኩል መጠን አይሆንም፤ ምክንያቱም TBT የመስራት ወጪን ይመዘናል። ነገር ግን የማውረድ ጊዜ ይቀናል፣ የምንጭ ቅድመ ልዩነት ይቀረ፣ እና የጠቅላላ ገፅ ተጫዋች ልምድ ይሻሻል። ስለዚህ defer፣ async፣ መጠባበቅ እና ትክክለኛ hosting በአንድ ልክ ይታወቅ ይገባል።

መለኪያና ማረጋገጫ ዝርዝር የሚሰጥ ምርመራ

ኦፕቲሚዜሽኑ በሚሰጠው PageSpeed ውጤት ብቻ ማየት በቂ አይደለም። ከታች ያለው ዝርዝር እውነተኛ ተፅዕኖውን በትክክል ለማግኘት ይረዳዎታል፦

• የሞባይል TBT እሴት ከኦፕቲሚዜሽን በፊትና በኋላ ተነፃፃፈው ነው?
• ከJavaScript execution time ሪፖርት በሚቀርበው ውጤት በጣም የከፋይ ፋይሎች ተቀናሹ?
• በChrome DevTools Performance ማሳያ የረጅም ተግባራት ቁጥር ተቀናሹ?
• በኮንሶል የJavaScript ስህተት አለ?
• ምናሌ፣ ፍለጋ፣ ማጣሪያ፣ ፎርም፣ ሳጥና ክፍያ ሂደቶች በተስፋፋ ያስተካከሉ?
• የሶስተኛ ወገን ትንታኔና ማስታወቂያ ታግዎች በትክክል ይነሳሉ?
• በእውነተኛ የተጠቃሚ ውሂብ INP እና የመተግበሪያ የዘገየ ጊዜ ተሻሻለ?
• ለውጦቹ ከCache ተጠርጣሪ በኋላ እንደገና ተመለከቱ?

እዚህ በጣም አስፈላጊው ነገር የላቦራቶሪ እና የመሬት ውሂብን ማግኘት ነው። TBT የLighthouse ላቦራቶሪ መለኪያ ነው። በእውነተኛ የተጠቃሚ ልምድ Interaction to Next Paint ወይም INP አሁን አብዛኛውን ጊዜ የሚያስተላለፍ ሆኗል። ግን TBT መቀነስ ብዙ ጊዜ INP ለመሻሻል ይረዳል፤ ምክንያቱም በMain Thread ላይ ተግዟ የሚያደርጉ ነገሮች ይቀናሉ።

ብዙ የተደጋጋሚ ስህተቶች እና ለመቆጣጠር መንገዶች

ሁሉንም መሳሪያ በአንድ ጊዜ async መስራት

ይህ ከብዙ የሚከሰቱ ስህተቶች መካከል አንዱ ነው። async ቅደም ተከተል ስላልያዘ በተጣራ ሰነዶች የበየት ስህተቶችን ሊያመነው ይችላል። በአንድ ገጽ የሚገኝ ተስማሚ አዋቂ በዝቅተኛ አገናኝ ወይም በተለያዩ መተጫጨያዎች ሊበላም ይችላል። ለተጣራ ሰነዶች defer የተሳካ የመጀመሪያ አማራጭ ነው።

jQuery እና ተጣራ ፔላጎንችን በትክክል አያስቆጥቱ

በWordPress ሳይቶች ብዙ ፔላጎንች የjQuery ቅደም ተከተል ላይ ይተካል። jQuery ኮር አስንክ ማድረግ ፔላጎንች ኮድ jQuery ከተጭነ በፊት እንዲሰራ ያደርጋል። መፍትሄው dependency አውታረ ታይቶ አስፈላጊ ሰነዶችን በማገደል ላይ ማካተት ነው።

የሶስተኛ ወገን መሳሪያዎችን በዘርፉ አያስቆጥቱ

የድር ሳይት ባለቤት ራሱን ቴማ ፋይሎችን ሲያስተካክል ማስታወቂያ፣ ውይይት እና አናሊዝ ኮዶችን ሊይሉ ይችላሉ። ነገር ግን Lighthouse ሪፖርቶች የሚያቆሙ ግዜዎች ብዙውን ጊዜ ከሶስተኛ ወገን ምንጮች ይመጣሉ። የማይውለው ታግን ማስወገድ፣ በሁኔታ ማስነሳት፣ እና በተጠየቀ ጊዜ ለተጠቃሚ ድርጊት ማዘገድ ትልቅ አትማት ይሰጣል።

ያልተመለከተ ፔላጎንችን መጫን

የperformance ፔላጎንች ተጠቃሚ ሊሆኑ ይችላሉ፤ ነገር ግን መለከት ሳያደርጉ የተጨመረ መሳሪያ አዲስ JavaScript እና CSS ጫነ አምጥቶ ይችላል። አስቀድሞ ችግኝ በማወቅ መሳሪያ ይምረጡ። ፔላጎንቹ በእውነት TBT እንደሚቀንስ በመሪፖርት ያረጋግጡ።

የCache እና Minification ግጭቶችን ችግር እንዳልሆኑ መቆጣጠር

Minification, አከባቢ, defer እና async አንድ ጊዜ ሲሰሩ የፋይል ቅደም ተከተል ሊቀየር ይችላል። ይህ በproduction አካባቢ ያልተጠበቁ ስህተቶች ያስከትላል። በCDN፣ የሰርቨር cache እና የapplication cache በአንድ ጊዜ ሲጠቀሙ ከማውጫ በኋላ ሁሉንም አካባቢ ያጥሩ።

እውነተኛ አፕቲሚዜሽን ሴነሪዮ

በመካከለኛ መጠን ያለ የኩባንያ ድር ጣቢያ ዋና ገፅ ላይ 18 የJavaScript ጥያቄዎች እንደሚኖሩ እንምናት። ከዚህ 5 የቲማና ሜኑ ባህሪያት፣ 4 የስላይደርና አኒሜሽን፣ 3 የፎርምና ማቅረብ ካርታ፣ 6 ደግሞ የትንበያ፣ ፒክሴልና የቀጥታ ድጋፍ ኮዶች ናቸው። መጀመሪያ Lighthouse ሞባይል TBT ዋጋ 920 ms ይሆናል።

በመጀመሪያ ፍጹም በሚያስፈልጉ ሁለት አኒሜሽን ኤክልንትኖች ይወገዳሉ እና 140 KB የተጠቀሰ JavaScript ጫነ ይቀንሳል። TBT ወደ 760 ms ይውረዳል። በሁለተኛ ደረጃ የቲማና ስላይደር ፋይሎች defer ይደረጋሉ፤ ሰርዓዊ ግንኙነቶች ይፈተናሉ። TBT ወደ 480 ms ይደርሳል። በሶስተኛ ደረጃ የካርታ script በተጨማሪ በየእውቅና ክፍል ብቻ ሲጫን ይደርሳል፣ የቀጥታ ድጋፍ ከ7 ሰከንድ በኋላ ይጀምራል፣ የትንበያና ፒክሴል ኮዶች async ይሆናሉ። በመጨረሻ ምርመራ ላይ TBT ወደ 210 ms ይውረዳል።

ይህ ሴነሪዮ አንድ ስደተኛ ቅኝት ያለው ያልሆነ ነገር፣ በደረጃ የሚደረግ ዘዴ አስፈላጊነትን ያሳያል። Defer እና async ጠንካራ መሣሪያዎች ናቸው፤ ግን በጥቂት ኮድ ማስወገድ፣ በሁኔታ ማጫን፣ ትክክለኛ ካሽ እና ጥራት ያለው መሰረት ከሚጋሩ ጋር የተሻለ ውጤት ይሰጣል።

ውርደት፡ ዝቅተኛ TBT ለማሳካት ተመጣጣኝና በሙከራ የተደረገ JavaScript ስትራቴጂ

በመስመር ላይ ገፅዎ ላይ የJavaScript የቅድሚያ መጫኛነትን ማስፈጸም፣ TBT ጊዜን ለማሳነስ ከሚቻልና ከሚያስተላለፍ መንገዶች አንዱ ነው። defer ፣ በቅድሚያ እና የDOM በኋላ ለሚፈጸሙ ፋይሎች በደህና የሚሰራ መፍትሄ ያቀርባል፤ async ደግሞ ለብቻው የሚነሱ የሶስተኛ ወገን script የበለጠ አገልግሎት ይሰጣል። ለሳካ ኦፕቲሚዜሽን በመጀመሪያ መለካት አለብዎ፣ script-ን ለመደበቅ፣ የማይያዝ ፋይሎችን ለማስወገድ፣ ለውጦችን በደረጃዎች ለማስፈጸም፣ እና የእውነተኛ ተጠቃሚ ተሞክሮን ለመቆጣጠር ይገባዎታል።

በHostragons ላይ የፍጥነት፣ የደህንነት እና የመስፋፋት የተዘጋጁ መስመር ላይ መረጃዎችን መጠቀም፣ የJavaScript ኦፕቲሚዜሽን፣ ከእቃ መያዣ እና SSL የሚሰጡ አዋቂ ቅንጅቶች ጋር የተዋበ የweb አፈፃፀም ማድረግ ይቻላል። የገፅዎ TBT እንዲሻሻል በመከተል መጀመሪያ የአሁኑ ሪፖርትዎን ያውጡ፣ ከዚያም በትንሽ ነጥቦች የሚመዘኑ እርምጃዎችን ይወስዱ። ለየተሟሟ የhosting እና የperformance መስመር ላይ የሚስተዋወቅ Hostragons መፍትሄዎችን ማጥናት ይችላሉ። Hostragons ድረ-ገጽ ሆስቲንግ ፓኬጎች

ብዙ ጊዜ የሚጠየቁ ጥያቄዎች

Defer እና async በተዘዋዋሪ ይጠቀም ይችላሉ?

በባለሞያ script ትዕዛዝ ውስጥ defer እና async በአንድ ጊዜ ከተጠቀሙ በመናከረ modern browser ላይ async ቅድመ ትእዛዝ ይሰጣል፤ ይህም የቅደም ተከተል ስርዓትን ያስወግዳል። ስለዚህ በተግባር አንድ script ውስጥ ሁለቱን በአንድ ጊዜ መጠቀም አይመከርም። በተያያዙ ፋይሎች defer፣ በነፃ ፋይሎች async መጠቀም የተረጋጋ ነው።

የዝግጅት JavaScript ጭነት SEO ደረጃን በቀጥታ ያሳድጋል?

ራሱ በቀጥታ የደረጃ ስርዓት ዋስትና አይሰጥም፤ ነገር ግን የገፅ ልምድ፣ የተጠቃሚ እሴት ፍጥነት እና Core Web Vitals ውጤቶችን በማሻሻል SEO ስኬትን ይደግፋል። በፍጥነት የሚሰጡ ገፆች የተጠቃሚ ደስታ፣ ማዕከል ውጤትና የተሰነዘነ ጥራት ዕውቀትን ማሳደግ ይችላሉ።

ለሁሉም JavaScript ፋይል defer መጨመር የተረጋጋ ነው?

አይደለም። አንዳንድ scripts በገፅ የመጀመሪያ ክፍል ላይ ለማከል ያስፈልጋቸዋል፣ ወይም በተያያዙ ፋይሎች የቅደም ተከተል እንዲሆን ይፈልጋሉ። ስለዚህ ለእያንዳንዱ ፋይል ዓላማ፣ ግዢነት እና የሚከናወንበት ጊዜ መቆጣጠር አስፈላጊ ነው፤ ለውጦች በተፈጥሮ ይፈተና ይደረግ።

TBT ለመቀነስ defer እና async ብቻ በቂ ናቸው?

በትንሹና አማካይ ስፍራ ያሉ ስ፣ ትልቅ ለውጦች ይሰጣሉ፤ ግን በከፍተኛ frameworks የሚጠቀሙ፣ ብዙ ሶስተኛ ፓርቲ ኮድ የተያያዙ፣ ወይም ትልቅ bundle ፋይሎች ያሉ ስ፣ ተጨማሪ ውሳኔዎች ይወዳድሩ። ኮድ መከፋፈል፣ ያልተጠቀሰ JavaScript ማጥፋት፣ በሁኔታ መጫን፣ ከቅርብ መያዝና ጠንካራ hosting መድረክ በአንድ ስር ይታወቅ።

በWordPress ስ፣ የትኞቹ scripts async አያደርጉ?

በjQuery የተያያዙ plugin ፋይሎች፣ ክፍያና ግዢ script፣ ቅጽ ማረጋገጫ፣ የደህንነት ማረጋገጫና አስፈላጊ theme ስራዎች በየትኛውም ጊዜ async አይደረጉ። በእነዚህ ፋይሎች ቅደም ተከተል ከተበታተነ የተጠቃሚ እሴት ይቆሰላል። መጀመሪያ defer ይፈተና፣ ከዚያም የሚያስፈልጉ ፋይሎች exclusion list ይሰሩ።