વેબ પર્ફોર્મન્સને અનલોક કરવું: પર્ફોર્મન્સ ઓબ્ઝર્વર API નો ઊંડાણપૂર્વક અભ્યાસ

આજની ઝડપી ડિજિટલ દુનિયામાં, વેબ પર્ફોર્મન્સ એ કોઈ લક્ઝરી નથી; તે એક આવશ્યકતા છે. ધીમી અથવા બિનપ્રતિભાવશીલ વેબસાઇટ વપરાશકર્તાની હતાશા, ઊંચા બાઉન્સ રેટ અને વ્યવસાયિક લક્ષ્યો પર સીધી નકારાત્મક અસર તરફ દોરી શકે છે, પછી ભલે તે વેચાણ હોય, જાહેરાતની આવક હોય, અથવા વપરાશકર્તાની સંલગ્નતા હોય. વર્ષોથી, ડેવલપર્સ એવા સાધનો પર આધાર રાખતા હતા જે એક જ સમયે પર્ફોર્મન્સનું માપન કરે છે, સામાન્ય રીતે પ્રારંભિક પેજ લોડ દરમિયાન. આ અભિગમ ઉપયોગી હોવા છતાં, તે વાર્તાના એક નિર્ણાયક ભાગને ચૂકી જાય છે: વપરાશકર્તાનો સંપૂર્ણ અનુભવ જ્યારે તેઓ પેજ સાથે ક્રિયાપ્રતિક્રિયા કરે છે. અહીં જ રનટાઇમ પર્ફોર્મન્સ મોનિટરિંગ આવે છે, અને તેનું સૌથી શક્તિશાળી સાધન પર્ફોર્મન્સ ઓબ્ઝર્વર API છે.

પરંપરાગત પદ્ધતિઓમાં ઘણીવાર performance.getEntries() જેવા ફંક્શન્સ સાથે પર્ફોર્મન્સ ડેટા માટે પોલિંગનો સમાવેશ થાય છે. આ બિનકાર્યક્ષમ હોઈ શકે છે, પોલ્સ વચ્ચે બનતી નિર્ણાયક ઘટનાઓને ચૂકી જવાની સંભાવના રહે છે, અને તે જે પર્ફોર્મન્સ ઓવરહેડને માપવાનો પ્રયાસ કરી રહ્યું છે તેમાં પણ વધારો કરી શકે છે. પર્ફોર્મન્સ ઓબ્ઝર્વર API આ પ્રક્રિયામાં ક્રાંતિ લાવે છે, કારણ કે તે પર્ફોર્મન્સ ઇવેન્ટ્સ થતાંની સાથે જ તેને સબ્સ્ક્રાઇબ કરવા માટે એક અસિંક્રોનસ, લો-ઓવરહેડ મિકેનિઝમ પ્રદાન કરે છે. આ માર્ગદર્શિકા તમને આ આવશ્યક API નો ઊંડાણપૂર્વક અભ્યાસ કરાવશે, અને બતાવશે કે કેવી રીતે તેની શક્તિનો ઉપયોગ કોર વેબ વાઇટલ્સનું નિરીક્ષણ કરવા, અવરોધોને ઓળખવા અને આખરે વૈશ્વિક પ્રેક્ષકો માટે ઝડપી, વધુ આનંદપ્રદ વેબ અનુભવો બનાવવા માટે કરી શકાય છે.

પર્ફોર્મન્સ ઓબ્ઝર્વર API શું છે?

મૂળભૂત રીતે, પર્ફોર્મન્સ ઓબ્ઝર્વર API એ એક ઇન્ટરફેસ છે જે પર્ફોર્મન્સ માપન ઇવેન્ટ્સનું નિરીક્ષણ અને સંગ્રહ કરવાની રીત પ્રદાન કરે છે, જેને પર્ફોર્મન્સ એન્ટ્રીઝ તરીકે ઓળખવામાં આવે છે. તેને બ્રાઉઝરની અંદર પર્ફોર્મન્સ-સંબંધિત પ્રવૃત્તિઓ માટે એક સમર્પિત લિસનર તરીકે વિચારો. તમે બ્રાઉઝરને સક્રિયપણે પૂછો, "હજી સુધી કંઈ થયું છે?", તેના બદલે, બ્રાઉઝર તમને સક્રિયપણે કહે છે, "એક નવી પર્ફોર્મન્સ ઇવેન્ટ હમણાં જ બની છે! અહીં વિગતો છે."

