પર્ફોર્મન્સ ઓબ્ઝર્વર API: રનટાઇમ પર્ફોર્મન્સ મેટ્રિક્સ અને બોટલનેક એનાલિસિસ

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

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

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

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

મુખ્ય ખ્યાલો અને સુવિધાઓ

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

• PerformanceEntry: એક જ પર્ફોર્મન્સ માપન અથવા ઇવેન્ટનું પ્રતિનિધિત્વ કરે છે. પર્ફોર્મન્સ એન્ટ્રીઓમાં ઇવેન્ટનો પ્રકાર, તેના પ્રારંભ અને અંતનો સમય અને અન્ય સંબંધિત વિશેષતાઓ વિશેની માહિતી હોય છે. ઉદાહરણોમાં resource, mark, measure, navigation, longtask, અને event નો સમાવેશ થાય છે.
• PerformanceObserver: એક ઑબ્જેક્ટ જે તમને વિશિષ્ટ પર્ફોર્મન્સ એન્ટ્રી પ્રકારો પર સબ્સ્ક્રાઇબ કરવાની અને બ્રાઉઝરની પર્ફોર્મન્સ ટાઇમલાઇનમાં નવી એન્ટ્રીઓ ઉમેરવામાં આવે ત્યારે સૂચનાઓ પ્રાપ્ત કરવાની મંજૂરી આપે છે.
• observe() method: પર્ફોર્મન્સ ઓબ્ઝર્વરને વિશિષ્ટ પર્ફોર્મન્સ એન્ટ્રી પ્રકારો માટે સાંભળવા માટે ગોઠવવા માટે વપરાય છે. તમે જે એન્ટ્રી પ્રકારોનું નિરીક્ષણ કરવા માંગો છો તે સ્પષ્ટ કરી શકો છો, તેમજ ઐતિહાસિક એન્ટ્રીઓ મેળવવા માટે buffered વિકલ્પ પણ સ્પષ્ટ કરી શકો છો.
• disconnect() method: પર્ફોર્મન્સ ઓબ્ઝર્વરને પર્ફોર્મન્સ ઇવેન્ટ્સ માટે સાંભળવાનું બંધ કરવા માટે વપરાય છે.
• takeRecords() method: અવલોકન કરાયેલી પરંતુ હજુ સુધી નિરીક્ષકના કોલબેક ફંક્શન દ્વારા પ્રક્રિયા ન કરાયેલી તમામ પર્ફોર્મન્સ એન્ટ્રીઓની એરે પરત કરે છે.
• Callback Function: એક ફંક્શન જે જ્યારે પણ નવી પર્ફોર્મન્સ એન્ટ્રીઓનું અવલોકન કરવામાં આવે ત્યારે ચલાવવામાં આવે છે. આ ફંક્શનને અવલોકન કરેલી એન્ટ્રીઓ ધરાવતો PerformanceObserverEntryList ઑબ્જેક્ટ મળે છે.

સમર્થિત પર્ફોર્મન્સ એન્ટ્રી પ્રકારો

પર્ફોર્મન્સ ઓબ્ઝર્વર API વિવિધ પ્રકારના પર્ફોર્મન્સ એન્ટ્રી પ્રકારોને સમર્થન આપે છે, જે દરેક વેબ એપ્લિકેશન પર્ફોર્મન્સના વિવિધ પાસાઓમાં વિશિષ્ટ આંતરદૃષ્ટિ પ્રદાન કરે છે. કેટલાક સૌથી સામાન્ય રીતે ઉપયોગમાં લેવાતા એન્ટ્રી પ્રકારોમાં શામેલ છે:

