preload, prefetch અને preconnect જેવા resource hints શું છે?

Question

Accepted Answer

**Resource hints** એ `` ટૅગ્સ છે જે બ્રાઉઝરને વાસ્તવો પુનઃપ્રાપ્ત અથવા જોડાણ કરવા માટે વહેલી તકે સૂચિત કરે છે, લોડ કામગીરી ઑપ્ટિમાઇઝ કરે છે. દરેક એક અલગ સમય/પ્રાધાન્યતા જરૂર પૂરી કરે છે. ```html ``` ## દરેક એક શું કરે છે - **`preload`** — "મને આ **વર્તમાન પૃષ્ઠ માટે** જરૂર છે, આને હવે ઉચ્ચ પ્રાધાન્યતા સાથે લાવો." નિર્ણાયક સંસાધનો માટે જે પાર્સર વાર માં શોધે છે: ફોન્ટ્સ, હીરો ઇમેજ, CSS-સંબંધિત અસ્કયામતો. બ્રાઉઝર સાચો પ્રાધાન્યતા/હેડર્સ સેટ કરે તેના માટે `as` જરૂરી છે. - **`preconnect`** — "હું આ **origin** માં સીધો જોડાશ; હવે DNS લુકઅપ + TCP + TLS હેન્ડશેક કરો." ત્રીજા પક્ષ (API, ફોન્ટ હોસ્ટ, CDN) તરફ પ્રથમ વિનંતી પહેલા રાઉન્ડ-ટ્રિપ બચાવે છે. કેટલાક નિર્ણાયક ઑરિજીન્સ માટે વાપરો. - **`dns-prefetch`** — preconnect નું હળવું સંસ્કરણ: માત્ર DNS રિજોલ્યુશન. ઘણા ઑરિજીન્સ માટે સારો ફોલબેક. - **`prefetch`** — "મને આ **શાયદ** **આગલું** નેવિગેશન માટે જરૂર પડશે; જ્યારે નિષ્ક્રિય હોય ત્યારે ઓછી પ્રાધાન્યતા સાથે લાવો." શક્ય આગલા પૃષ્ઠો/અસ્કયામતો માટે. ભવિષ્ય માટે કેશ કર્યું છે, વર્તમાન પૃષ્ઠ માટે નહીં. ## એક સામાન્ય વાસ્તવ ઉદાહરણ: ફોન્ટ્સ ```html ``` ફોન્ટ્સ વાર માં શોધાય છે (બ્રાઉઝર પ્રથમ CSS પાર્સ કરવો જોઈએ), તેથી તેમને પ્રીલોડ કરવાથી અદૃશ્ય-ટેક્સ્ટ વિલંબ ટાળી શકાય છે. ## સતર્કતા: આધાર-સંકેત કરશો નહીં સમસ્ત પ્રીલોડ કરવાથી હેતુ પરાજિત હોય છે — તે વાસ્તવિક નિર્ણાયક સંસાધનો સાથે બેન્ડવિડ્થ માટે સ્પર્ધા કરે છે. માત્ર કેટલાક જે સૌથી મહત્વપૂર્ણ છે તેના માટે સંકેત આપો. ## શા માટે તે મહત્વપૂર્ણ છે Resource hints નિર્ણાયક પાથ પર વિલંબ શેવે છે: `preconnect` ત્રીજા પક્ષ માટે હેન્ડશેક વિલંબ દૂર કરે છે, `preload` વાર માં શોધાયેલ નિર્ણાયક અસ્કયામતોને પ્રાધાન્ય આપે છે (ફોન્ટ્સ, LCP ઇમેજ), અને `prefetch` *આગલું* નેવિગેશન તાત્ક્ષણિક લાગે છે. શસ્ત્રપ્રયોગ વ્યવહાર, તેઓ Core Web Vitals માં અર્થપૂર્ણ રીતે સુધાર કરે છે.