આ એક ઓબ્ઝર્વર પેટર્ન દ્વારા પ્રાપ્ત થાય છે. તમે એક ઓબ્ઝર્વર ઇન્સ્ટન્સ બનાવો છો, તેને કહો છો કે તમને કયા પ્રકારની પર્ફોર્મન્સ ઇવેન્ટ્સમાં રસ છે (દા.ત., મોટા પેઇન્ટ્સ, યુઝર ઇનપુટ્સ, લેઆઉટ શિફ્ટ્સ), અને એક કોલબેક ફંક્શન પ્રદાન કરો છો. જ્યારે પણ બ્રાઉઝરની પર્ફોર્મન્સ ટાઇમલાઇનમાં નિર્દિષ્ટ પ્રકારની નવી ઇવેન્ટ રેકોર્ડ થાય છે, ત્યારે તમારા કોલબેક ફંક્શનને નવી એન્ટ્રીઓની સૂચિ સાથે બોલાવવામાં આવે છે. આ અસિંક્રોનસ, પુશ-આધારિત મોડેલ વારંવાર performance.getEntries() ને કોલ કરવાના જૂના પુલ-આધારિત મોડેલ કરતાં ઘણું વધુ કાર્યક્ષમ અને વિશ્વસનીય છે.

જૂની રીત વિરુદ્ધ નવી રીત

પર્ફોર્મન્સ ઓબ્ઝર્વરની નવીનતાની પ્રશંસા કરવા માટે, ચાલો બંને અભિગમોની તુલના કરીએ:

• જૂની રીત (પોલિંગ): તમારું મેટ્રિક રેકોર્ડ થયું છે કે નહીં તે જોવા માટે તમે સમયાંતરે performance.getEntriesByName('my-metric') ને કોલ કરવા માટે setTimeout અથવા requestAnimationFrame નો ઉપયોગ કરી શકો છો. આ સમસ્યારૂપ છે કારણ કે તમે કદાચ ખૂબ મોડું ચેક કરો અને ઇવેન્ટ ચૂકી જાઓ, અથવા ખૂબ વારંવાર ચેક કરો અને CPU સાઇકલ બગાડો. જો તમે નિયમિતપણે એન્ટ્રીઓ સાફ ન કરો તો તમે બ્રાઉઝરના પર્ફોર્મન્સ બફરને ભરવાનું જોખમ પણ લો છો.
• નવી રીત (ઓબ્ઝર્વિંગ): તમે એકવાર PerformanceObserver સેટ કરો છો. તે શાંતિથી બેકગ્રાઉન્ડમાં રહે છે, અને ન્યૂનતમ સંસાધનોનો વપરાશ કરે છે. જેવી કોઈ સંબંધિત પર્ફોર્મન્સ એન્ટ્રી રેકોર્ડ થાય છે—ભલે તે પેજ લોડ થયા પછી એક મિલિસેકન્ડ હોય કે વપરાશકર્તાના સત્રમાં દસ મિનિટ પછી—તમારા કોડને તરત જ સૂચિત કરવામાં આવે છે. આ સુનિશ્ચિત કરે છે કે તમે ક્યારેય કોઈ ઇવેન્ટ ચૂકશો નહીં અને તમારો મોનિટરિંગ કોડ શક્ય તેટલો કાર્યક્ષમ છે.

તમારે પર્ફોર્મન્સ ઓબ્ઝર્વરનો ઉપયોગ શા માટે કરવો જોઈએ

તમારા ડેવલપમેન્ટ વર્કફ્લોમાં પર્ફોર્મન્સ ઓબ્ઝર્વર API ને એકીકૃત કરવાથી ઘણા ફાયદાઓ મળે છે જે વૈશ્વિક પહોંચ માટે લક્ષ્ય રાખતી આધુનિક વેબ એપ્લિકેશન્સ માટે નિર્ણાયક છે.