• resource: વ્યક્તિગત સંસાધનો, જેમ કે છબીઓ, સ્ક્રિપ્ટ્સ, સ્ટાઈલશીટ્સ અને ફોન્ટ્સના લોડિંગ વિશે માહિતી પ્રદાન કરે છે. આ એન્ટ્રી પ્રકારમાં સંસાધન URL, પ્રારંભ અને અંતનો સમય, ફેચ સમયગાળો અને ટ્રાન્સફર કદ જેવી વિગતો શામેલ છે.
• mark: તમને તમારા કોડમાં વિશિષ્ટ કોડ વિભાગોના સમયગાળાને માપવા માટે કસ્ટમ ટાઇમસ્ટેમ્પ બનાવવાની મંજૂરી આપે છે. તમે ડેટા પ્રોસેસિંગ અથવા UI રેન્ડરિંગ જેવી જટિલ કામગીરીના પ્રારંભ અને અંતને ટ્રેક કરવા માટે માર્ક્સનો ઉપયોગ કરી શકો છો.
• measure: બે માર્ક્સ વચ્ચેનો સમયગાળો ગણવા માટે વપરાય છે. આ એન્ટ્રી પ્રકાર કસ્ટમ કોડ વિભાગોના પર્ફોર્મન્સને માપવાની અનુકૂળ રીત પ્રદાન કરે છે.
• navigation: DNS લુકઅપ સમય, TCP કનેક્શન સમય, વિનંતી અને પ્રતિસાદ સમય, અને DOM પ્રોસેસિંગ સમય સહિત પૃષ્ઠના નેવિગેશન ટાઇમિંગ વિશે માહિતી પ્રદાન કરે છે.
• longtask: એવા કાર્યોને ઓળખે છે જે મુખ્ય થ્રેડને વિસ્તૃત સમયગાળા (સામાન્ય રીતે 50 મિલિસેકન્ડથી વધુ) માટે બ્લોક કરે છે. લાંબા કાર્યો UI બિનપ્રતિભાવ અને જંકનું કારણ બની શકે છે.
• event: વિશિષ્ટ બ્રાઉઝર ઇવેન્ટ્સ માટે ટાઇમિંગ માહિતી રેકોર્ડ કરે છે, જેમ કે click, keydown, અને scroll.
• layout-shift: પૃષ્ઠ પર અનપેક્ષિત લેઆઉટ શિફ્ટને ટ્રેક કરે છે. આ શિફ્ટ વપરાશકર્તાઓ માટે ખલેલ પહોંચાડી શકે છે અને વપરાશકર્તા અનુભવને નકારાત્મક રીતે અસર કરી શકે છે.
• largest-contentful-paint: પૃષ્ઠ પર સૌથી મોટો સામગ્રી તત્વ દૃશ્યમાન થવામાં જે સમય લાગે છે તે માપે છે.
• first-input-delay: બ્રાઉઝરને પ્રથમ વપરાશકર્તા ક્રિયાપ્રતિક્રિયા (દા.ત., ક્લિક અથવા ટેપ) પર પ્રતિક્રિયા આપવામાં જે સમય લાગે છે તે માપે છે.
• element: પૃષ્ઠ પર વિશિષ્ટ તત્વોના રેન્ડરિંગ માટે ટાઇમિંગ માહિતીની જાણ કરે છે.

વ્યવહારુ ઉદાહરણો અને ઉપયોગના કિસ્સાઓ

પર્ફોર્મન્સ ઓબ્ઝર્વર API નો ઉપયોગ વેબ એપ્લિકેશન પર્ફોર્મન્સ સુધારવા માટે વ્યાપક શ્રેણીના દૃશ્યોમાં થઈ શકે છે. અહીં કેટલાક વ્યવહારુ ઉદાહરણો છે:

1. સંસાધન લોડિંગ સમયનું નિરીક્ષણ

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

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

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

વૈશ્વિક પરિપ્રેક્ષ્ય: સંસાધન લોડિંગ સમયનું નિરીક્ષણ કરતી વખતે, તમારા વપરાશકર્તાઓના ભૌગોલિક સ્થાનને ધ્યાનમાં લો. ધીમા ઇન્ટરનેટ કનેક્શનવાળા પ્રદેશોમાં વપરાશકર્તાઓ નોંધપાત્ર રીતે લાંબો લોડિંગ સમય અનુભવી શકે છે. ભૌગોલિક રીતે વિતરિત સર્વર સાથે CDN નો ઉપયોગ આ સમસ્યાને ઘટાડવામાં મદદ કરી શકે છે.