• બિન-અડચણરૂપ મોનિટરિંગ: ઓબ્ઝર્વરનો કોલબેક સામાન્ય રીતે નિષ્ક્રિય સમયગાળા દરમિયાન ચલાવવામાં આવે છે, જે સુનિશ્ચિત કરે છે કે તમારો પર્ફોર્મન્સ મોનિટરિંગ કોડ વપરાશકર્તાના અનુભવમાં દખલ કરતો નથી અથવા મુખ્ય થ્રેડને બ્લોક કરતો નથી. તે હલકો અને નગણ્ય પર્ફોર્મન્સ ફૂટપ્રિન્ટ ધરાવવા માટે ડિઝાઇન કરવામાં આવ્યો છે.
• વ્યાપક રનટાઇમ ડેટા: વેબ ગતિશીલ છે. પર્ફોર્મન્સ સમસ્યાઓ ફક્ત લોડ સમયે જ થતી નથી. વપરાશકર્તા એક જટિલ એનિમેશન ટ્રિગર કરી શકે છે, સ્ક્રોલ કરીને વધુ સામગ્રી લોડ કરી શકે છે, અથવા પ્રારંભિક પેજ સ્થિર થયા પછી લાંબા સમય સુધી ભારે કમ્પોનન્ટ સાથે ક્રિયાપ્રતિક્રિયા કરી શકે છે. પર્ફોર્મન્સ ઓબ્ઝર્વર આ રનટાઇમ ઇવેન્ટ્સને કેપ્ચર કરે છે, જે તમને સમગ્ર વપરાશકર્તા સત્રનું સંપૂર્ણ ચિત્ર આપે છે.
• ભવિષ્ય-પ્રૂફ અને માનક: તે પર્ફોર્મન્સ ડેટા એકત્રિત કરવા માટે W3C દ્વારા ભલામણ કરાયેલ માનક છે. નવા પર્ફોર્મન્સ મેટ્રિક્સ અને APIs તેની સાથે એકીકૃત થવા માટે ડિઝાઇન કરવામાં આવ્યા છે, જે તેને તમારા પ્રોજેક્ટ્સ માટે એક ટકાઉ અને ભવિષ્યલક્ષી પસંદગી બનાવે છે.
• રિયલ યુઝર મોનિટરિંગ (RUM) નો પાયો: વિવિધ દેશો, ઉપકરણો અને નેટવર્ક પરિસ્થિતિઓમાં તમારી સાઇટ વપરાશકર્તાઓ માટે કેવી રીતે કાર્ય કરે છે તે ખરેખર સમજવા માટે, તમારે વાસ્તવિક સત્રોમાંથી ડેટાની જરૂર છે. પર્ફોર્મન્સ ઓબ્ઝર્વર એક મજબૂત RUM સોલ્યુશન બનાવવા માટે આદર્શ સાધન છે, જે તમને મહત્વપૂર્ણ મેટ્રિક્સ એકત્રિત કરવા અને તેને એકત્રીકરણ અને વિશ્લેષણ માટે એનાલિટિક્સ સેવામાં મોકલવાની મંજૂરી આપે છે.
• રેસ કન્ડિશન્સ દૂર કરે છે: પોલિંગ સાથે, તમે પર્ફોર્મન્સ એન્ટ્રી રેકોર્ડ થાય તે પહેલાં તેને ઍક્સેસ કરવાનો પ્રયાસ કરી શકો છો. ઓબ્ઝર્વર મોડેલ આ રેસ કન્ડિશનને સંપૂર્ણપણે દૂર કરે છે, કારણ કે તમારો કોડ ફક્ત એન્ટ્રી ઉપલબ્ધ થયા પછી જ ચાલે છે.

શરૂઆત કરવી: પર્ફોર્મન્સ ઓબ્ઝર્વરની મૂળભૂત બાબતો

API નો ઉપયોગ કરવો સીધો છે. પ્રક્રિયામાં ત્રણ મુખ્ય પગલાં શામેલ છે: એક ઓબ્ઝર્વર બનાવવું, કોલબેક વ્યાખ્યાયિત કરવું, અને ઓબ્ઝર્વરને શું જોવાનું છે તે કહેવું.

1. કોલબેક સાથે ઓબ્ઝર્વર બનાવવું

પ્રથમ, તમે એક PerformanceObserver ઓબ્જેક્ટ બનાવો છો, જેમાં કોલબેક ફંક્શન પસાર કરો છો. જ્યારે પણ નવી એન્ટ્રીઓ શોધી કાઢવામાં આવશે ત્યારે આ ફંક્શન ચલાવવામાં આવશે.

const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('Entry Type:', entry.entryType); console.log('Entry Name:', entry.name); console.log('Start Time:', entry.startTime); console.log('Duration:', entry.duration); } });

કોલબેકને PerformanceObserverEntryList ઓબ્જેક્ટ મળે છે. તમે આ સૂચિ પર getEntries() મેથડને કોલ કરીને બધી નવી અવલોકિત પર્ફોર્મન્સ એન્ટ્રીઓની એરે મેળવી શકો છો.

2. ચોક્કસ એન્ટ્રી પ્રકારોનું અવલોકન કરવું

જ્યાં સુધી તમે તેને શું મોનિટર કરવું તે ન કહો ત્યાં સુધી ઓબ્ઝર્વર કંઈ કરતું નથી. તમે આ .observe() મેથડનો ઉપયોગ કરીને કરો છો. આ મેથડ entryTypes પ્રોપર્ટી (અથવા કેટલાક આધુનિક કેસોમાં, એક જ પ્રકાર માટે ફક્ત type) સાથેનો ઓબ્જેક્ટ લે છે, જે સ્ટ્રિંગ્સની એરે છે જે તમે રસ ધરાવતા પર્ફોર્મન્સ એન્ટ્રી પ્રકારોનું પ્રતિનિધિત્વ કરે છે.

// બે પ્રકારની એન્ટ્રીઓનું અવલોકન કરવાનું શરૂ કરો observer.observe({ entryTypes: ['mark', 'measure'] });

સૌથી સામાન્ય એન્ટ્રી પ્રકારોમાંના કેટલાકમાં શામેલ છે:

• 'resource': સ્ક્રિપ્ટો, છબીઓ અને સ્ટાઇલશીટ્સ જેવી અસ્કયામતો માટે નેટવર્ક વિનંતીઓ વિશેની વિગતો.
• 'paint': first-paint અને first-contentful-paint માટેનો સમય.
• 'largest-contentful-paint': જોવામાં આવતી લોડિંગ સ્પીડ માટે કોર વેબ વાઇટલ મેટ્રિક.
• 'layout-shift': વિઝ્યુઅલ સ્થિરતા માટે કોર વેબ વાઇટલ મેટ્રિક.
• 'first-input': પ્રથમ વપરાશકર્તા ક્રિયાપ્રતિક્રિયા વિશેની માહિતી, જે ફર્સ્ટ ઇનપુટ ડિલે કોર વેબ વાઇટલ માટે વપરાય છે.
• 'longtask': મુખ્ય થ્રેડ પરના કાર્યોને ઓળખે છે જે 50 મિલિસેકન્ડથી વધુ સમય લે છે, જે બિનપ્રતિભાવનું કારણ બની શકે છે.
• 'mark' & 'measure': યુઝર ટાઇમિંગ API નો ઉપયોગ કરીને તમે તમારા પોતાના કોડમાં વ્યાખ્યાયિત કરેલ કસ્ટમ માર્કર્સ અને માપ.

3. ઓબ્ઝર્વરને રોકવું

જ્યારે તમારે ડેટા એકત્રિત કરવાની જરૂર ન હોય, ત્યારે સંસાધનો મુક્ત કરવા માટે ઓબ્ઝર્વરને ડિસ્કનેક્ટ કરવું એ એક સારી પ્રથા છે.

observer.disconnect();

વ્યવહારુ ઉપયોગના કિસ્સાઓ: કોર વેબ વાઇટલ્સનું નિરીક્ષણ કરવું

કોર વેબ વાઇટલ્સ એ ચોક્કસ પરિબળોનો સમૂહ છે જેને Google વેબપેજના એકંદર વપરાશકર્તા અનુભવમાં મહત્વપૂર્ણ માને છે. તેમનું નિરીક્ષણ કરવું એ પર્ફોર્મન્સ ઓબ્ઝર્વર API ના સૌથી શક્તિશાળી એપ્લિકેશન્સમાંનું એક છે. ચાલો જોઈએ કે દરેકને કેવી રીતે માપવું.

લાર્જેસ્ટ કન્ટેન્ટફુલ પેઇન્ટ (LCP) નું નિરીક્ષણ કરવું

LCP લોડિંગ પર્ફોર્મન્સને માપે છે. તે પેજ લોડ ટાઇમલાઇનમાં તે બિંદુને ચિહ્નિત કરે છે જ્યારે મુખ્ય સામગ્રી સંભવતઃ લોડ થઈ ગઈ હોય. સારો LCP સ્કોર 2.5 સેકન્ડ કે તેથી ઓછો છે.

પેજ લોડ થતાં LCP એલિમેન્ટ બદલાઈ શકે છે. શરૂઆતમાં, એક હેડિંગ LCP એલિમેન્ટ હોઈ શકે છે, પરંતુ પછીથી, એક મોટી છબી લોડ થઈ શકે છે અને નવું LCP એલિમેન્ટ બની શકે છે. આ જ કારણ છે કે પર્ફોર્મન્સ ઓબ્ઝર્વર સંપૂર્ણ છે—તે તમને દરેક સંભવિત LCP ઉમેદવારની જેમ જ તે રેન્ડર થાય છે તેમ સૂચિત કરે છે.