2. કસ્ટમ કોડ એક્ઝેક્યુશન સમયનું માપન

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

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["measure"] });

            

              
                Copy
              
            
          

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

કાર્યવાહી કરવા યોગ્ય આંતરદૃષ્ટિ: તમારી એપ્લિકેશનના જટિલ માર્ગોને ઓળખો - કોડના ક્રમ કે જે સૌથી વધુ વારંવાર ચલાવવામાં આવે છે અને પર્ફોર્મન્સ પર સૌથી વધુ અસર કરે છે. સૌથી નોંધપાત્ર પર્ફોર્મન્સ લાભો પ્રાપ્ત કરવા માટે આ જટિલ માર્ગો પર તમારા ઑપ્ટિમાઇઝેશન પ્રયત્નોને કેન્દ્રિત કરો.

3. લાંબા કાર્યોને ઓળખવા

longtask એન્ટ્રી પ્રકાર એવા કાર્યોને ઓળખે છે જે મુખ્ય થ્રેડને વિસ્તૃત સમયગાળા માટે બ્લોક કરે છે. લાંબા કાર્યો UI બિનપ્રતિભાવ અને જંકનું કારણ બની શકે છે, જે ખરાબ વપરાશકર્તા અનુભવ તરફ દોરી જાય છે. તમે લાંબા કાર્યોનું નિરીક્ષણ કરવા માટે નીચેના કોડનો ઉપયોગ કરી શકો છો:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

observer.observe({ entryTypes: ["longtask"] });

            

              
                Copy
              
            
          

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

વૈશ્વિક લેખન માર્ગદર્શિકા: તકનીકી ખ્યાલો સમજાવતી વખતે, સ્પષ્ટ અને સંક્ષિપ્ત ભાષાનો ઉપયોગ કરો જે વિવિધ સ્તરની તકનીકી કુશળતા ધરાવતા વાચકો માટે સુલભ હોય. શબ્દજાળથી બચો અને અજાણ્યા શબ્દો માટે સંદર્ભ પ્રદાન કરો.

4. નેવિગેશન ટાઇમિંગનું વિશ્લેષણ

navigation એન્ટ્રી પ્રકાર પૃષ્ઠના નેવિગેશન ટાઇમિંગ વિશે વિગતવાર માહિતી પ્રદાન કરે છે, જેમાં DNS લુકઅપ સમય, TCP કનેક્શન સમય, વિનંતી અને પ્રતિસાદ સમય, અને DOM પ્રોસેસિંગ સમયનો સમાવેશ થાય છે. આ ડેટાનો ઉપયોગ પૃષ્ઠ લોડિંગ પ્રક્રિયામાં બોટલનેકને ઓળખવા માટે થઈ શકે છે. ઉદાહરણ તરીકે, તમે નેવિગેશન ટાઇમિંગનું વિશ્લેષણ કરવા માટે નીચેના કોડનો ઉપયોગ કરી શકો છો:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

observer.observe({ entryTypes: ["navigation"] });

            

              
                Copy
              
            
          

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

SEO ઓપ્ટિમાઇઝેશન: સામગ્રી દરમ્યાન સંબંધિત કીવર્ડ્સનો કુદરતી રીતે ઉપયોગ કરો. આ વિભાગમાં, "નેવિગેશન ટાઇમિંગ," "DNS લુકઅપ સમય," "TCP કનેક્શન સમય," અને "પૃષ્ઠ લોડિંગ પ્રક્રિયા" જેવા કીવર્ડ્સ એકીકૃત રીતે સમાવિષ્ટ છે.

5. લેઆઉટ શિફ્ટનું નિરીક્ષણ