// LCP નું અવલોકન કરો અને અંતિમ મૂલ્ય લોગ કરો let lcpValue = 0; const lcpObserver = new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); // છેલ્લી એન્ટ્રી સૌથી અપ-ટુ-ડેટ LCP ઉમેદવાર છે const lastEntry = entries[entries.length - 1]; lcpValue = lastEntry.startTime; console.log(`LCP updated: ${lcpValue.toFixed(2)}ms`, lastEntry.element); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // વપરાશકર્તાની ક્રિયાપ્રતિક્રિયા પછી ઓબ્ઝર્વરને ડિસ્કનેક્ટ કરવું એ સારી પ્રથા છે, // કારણ કે ક્રિયાપ્રતિક્રિયાઓ નવા LCP ઉમેદવારોને મોકલવાનું બંધ કરી શકે છે. // window.addEventListener('beforeunload', () => lcpObserver.disconnect());

buffered: true ના ઉપયોગની નોંધ લો. આ એક નિર્ણાયક વિકલ્પ છે જે ઓબ્ઝર્વરને observe() મેથડ કોલ થાય *પહેલાં* રેકોર્ડ થયેલી એન્ટ્રીઓનો સમાવેશ કરવા સૂચના આપે છે. આ તમને પ્રારંભિક LCP ઇવેન્ટ ચૂકી જવાથી બચાવે છે.

ફર્સ્ટ ઇનપુટ ડિલે (FID) અને ઇન્ટરેક્શન ટુ નેક્સ્ટ પેઇન્ટ (INP) નું નિરીક્ષણ કરવું

આ મેટ્રિક્સ ઇન્ટરેક્ટિવિટીને માપે છે. જ્યારે વપરાશકર્તા પ્રથમ વખત પેજ સાથે ક્રિયાપ્રતિક્રિયા કરવાનો પ્રયાસ કરે છે ત્યારે તેઓ તેમના અનુભવનું પ્રમાણ નક્કી કરે છે.

ફર્સ્ટ ઇનપુટ ડિલે (FID) વપરાશકર્તા પ્રથમ વખત પેજ સાથે ક્રિયાપ્રતિક્રિયા કરે (દા.ત., બટન પર ક્લિક કરે) ત્યારથી બ્રાઉઝર તે ક્રિયાપ્રતિક્રિયાના પ્રતિભાવમાં ઇવેન્ટ હેન્ડલર્સની પ્રક્રિયા શરૂ કરવામાં સક્ષમ થાય ત્યાં સુધીના સમયને માપે છે. સારો FID 100 મિલિસેકન્ડ કે તેથી ઓછો છે.

ઇન્ટરેક્શન ટુ નેક્સ્ટ પેઇન્ટ (INP) એ એક નવું, વધુ વ્યાપક મેટ્રિક છે જેણે માર્ચ 2024 માં FID ને કોર વેબ વાઇટલ તરીકે બદલી નાખ્યું છે. જ્યારે FID ફક્ત *પ્રથમ* ક્રિયાપ્રતિક્રિયાના *વિલંબ* ને માપે છે, ત્યારે INP પેજના જીવનચક્ર દરમિયાન *બધી* વપરાશકર્તા ક્રિયાપ્રતિક્રિયાઓની *કુલ લેટન્સી* નું મૂલ્યાંકન કરે છે, અને સૌથી ખરાબની જાણ કરે છે. આ એકંદર પ્રતિભાવનું વધુ સારું ચિત્ર આપે છે. સારો INP 200 મિલિસેકન્ડ કે તેથી ઓછો છે.

તમે 'first-input' એન્ટ્રી પ્રકારનો ઉપયોગ કરીને FID નું નિરીક્ષણ કરી શકો છો:

// FID નું અવલોકન કરો const fidObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const fid = entry.processingStart - entry.startTime; console.log(`FID: ${fid.toFixed(2)}ms`); // પ્રથમ ઇનપુટની જાણ થયા પછી ડિસ્કનેક્ટ કરો fidObserver.disconnect(); } }); fidObserver.observe({ type: 'first-input', buffered: true });

INP નું નિરીક્ષણ કરવું થોડું વધુ જટિલ છે કારણ કે તે ઇવેન્ટના સંપૂર્ણ સમયગાળાને જુએ છે. તમે 'event' એન્ટ્રી પ્રકારનું અવલોકન કરો છો અને સમયગાળાની ગણતરી કરો છો, સૌથી લાંબા સમયગાળાનો ટ્રેક રાખો છો.

// સરળ INP મોનિટરિંગ ઉદાહરણ let worstInp = 0; const inpObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // INP એ ઇવેન્ટનો સમયગાળો છે const inp = entry.duration; // અમને ફક્ત વર્તમાન સૌથી ખરાબ કરતાં લાંબી ક્રિયાપ્રતિક્રિયાઓમાં જ રસ છે if (inp > worstInp) { worstInp = inp; console.log(`New worst INP: ${worstInp.toFixed(2)}ms`); } } }); inpObserver.observe({ type: 'event', durationThreshold: 16, buffered: true }); // durationThreshold ખૂબ જ ટૂંકી, સંભવતઃ નજીવી ઇવેન્ટ્સને ફિલ્ટર કરવામાં મદદ કરે છે.

ક્યુમ્યુલેટિવ લેઆઉટ શિફ્ટ (CLS) નું નિરીક્ષણ કરવું

CLS વિઝ્યુઅલ સ્થિરતાને માપે છે. તે માપવામાં મદદ કરે છે કે વપરાશકર્તાઓ કેટલી વાર અનપેક્ષિત લેઆઉટ શિફ્ટનો અનુભવ કરે છે—એક નિરાશાજનક અનુભવ જ્યાં સામગ્રી ચેતવણી વિના પેજ પર ખસે છે. સારો CLS સ્કોર 0.1 કે તેથી ઓછો છે.

આ સ્કોર તમામ વ્યક્તિગત લેઆઉટ શિફ્ટ સ્કોર્સનું એકત્રીકરણ છે. પર્ફોર્મન્સ ઓબ્ઝર્વર અહીં આવશ્યક છે, કારણ કે તે દરેક શિફ્ટની જાણ કરે છે જેમ તે થાય છે.

// કુલ CLS સ્કોરનું અવલોકન અને ગણતરી કરો let clsScore = 0; const clsObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // અમે વપરાશકર્તાના ઇનપુટને કારણે થયેલા શિફ્ટ્સની ગણતરી કરવા માંગતા નથી if (!entry.hadRecentInput) { clsScore += entry.value; console.log(`Current CLS score: ${clsScore.toFixed(4)}`); } } }); clsObserver.observe({ type: 'layout-shift', buffered: true });

hadRecentInput પ્રોપર્ટી મહત્વપૂર્ણ છે. તે તમને કાયદેસર લેઆઉટ શિફ્ટ્સને ફિલ્ટર કરવામાં મદદ કરે છે જે વપરાશકર્તાની ક્રિયાના પ્રતિભાવમાં થાય છે (જેમ કે મેનુને વિસ્તૃત કરતું બટન ક્લિક કરવું), જે CLS સ્કોરમાં ગણાવું જોઈએ નહીં.

કોર વેબ વાઇટલ્સ ઉપરાંત: અન્ય શક્તિશાળી એન્ટ્રી પ્રકારો

જ્યારે કોર વેબ વાઇટલ્સ એક શ્રેષ્ઠ પ્રારંભિક બિંદુ છે, ત્યારે પર્ફોર્મન્સ ઓબ્ઝર્વર ઘણું બધું મોનિટર કરી શકે છે. અહીં કેટલાક અન્ય અત્યંત ઉપયોગી એન્ટ્રી પ્રકારો છે.

લાંબા કાર્યો (`longtask`) ને ટ્રેક કરવું

લોંગ ટાસ્ક API એવા કાર્યોને ખુલ્લા પાડે છે જે મુખ્ય થ્રેડ પર 50 મિલિસેકન્ડ કે તેથી વધુ સમય માટે કબજો કરે છે. આ સમસ્યારૂપ છે કારણ કે જ્યારે મુખ્ય થ્રેડ વ્યસ્ત હોય છે, ત્યારે પેજ વપરાશકર્તાના ઇનપુટનો પ્રતિસાદ આપી શકતું નથી, જે સુસ્ત અથવા થીજી ગયેલા અનુભવ તરફ દોરી જાય છે. આ કાર્યોને ઓળખવા એ INP સુધારવા માટે ચાવીરૂપ છે.

// લાંબા કાર્યોનું અવલોકન કરો const longTaskObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(`Long Task Detected: ${entry.duration.toFixed(2)}ms`); // 'attribution' પ્રોપર્ટી ક્યારેક તમને કહી શકે છે કે લાંબા કાર્યનું કારણ શું હતું console.log('Attribution:', entry.attribution); } }); longTaskObserver.observe({ type: 'longtask', buffered: true });

રિસોર્સ ટાઇમિંગ્સ (`resource`) નું વિશ્લેષણ કરવું

તમારી અસ્કયામતો કેવી રીતે લોડ થઈ રહી છે તે સમજવું પર્ફોર્મન્સ ટ્યુનિંગ માટે મૂળભૂત છે. 'resource' એન્ટ્રી પ્રકાર તમને તમારા પેજ પરના દરેક રિસોર્સ માટે વિગતવાર નેટવર્ક ટાઇમિંગ ડેટા આપે છે, જેમાં DNS લુકઅપ, TCP કનેક્શન અને કન્ટેન્ટ ડાઉનલોડ સમયનો સમાવેશ થાય છે.