layout-shift એન્ટ્રી પ્રકાર પૃષ્ઠ પર અનપેક્ષિત લેઆઉટ શિફ્ટને ટ્રેક કરે છે. આ શિફ્ટ વપરાશકર્તાઓ માટે ખલેલ પહોંચાડી શકે છે અને વપરાશકર્તા અનુભવને નકારાત્મક રીતે અસર કરી શકે છે. તે ઘણીવાર પરિમાણો વિનાની છબીઓ, મોડી લોડ થતી જાહેરાતો, અથવા ગતિશીલ રીતે દાખલ કરેલી સામગ્રીને કારણે થાય છે. તમે લેઆઉટ શિફ્ટનું નિરીક્ષણ કરવા માટે નીચેના કોડનો ઉપયોગ કરી શકો છો:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

observer.observe({ entryTypes: ["layout-shift"] });

            

              
                Copy
              
            
          

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

કાર્યવાહી કરવા યોગ્ય આંતરદૃષ્ટિ: લેઆઉટ શિફ્ટ સમસ્યાઓને ઓળખવા અને તેમને સુધારવા માટે ભલામણો મેળવવા માટે Google ના Lighthouse જેવા સાધનોનો ઉપયોગ કરો. વપરાશકર્તા ઇનપુટ વિના થતી શિફ્ટને સુધારવાને પ્રાથમિકતા આપો.

6. લાર્જેસ્ટ કન્ટેન્ટફુલ પેઇન્ટ (LCP) નું માપન

largest-contentful-paint એન્ટ્રી પ્રકાર પૃષ્ઠ પર સૌથી મોટો સામગ્રી તત્વ દૃશ્યમાન થવામાં જે સમય લાગે છે તે માપે છે. LCP એ એક મુખ્ય વેબ વાઇટલ છે જે પૃષ્ઠની માનવામાં આવતી લોડિંગ ગતિને પ્રતિબિંબિત કરે છે. સારો LCP સ્કોર 2.5 સેકન્ડ અથવા ઓછો છે. તમે LCP માપવા માટે નીચેના કોડનો ઉપયોગ કરી શકો છો:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

આ કોડ એક પર્ફોર્મન્સ ઓબ્ઝર્વર બનાવે છે જે largest-contentful-paint એન્ટ્રીઓ માટે સાંભળે છે અને પ્રારંભ સમય, તત્વ અને URL ને કન્સોલમાં લોગ કરે છે. આ ડેટાનું વિશ્લેષણ કરીને, તમે સૌથી મોટા સામગ્રી તત્વને ઓળખી શકો છો અને છબીના કદને ઑપ્ટિમાઇઝ કરીને, CDN નો ઉપયોગ કરીને, અથવા સંસાધનને પ્રીલોડ કરીને તેના લોડિંગ સમયને ઑપ્ટિમાઇઝ કરી શકો છો.

વૈશ્વિક પરિપ્રેક્ષ્ય: ધ્યાનમાં લો કે જુદા જુદા વપરાશકર્તાઓને તેમના સ્ક્રીન કદ અને રિઝોલ્યુશનના આધારે જુદા જુદા LCP તત્વો હશે. તમારી એપ્લિકેશનને વિવિધ ઉપકરણો અને સ્ક્રીન કદ પર સારો LCP સ્કોર સુનિશ્ચિત કરવા માટે ડિઝાઇન કરો.

7. ફર્સ્ટ ઇનપુટ ડિલે (FID) નું માપન

first-input-delay એન્ટ્રી પ્રકાર બ્રાઉઝરને પ્રથમ વપરાશકર્તા ક્રિયાપ્રતિક્રિયા (દા.ત., ક્લિક અથવા ટેપ) પર પ્રતિક્રિયા આપવામાં જે સમય લાગે છે તે માપે છે. FID એ અન્ય મુખ્ય વેબ વાઇટલ છે જે પૃષ્ઠની ક્રિયાપ્રતિક્રિયાને પ્રતિબિંબિત કરે છે. સારો FID સ્કોર 100 મિલિસેકન્ડ અથવા ઓછો છે. તમે FID માપવા માટે નીચેના કોડનો ઉપયોગ કરી શકો છો:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