// રિસોર્સ ટાઇમિંગ્સનું અવલોકન કરો const resourceObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // ચાલો ધીમી-લોડિંગ છબીઓ શોધીએ if (entry.initiatorType === 'img' && entry.duration > 500) { console.warn(`Slow image detected: ${entry.name}`, `Duration: ${entry.duration.toFixed(2)}ms`); } } }); // રિસોર્સ ટાઇમિંગ્સ માટે 'buffered: true' નો ઉપયોગ લગભગ હંમેશા જરૂરી છે // આ સ્ક્રિપ્ટ ચાલતા પહેલા લોડ થયેલી અસ્કયામતોને પકડવા માટે. resourceObserver.observe({ type: 'resource', buffered: true });

કસ્ટમ પર્ફોર્મન્સ માર્ક્સ (`mark` અને `measure`) માપવા

ક્યારેક, તમારે એપ્લિકેશન-વિશિષ્ટ લોજિકના પર્ફોર્મન્સને માપવાની જરૂર પડે છે. યુઝર ટાઇમિંગ API તમને કસ્ટમ ટાઇમસ્ટેમ્પ બનાવવા અને તેમની વચ્ચેનો સમયગાળો માપવાની મંજૂરી આપે છે.

• performance.mark('start-operation'): 'start-operation' નામનો ટાઇમસ્ટેમ્પ બનાવે છે.
• performance.mark('end-operation'): બીજો ટાઇમસ્ટેમ્પ બનાવે છે.
• performance.measure('my-operation', 'start-operation', 'end-operation'): બે માર્ક્સ વચ્ચે માપ બનાવે છે.

પર્ફોર્મન્સ ઓબ્ઝર્વર આ કસ્ટમ 'mark' અને 'measure' એન્ટ્રીઓને સાંભળી શકે છે, જે જાવાસ્ક્રિપ્ટ ફ્રેમવર્કમાં કમ્પોનન્ટ રેન્ડર સમય અથવા નિર્ણાયક API કોલ અને ત્યારબાદની ડેટા પ્રોસેસિંગના સમયગાળા જેવી બાબતો પર ટાઇમિંગ ડેટા એકત્રિત કરવા માટે યોગ્ય છે.

// તમારા એપ્લિકેશન કોડમાં: performance.mark('start-data-processing'); // ... કેટલીક જટિલ ડેટા પ્રોસેસિંગ ... performance.mark('end-data-processing'); performance.measure('data-processing-duration', 'start-data-processing', 'end-data-processing'); // તમારા મોનિટરિંગ સ્ક્રિપ્ટમાં: const customObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntriesByName('data-processing-duration')) { console.log(`Custom Measurement '${entry.name}': ${entry.duration.toFixed(2)}ms`); } }); customObserver.observe({ entryTypes: ['measure'] });

અદ્યતન ખ્યાલો અને શ્રેષ્ઠ પ્રથાઓ

પર્ફોર્મન્સ ઓબ્ઝર્વર API નો વ્યાવસાયિક ઉત્પાદન વાતાવરણમાં અસરકારક રીતે ઉપયોગ કરવા માટે, આ શ્રેષ્ઠ પ્રથાઓ ધ્યાનમાં લો.

• હંમેશા `buffered: true` નો વિચાર કરો: પેજ લોડની શરૂઆતમાં થઈ શકે તેવા એન્ટ્રી પ્રકારો (જેમ કે 'resource', 'paint', અથવા 'largest-contentful-paint') માટે, તેમને ચૂકી જવાથી બચવા માટે બફર કરેલા ફ્લેગનો ઉપયોગ કરવો આવશ્યક છે.
• બ્રાઉઝર સપોર્ટ માટે તપાસ કરો: જોકે આધુનિક બ્રાઉઝર્સમાં વ્યાપકપણે સપોર્ટેડ છે, તેમ છતાં તેનો ઉપયોગ કરતા પહેલા તેના અસ્તિત્વની તપાસ કરવી હંમેશા સમજદારીભર્યું છે. તમે એ પણ ચકાસી શકો છો કે કયા એન્ટ્રી પ્રકારો ચોક્કસ બ્રાઉઝર દ્વારા સપોર્ટેડ છે.
• if ('PerformanceObserver' in window && PerformanceObserver.supportedEntryTypes.includes('longtask')) { // લાંબા કાર્યો માટે પર્ફોર્મન્સ ઓબ્ઝર્વરનો ઉપયોગ કરવો સલામત છે }
• ડેટાને એનાલિટિક્સ સેવામાં મોકલો: કન્સોલમાં ડેટા લોગ કરવો ડેવલપમેન્ટ માટે ઉત્તમ છે, પરંતુ વાસ્તવિક-વિશ્વના નિરીક્ષણ માટે, તમારે આ ડેટાને એકત્રિત કરવાની જરૂર છે. ક્લાયન્ટ પાસેથી આ ટેલિમેટ્રી મોકલવાની શ્રેષ્ઠ રીત navigator.sendBeacon() API નો ઉપયોગ કરવો છે. તે સર્વર પર નાના પ્રમાણમાં ડેટા મોકલવા માટે રચાયેલ એક નોન-બ્લોકિંગ મિકેનિઝમ છે, અને તે પેજ અનલોડ થઈ રહ્યું હોય ત્યારે પણ વિશ્વસનીય રીતે કાર્ય કરે છે.
• ચિંતા મુજબ ઓબ્ઝર્વર્સને જૂથબદ્ધ કરો: જ્યારે તમે બહુવિધ એન્ટ્રી પ્રકારો માટે એક જ ઓબ્ઝર્વરનો ઉપયોગ કરી શકો છો, ત્યારે વિવિધ ચિંતાઓ માટે અલગ ઓબ્ઝર્વર બનાવવું ઘણીવાર વધુ સ્વચ્છ હોય છે (દા.ત., એક કોર વેબ વાઇટલ્સ માટે, એક રિસોર્સ ટાઇમિંગ્સ માટે, એક કસ્ટમ મેટ્રિક્સ માટે). આ કોડની વાંચનક્ષમતા અને જાળવણીક્ષમતા સુધારે છે.
• પર્ફોર્મન્સ ઓવરહેડને સમજો: API ને ખૂબ જ ઓછા ઓવરહેડ માટે ડિઝાઇન કરવામાં આવ્યું છે. જોકે, એક ખૂબ જ જટિલ કોલબેક ફંક્શન જે ભારે ગણતરીઓ કરે છે તે સંભવિતપણે પર્ફોર્મન્સને અસર કરી શકે છે. તમારા ઓબ્ઝર્વર કોલબેક્સને હલકા અને કાર્યક્ષમ રાખો. કોઈપણ ભારે પ્રોસેસિંગને વેબ વર્કર પર મુલતવી રાખો અથવા કાચો ડેટા તમારા બેકએન્ડ પર પ્રોસેસિંગ માટે મોકલો.

નિષ્કર્ષ: પર્ફોર્મન્સ-ફર્સ્ટ સંસ્કૃતિનું નિર્માણ

પર્ફોર્મન્સ ઓબ્ઝર્વર API એ માત્ર એક અન્ય સાધન કરતાં વધુ છે; તે આપણે વેબ પર્ફોર્મન્સનો સંપર્ક કેવી રીતે કરીએ છીએ તેમાં એક મૂળભૂત પરિવર્તન છે. તે આપણને પ્રતિક્રિયાશીલ, એક-વારના માપમાંથી સક્રિય, સતત નિરીક્ષણ તરફ લઈ જાય છે જે સમગ્ર વિશ્વમાં આપણા વપરાશકર્તાઓના સાચા, ગતિશીલ અનુભવને પ્રતિબિંબિત કરે છે. કોર વેબ વાઇટલ્સ, લાંબા કાર્યો, રિસોર્સ ટાઇમિંગ્સ, અને કસ્ટમ મેટ્રિક્સને કેપ્ચર કરવાની વિશ્વસનીય અને કાર્યક્ષમ રીત પ્રદાન કરીને, તે ડેવલપર્સને પર્ફોર્મન્સ અવરોધોને ઓળખવા અને ઉકેલવા માટે સશક્ત બનાવે છે તે પહેલાં કે તેઓ નોંધપાત્ર સંખ્યામાં વપરાશકર્તાઓને અસર કરે.

પર્ફોર્મન્સ ઓબ્ઝર્વર API અપનાવવું એ કોઈપણ ડેવલપમેન્ટ ટીમમાં પર્ફોર્મન્સ-ફર્સ્ટ સંસ્કૃતિ બનાવવા તરફનું એક નિર્ણાયક પગલું છે. જ્યારે તમે જે મહત્વનું છે તે માપી શકો છો, ત્યારે તમે જે મહત્વનું છે તેમાં સુધારો કરી શકો છો. આજે જ તમારા પ્રોજેક્ટ્સમાં આ ઓબ્ઝર્વર્સને એકીકૃત કરવાનું શરૂ કરો. તમારા વપરાશકર્તાઓ—વિશ્વમાં ગમે ત્યાં હોય—તમને ઝડપી, સરળ અને વધુ આનંદપ્રદ અનુભવ માટે આભાર માનશે.