આ કોડ એક પર્ફોર્મન્સ ઓબ્ઝર્વર બનાવે છે જે first-input એન્ટ્રીઓ માટે સાંભળે છે અને વિલંબ, ઇવેન્ટનો પ્રકાર અને લક્ષ્ય તત્વને કન્સોલમાં લોગ કરે છે. આ ડેટાનું વિશ્લેષણ કરીને, તમે લાંબા ઇનપુટ વિલંબના કારણોને ઓળખી શકો છો અને મુખ્ય થ્રેડ પર વિતાવેલા સમયને ઘટાડવા માટે તમારા જાવાસ્ક્રિપ્ટ કોડને ઑપ્ટિમાઇઝ કરી શકો છો.

કાર્યવાહી કરવા યોગ્ય આંતરદૃષ્ટિ: લાંબા સમય સુધી ચાલતા કાર્યોને નાના ટુકડાઓમાં વિભાજીત કરો, કાર્યોને પૃષ્ઠભૂમિ થ્રેડ પર ઑફલોડ કરવા માટે વેબ વર્કર્સનો ઉપયોગ કરો, અને વપરાશકર્તા ક્રિયાપ્રતિક્રિયાઓ માટે પ્રક્રિયા સમય ઘટાડવા માટે તમારા ઇવેન્ટ શ્રોતાઓને ઑપ્ટિમાઇઝ કરો.

અદ્યતન તકનીકો અને વિચારણાઓ

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

1. બફરિંગનો ઉપયોગ

observe() પદ્ધતિમાં buffered વિકલ્પ તમને પર્ફોર્મન્સ ઓબ્ઝર્વર બનાવવામાં આવ્યું તે પહેલાં રેકોર્ડ કરાયેલી ઐતિહાસિક પર્ફોર્મન્સ એન્ટ્રીઓ પુનઃપ્રાપ્ત કરવાની મંજૂરી આપે છે. પ્રારંભિક પૃષ્ઠ લોડ દરમિયાન અથવા તમારો મોનિટરિંગ કોડ લોડ થાય તે પહેલાં થતા પર્ફોર્મન્સ ડેટાને કેપ્ચર કરવા માટે આ ઉપયોગી છે. ઉદાહરણ તરીકે:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

આ કોડ એક પર્ફોર્મન્સ ઓબ્ઝર્વર બનાવે છે જે navigation અને resource એન્ટ્રીઓ માટે સાંભળે છે અને નિરીક્ષક બનાવવામાં આવ્યું તે પહેલાં રેકોર્ડ કરાયેલી તમામ ઐતિહાસિક એન્ટ્રીઓ પુનઃપ્રાપ્ત કરે છે.

2. પર્ફોર્મન્સ એન્ટ્રીઓનું ફિલ્ટરિંગ

તમે તમારા વિશ્લેષણ માટે સૌથી વધુ સુસંગત ડેટા પર ધ્યાન કેન્દ્રિત કરવા માટે વિશિષ્ટ માપદંડોના આધારે પર્ફોર્મન્સ એન્ટ્રીઓને ફિલ્ટર કરી શકો છો. ઉદાહરણ તરીકે, તમે તેમના URL અથવા સામગ્રી પ્રકારના આધારે સંસાધન એન્ટ્રીઓને ફિલ્ટર કરી શકો છો:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

આ કોડ એક પર્ફોર્મન્સ ઓબ્ઝર્વર બનાવે છે જે resource એન્ટ્રીઓ માટે સાંભળે છે અને તેમને ફક્ત .jpg એક્સ્ટેંશનવાળા છબી સંસાધનો માટેની એન્ટ્રીઓ શામેલ કરવા માટે ફિલ્ટર કરે છે.

3. વેબ વર્કર્સનો ઉપયોગ

મુખ્ય થ્રેડના પર્ફોર્મન્સને અસર કરવાનું ટાળવા માટે, તમે પર્ફોર્મન્સ મોનિટરિંગ અને વિશ્લેષણને વેબ વર્કર પર ઑફલોડ કરી શકો છો. આ તમને UI ને બ્લોક કર્યા વિના પૃષ્ઠભૂમિમાં પર્ફોર્મન્સ ડેટા એકત્રિત અને પ્રક્રિયા કરવાની મંજૂરી આપે છે. ઉદાહરણ તરીકે, તમે એક વેબ વર્કર બનાવી શકો છો જે પર્ફોર્મન્સ ઇવેન્ટ્સ માટે સાંભળે છે અને વિશ્લેષણ માટે ડેટા મુખ્ય થ્રેડ પર મોકલે છે.

વૈશ્વિક લેખન માર્ગદર્શિકા: વૈશ્વિક પ્રેક્ષકો માટે સુસંગત હોય તેવા ઉદાહરણોનો ઉપયોગ કરો. કોઈ ચોક્કસ દેશ અથવા સંસ્કૃતિ માટે વિશિષ્ટ હોય તેવા ઉદાહરણો ટાળો.

4. એનાલિટિક્સ પ્લેટફોર્મ સાથે એકીકરણ

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

5. જૂના બ્રાઉઝર્સ માટે પોલીફિલ્સનો ઉપયોગ

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

પર્ફોર્મન્સ ઓબ્ઝર્વર API નો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

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

• ફક્ત તે મેટ્રિક્સનું નિરીક્ષણ કરો જે તમારા લક્ષ્યો માટે સુસંગત છે. પર્ફોર્મન્સને અસર કરી શકે તેવા અતિશય ડેટા એકત્રિત કરવાનું ટાળો.
• સૌથી મહત્વપૂર્ણ ડેટા પર ધ્યાન કેન્દ્રિત કરવા માટે ફિલ્ટરિંગનો ઉપયોગ કરો. તમારે પ્રક્રિયા કરવાની જરૂર હોય તેવા ડેટાની માત્રા ઘટાડવા માટે વિશિષ્ટ માપદંડોના આધારે પર્ફોર્મન્સ એન્ટ્રીઓને ફિલ્ટર કરો.
• પર્ફોર્મન્સ મોનિટરિંગને વેબ વર્કર પર ઑફલોડ કરો. આ પર્ફોર્મન્સ મોનિટરિંગને મુખ્ય થ્રેડના પર્ફોર્મન્સને અસર કરતા અટકાવશે.
• સમય જતાં પર્ફોર્મન્સના વલણોને ટ્રેક કરવા માટે એનાલિટિક્સ પ્લેટફોર્મ સાથે એકીકૃત કરો. આ તમને પર્ફોર્મન્સ રિગ્રેશનને ઓળખવા અને પર્ફોર્મન્સ મેટ્રિક્સને અન્ય વપરાશકર્તા વર્તન ડેટા સાથે સાંકળવાની મંજૂરી આપશે.
• જૂના બ્રાઉઝર્સને સમર્થન આપવા માટે પોલીફિલ્સનો ઉપયોગ કરો. આ ખાતરી કરશે કે તમારો પર્ફોર્મન્સ મોનિટરિંગ કોડ બ્રાઉઝર્સની વિશાળ શ્રેણીમાં કામ કરે છે.
• તમારા પર્ફોર્મન્સ મોનિટરિંગ કોડનું સંપૂર્ણ પરીક્ષણ કરો. ખાતરી કરો કે તમારો કોડ પોતે કોઈ પર્ફોર્મન્સ સમસ્યાઓ રજૂ કરી રહ્યો નથી.
• ડેટા ગોપનીયતા નિયમો પ્રત્યે સજાગ રહો. ખાતરી કરો કે તમે વપરાશકર્તાની સંમતિ વિના કોઈપણ વ્યક્તિગત રીતે ઓળખી શકાય તેવી માહિતી (PII) એકત્રિત કરી રહ્યાં નથી.

SEO ઓપ્ટિમાઇઝેશન: આકર્ષક મેટા વર્ણન બનાવો. બ્લોગ પોસ્ટની સામગ્રીનો સારાંશ આપતું સંક્ષિપ્ત વર્ણન JSON મેટાડેટામાં પ્રદાન કરવામાં આવ્યું છે.

નિષ્કર્ષ

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

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

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