છે વેબ પ્રદર્શનને સુધારવાની ઘણી રીતો. તેમાંથી એક સામગ્રી પ્રીલોડ કરી રહી છે જે પછીથી જરૂર પડશે. CSS પ્રી-પ્રોસેસિંગ, સંપૂર્ણ પૃષ્ઠ પ્રી-રેન્ડરિંગ અથવા ડોમેન નામ રિઝોલ્યુશન. અમે બધું અગાઉથી કરીએ છીએ, અને પછી તરત જ પરિણામ પ્રદર્શિત કરીએ છીએ! મસ્ત લાગે છે.

શું વધુ ઠંડુ છે તે એ છે કે તે ખૂબ જ સરળ રીતે અમલમાં મૂકવામાં આવ્યું છે. પાંચ ટૅગ્સ પ્રારંભિક ક્રિયાઓ કરવા માટે બ્રાઉઝરને આદેશ આપો:

<link rel="prefetch" href="/gu/style.css" as="style" />
<link rel="preload" href="/gu/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

ચાલો ટૂંકમાં સમજાવીએ કે તેઓ શું કરે છે અને ક્યારે તેનો ઉપયોગ કરવો.

આના પર જાઓ: પ્રીલોડ · પ્રીફેચ · પૂર્વજોડાણ · dns-પ્રીફેચ · પ્રીરેન્ડર

પ્રીલોડ

<link rel= "preload"> બ્રાઉઝરને શક્ય તેટલી વહેલી તકે સંસાધન (જેમ કે સ્ક્રિપ્ટ અથવા સ્ટાઈલશીટ) લોડ અને કેશ કરવા કહે છે. આ ઉપયોગી છે જ્યારે પૃષ્ઠ લોડ થયાની થોડીક સેકંડ પછી સંસાધનની જરૂર પડે છે - અને તમે પ્રક્રિયાને ઝડપી બનાવવા માંગો છો.

લોડ કર્યા પછી બ્રાઉઝર સંસાધન સાથે કંઈ કરતું નથી. સ્ક્રિપ્ટો ચલાવવામાં આવતી નથી, સ્ટાઇલ શીટ્સ લાગુ કરવામાં આવતી નથી. સંસાધન ખાલી કેશ કરવામાં આવે છે અને વિનંતી પર તરત જ ઉપલબ્ધ કરવામાં આવે છે.

વાક્યરચના

<link rel="preload" href="/gu/style.css" as="style" />

href તમે ડાઉનલોડ કરવા માંગો છો તે સંસાધન તરફ નિર્દેશ કરે છે.

as બ્રાઉઝરમાં ડાઉનલોડ કરી શકાય તેવું કંઈપણ હોઈ શકે છે:

• style સ્ટાઇલ શીટ્સ માટે,
• script સ્ક્રિપ્ટો માટે,
• font ફોન્ટ્સ માટે,
• fetch ઉપયોગ કરીને લોડ થયેલ સંસાધનો માટે fetch() અથવા XMLHttpRequest,
• સંપૂર્ણ યાદી જુઓ MDN પર.

વિશેષતાનો ઉલ્લેખ કરવો મહત્વપૂર્ણ છે as – આ બ્રાઉઝરને ડાઉનલોડને યોગ્ય રીતે પ્રાથમિકતા અને શેડ્યૂલ કરવામાં મદદ કરે છે.

ક્યારે ઉપયોગ કરવો

જ્યારે નજીકના ભવિષ્યમાં સંસાધનની જરૂર હોય ત્યારે પ્રીલોડિંગનો ઉપયોગ કરો. દાખ્લા તરીકે:

• બાહ્ય ફાઇલમાંથી બિન-માનક ફોન્ટ્સ:

  <!-- index.html -->
  <link rel="stylesheet" href="index.css" />
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  મૂળભૂત રીતે comic-sans.woff2 ડાઉનલોડ અને પાર્સિંગ પછી જ લોડ થવાનું શરૂ થશે index.css. આટલો લાંબો સમય રાહ જોવાનું ટાળવા માટે, તમે ફોન્ટનો ઉપયોગ કરીને પહેલા ડાઉનલોડ કરી શકો છો <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• જો તમે અભિગમ અનુસાર તમારી શૈલીઓને અલગ કરો છો જટિલ CSS બે ભાગોમાં, જટિલ (તાત્કાલિક રેન્ડરીંગ માટે) અને બિન-નિર્ણાયક:

  <style>
  /* Inlined critical styles */
  </style>
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

  આ અભિગમ સાથે, બિન-નિર્ણાયક શૈલીઓ ફક્ત ત્યારે જ લોડ થવાનું શરૂ કરશે જ્યારે JavaScript ચાલે છે, જે રેન્ડરિંગ પછી થોડીક સેકંડમાં થઈ શકે છે. રાહ જોવાને બદલે જેએસનો ઉપયોગ કરો <link rel= "preload">અગાઉ ડાઉનલોડ કરવાનું શરૂ કરવા માટે:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/gu/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

પ્રીલોડિંગનો વધુ પડતો ઉપયોગ કરશો નહીં. જો તમે સળંગ બધું લોડ કરો છો, તો સાઇટ જાદુઈ રીતે ગતિ કરશે નહીં, તેનાથી વિપરીત, તે બ્રાઉઝરને તેના કાર્યનું યોગ્ય રીતે આયોજન કરવાથી અટકાવશે.

પ્રીફેચિંગ સાથે ભેળસેળ ન કરવી. વાપરશો નહિ <link rel= "preload">, જો તમને પૃષ્ઠ લોડ થયા પછી તરત જ સંસાધનની જરૂર ન હોય. જો તમને પછીથી તેની જરૂર હોય, ઉદાહરણ તરીકે આગલા પૃષ્ઠ માટે, તો પછી ઉપયોગ કરો <link rel= "prefetch">.

વિગતો જુઓ

આ જરૂરી ટેગ છે બ્રાઉઝર દ્વારા ચલાવવામાં આવશે (જો તે તેને સપોર્ટ કરે છે), અન્ય તમામ ટૅગ્સથી વિપરીત પ્રીલોડિંગ સાથે સંબંધિત. બ્રાઉઝરમાં ઉલ્લેખિત સંસાધનને ડાઉનલોડ કરવું આવશ્યક છે <link rel="preload">. અન્ય કિસ્સાઓમાં તે પ્રીલોડિંગને અવગણી શકે છે, ઉદાહરણ તરીકે જો તે ધીમા કનેક્શન પર ચાલી રહ્યું હોય.

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

પ્રીફેચ

<link rel= "prefetch"> બ્રાઉઝરને પૃષ્ઠભૂમિમાં સંસાધન (જેમ કે સ્ક્રિપ્ટ અથવા સ્ટાઈલ શીટ) ડાઉનલોડ કરવા અને કેશ કરવા માટે કહે છે. લોડિંગ ઓછી પ્રાધાન્યતા પર થાય છે તેથી તે વધુ મહત્વપૂર્ણ સંસાધનોમાં દખલ કરતું નથી. જો આગલા પૃષ્ઠ પર સંસાધનની જરૂર હોય અને તમે તેને અગાઉથી કેશ કરવા માંગતા હોવ તો આ ઉપયોગી છે.

અહીં પણ, બ્રાઉઝર લોડ કર્યા પછી સંસાધન સાથે કંઈ કરતું નથી. સ્ક્રિપ્ટો ચલાવવામાં આવતી નથી, સ્ટાઇલ શીટ્સ લાગુ કરવામાં આવતી નથી. સંસાધન ખાલી કેશ કરવામાં આવે છે અને વિનંતી પર તરત જ ઉપલબ્ધ કરવામાં આવે છે.

વાક્યરચના

<link rel="prefetch" href="/gu/style.css" as="style" />

href તમે ડાઉનલોડ કરવા માંગો છો તે સંસાધન તરફ નિર્દેશ કરે છે.

as બ્રાઉઝરમાં ડાઉનલોડ કરી શકાય તેવું કંઈપણ હોઈ શકે છે:

• style સ્ટાઇલ શીટ્સ માટે,
• script સ્ક્રિપ્ટો માટે,
• font ફોન્ટ્સ માટે,
• fetch ઉપયોગ કરીને લોડ થયેલ સંસાધનો માટે fetch() અથવા XMLHttpRequest,
• સંપૂર્ણ યાદી જુઓ MDN પર.

વિશેષતાનો ઉલ્લેખ કરવો મહત્વપૂર્ણ છે as - આ બ્રાઉઝરને યોગ્ય રીતે પ્રાથમિકતા અને ડાઉનલોડ શેડ્યૂલ કરવામાં મદદ કરે છે.

ક્યારે ઉપયોગ કરવો

અન્ય પૃષ્ઠોમાંથી સંસાધનો લોડ કરવા માટે, જો તમને બીજા પૃષ્ઠમાંથી કોઈ સંસાધનની જરૂર હોય, અને તમે તેને પ્રીલોડ કરવા માંગો છો, તો તે પૃષ્ઠના રેન્ડરિંગને ઝડપી બનાવો. દાખ્લા તરીકે:

• તમારી પાસે ઓનલાઈન સ્ટોર છે અને 40% વપરાશકર્તાઓ પ્રોડક્ટ પેજ માટે હોમ પેજ છોડી દે છે. વાપરવુ <link rel= "prefetch">, ઉત્પાદન પૃષ્ઠો રેન્ડર કરવા માટે CSS અને JS ફાઇલો લોડ કરી રહ્યાં છે.
• તમારી પાસે એક પૃષ્ઠ એપ્લિકેશન છે, અને વિવિધ પૃષ્ઠો વિવિધ પેકેજો લોડ કરે છે. જ્યારે વપરાશકર્તા કોઈ પૃષ્ઠની મુલાકાત લે છે, ત્યારે તે લિંક કરે છે તે તમામ પૃષ્ઠો માટેના પેકેજો પહેલાથી લોડ કરી શકાય છે.

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

તાત્કાલિક વિનંતીઓ માટે નહીં. વાપરશો નહિ <link rel= "prefetch">, જ્યારે થોડી સેકંડમાં સંસાધનની જરૂર હોય. આ કિસ્સામાં, ઉપયોગ કરો <link rel= "preload">.

વિગતો જુઓ

વૈકલ્પિક ટૅગ. બ્રાઉઝરને આ સૂચનાનું પાલન કરવું જરૂરી નથી; તે તેને અવગણી શકે છે, ઉદાહરણ તરીકે, ધીમા કનેક્શન પર.

Chrome માં પ્રાથમિકતા. Chrome માં <link rel= "prefetch"> સામાન્ય રીતે ન્યૂનતમ અગ્રતા સાથે ચલાવવામાં આવે છે (જુઓ સંપૂર્ણ અગ્રતા કોષ્ટક), એટલે કે, બાકીનું બધું લોડ કર્યા પછી.

પૂર્વજોડાણ

<link rel= "preconnect"> જ્યારે તમે ભવિષ્યમાં કનેક્શન સેટઅપને ઝડપી બનાવવા માંગતા હોવ ત્યારે બ્રાઉઝરને અગાઉથી ડોમેન સાથે કનેક્ટ થવા માટે પૂછે છે.

જો બ્રાઉઝર નવા તૃતીય-પક્ષ ડોમેનમાંથી કોઈપણ સંસાધનો મેળવે તો તેણે કનેક્શન સ્થાપિત કરવું આવશ્યક છે. ઉદાહરણ તરીકે, જો તે Google ફોન્ટ્સ લોડ કરે છે, તો CDN માંથી ફોન્ટ્સ પ્રતિક્રિયા આપે છે અથવા API સર્વર તરફથી JSON પ્રતિસાદની વિનંતી કરે છે.

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

વાક્યરચના

<link rel= "preconnect" href="https://api.my-app.com" />

href ડોમેન નામ સૂચવે છે જેના માટે તમે IP સરનામું નક્કી કરવા માંગો છો. ઉપસર્ગ સાથે સ્પષ્ટ કરી શકાય છે (https://domain.com) અથવા તેના વિના (//domain.com).

ક્યારે ઉપયોગ કરવો

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

• તમારી એપ્લિકેશન હોસ્ટ કરવામાં આવી છે my-app.com અને AJAX ને વિનંતી કરે છે api.my-app.com: તમે ચોક્કસ પ્રશ્નો અગાઉથી જાણતા નથી કારણ કે તે JS થી ગતિશીલ રીતે બનાવવામાં આવે છે. અહીં ડોમેન સાથે પ્રી-કનેક્ટ કરવા માટે ટેગનો ઉપયોગ કરવો એકદમ યોગ્ય છે.
• તમારી એપ્લિકેશન હોસ્ટ કરવામાં આવી છે my-app.com અને Google ફોન્ટ્સનો ઉપયોગ કરે છે. તેઓ બે પગલામાં ડાઉનલોડ થાય છે: પ્રથમ, CSS ફાઇલ ડોમેનમાંથી ડાઉનલોડ થાય છે fonts.googleapis.com, પછી આ ફાઇલ સાથે ફોન્ટની વિનંતી કરે છે fonts.gstatic.com. તમે જાણી શકતા નથી કે કયા ચોક્કસ ફોન્ટ ફાઇલોમાંથી છે fonts.gstatic.com જ્યાં સુધી તમે CSS ફાઇલ લોડ ન કરો ત્યાં સુધી તમારે જરૂર પડશે, જેથી અમે પહેલાથી જ પ્રારંભિક કનેક્શન બનાવી શકીએ.

કેટલીક તૃતીય પક્ષ સ્ક્રિપ્ટ અથવા શૈલીને થોડી ઝડપી બનાવવા માટે આ ટેગનો ઉપયોગ કરો પૂર્વ-સ્થાપિત જોડાણને કારણે.

વધુ પડતો ઉપયોગ ન કરો. કનેક્શન સ્થાપિત કરવું અને જાળવવું એ ક્લાયન્ટ અને સર્વર બંને માટે ખર્ચાળ કામગીરી છે. વધુમાં વધુ 4-6 ડોમેન્સ માટે આ ટેગનો ઉપયોગ કરો.

વિગતો જુઓ

વૈકલ્પિક ટૅગ. બ્રાઉઝરને આ સૂચનાને અનુસરવાની જરૂર નથી અને તે તેને અવગણી શકે છે, ઉદાહરણ તરીકે, જો ઘણા કનેક્શન્સ પહેલેથી જ સ્થાપિત થઈ ગયા હોય અથવા કોઈ અન્ય કિસ્સામાં.

કનેક્શન પ્રક્રિયામાં શું શામેલ છે?. દરેક સાઇટ સાથે કનેક્ટ થવા માટે, બ્રાઉઝરને નીચે મુજબ કરવું આવશ્યક છે:

• DNS રિઝોલ્યુશન. સર્વર IP સરનામું શોધો (216.58.215.78) ઉલ્લેખિત ડોમેન નામ માટે (google.com).
• TCP હેન્ડશેક. સર્વર સાથે TCP કનેક્શન શરૂ કરવા માટે પેકેટો (ક્લાયન્ટ → સર્વર → ક્લાયન્ટ) એક્સચેન્જ કરો.
• TLS હેન્ડશેક (ફક્ત HTTPS સાઇટ્સ). સુરક્ષિત TLS સત્ર શરૂ કરવા માટે પેકેટ એક્સચેન્જના બે રાઉન્ડ (ક્લાયન્ટ → સર્વર → ક્લાયંટ → સર્વર → ક્લાયન્ટ)

નોંધ: HTTP/3 હેન્ડશેક મિકેનિઝમને સુધારશે અને ઝડપી બનાવશે, પરંતુ તે હજુ પણ ઘણું દૂર છે.

dns-પ્રીફેચ

<link rel= "dns-prefetch"> બ્રાઉઝરને ડોમેન માટે અગાઉથી DNS રિઝોલ્યુશન કરવા માટે પૂછે છે જો તમે તેની સાથે ટૂંક સમયમાં કનેક્ટ થશો અને પ્રારંભિક કનેક્શનને ઝડપી બનાવવા માંગો છો.

બ્રાઉઝરને ડોમેનનું IP સરનામું નક્કી કરવું આવશ્યક છે જો તે નવા તૃતીય-પક્ષ ડોમેનમાંથી કોઈપણ સંસાધનો પુનઃપ્રાપ્ત કરશે. ઉદાહરણ તરીકે, Google ફોન્ટ્સ લોડ કરવું, CDN માંથી ફોન્ટ્સ પ્રતિક્રિયા કરવી અથવા API સર્વર તરફથી JSON પ્રતિસાદની વિનંતી કરવી.

દરેક નવા ડોમેન માટે, DNS રેકોર્ડ રિઝોલ્યુશન સામાન્ય રીતે લગભગ 20-120 ms લે છે. આ ફક્ત આપેલ ડોમેનમાંથી પ્રથમ સંસાધનના લોડિંગને અસર કરે છે, પરંતુ તેમ છતાં વિલંબનો પરિચય આપે છે. જો આપણે DNS રિઝોલ્યુશન અગાઉથી કરીએ છીએ, તો અમે સમય બચાવીશું અને સંસાધન ઝડપથી લોડ કરીશું.

વાક્યરચના

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href ડોમેન નામ સૂચવે છે જેના માટે તમે IP સરનામું સેટ કરવા માંગો છો. ઉપસર્ગ સાથે સ્પષ્ટ કરી શકાય છે (https://domain.com) અથવા તેના વિના (//domain.com).

ક્યારે ઉપયોગ કરવો

ડોમેન્સ માટે ઉપયોગ કરો જેની ટૂંક સમયમાં જરૂર પડશે ત્યાંથી સંસાધનો ડાઉનલોડ કરવા માટે કે જેના વિશે બ્રાઉઝર અગાઉથી જાણતું નથી. દાખ્લા તરીકે:

• તમારી એપ્લિકેશન હોસ્ટ કરવામાં આવી છે my-app.com અને AJAX ને વિનંતી કરે છે api.my-app.com: તમે ચોક્કસ પ્રશ્નો અગાઉથી જાણતા નથી કારણ કે તે JS થી ગતિશીલ રીતે બનાવવામાં આવે છે. અહીં ડોમેન સાથે પ્રી-કનેક્ટ કરવા માટે ટેગનો ઉપયોગ કરવો એકદમ યોગ્ય છે.
• તમારી એપ્લિકેશન હોસ્ટ કરવામાં આવી છે my-app.com, અને Google ફોન્ટ્સનો ઉપયોગ કરે છે. તેઓ બે પગલામાં ડાઉનલોડ થાય છે: પ્રથમ, CSS ફાઇલ ડોમેનમાંથી ડાઉનલોડ થાય છે fonts.googleapis.com, પછી આ ફાઇલ સાથે ફોન્ટની વિનંતી કરે છે fonts.gstatic.com. તમે જાણી શકતા નથી કે કયા ચોક્કસ ફોન્ટ ફાઇલોમાંથી છે fonts.gstatic.com જ્યાં સુધી તમે CSS ફાઇલ લોડ ન કરો ત્યાં સુધી તમારે તેની જરૂર પડશે, જેથી અમે ફક્ત પ્રારંભિક કનેક્શન અગાઉથી જ બનાવી શકીએ.

કેટલીક તૃતીય પક્ષ સ્ક્રિપ્ટ અથવા શૈલીને થોડી ઝડપી બનાવવા માટે આ ટેગનો ઉપયોગ કરો પૂર્વ-સ્થાપિત જોડાણને કારણે.

કૃપા કરીને સમાન લક્ષણોની નોંધ લો <link rel= "dns-prefetch"/> и <link rel= "preconnect">. સામાન્ય રીતે એક ડોમેન માટે તેનો એકસાથે ઉપયોગ કરવાનો કોઈ અર્થ નથી: <link rel= "preconnect"> પહેલેથી જ સમાવેશ થાય છે <link rel= "dns-prefetch"/> અને ઘણું બધું. આને બે કિસ્સાઓમાં ન્યાયી ઠેરવી શકાય છે:

• શું તમે જૂના બ્રાઉઝર્સને સપોર્ટ કરવા માંગો છો?. <link rel= "dns-prefetch" /> દ્વારા આધારભૂત IE10 અને સફારી 5 થી. <link rel= "preconnect"> ક્રોમ અને ફાયરફોક્સમાં થોડા સમય માટે સપોર્ટેડ હતું, પરંતુ માત્ર 11.1 માં સફારીમાં ઉમેરવામાં આવ્યું હતું અને હજુ પણ IE/Edge માં સપોર્ટેડ નથી. જો તમારે આ બ્રાઉઝર્સને સપોર્ટ કરવાની જરૂર હોય, તો ઉપયોગ કરો <link rel= "dns-prefetch" /> માટે બેકઅપ વિકલ્પ તરીકે <link rel= "preconnect">.
• તમે 4-6 થી વધુ ડોમેન્સ સાથે કનેક્શનને ઝડપી બનાવવા માંગો છો. ટેગ <link rel= "preconnect"> 4-6 થી વધુ ડોમેન્સ સાથે ઉપયોગ કરવાની ભલામણ કરવામાં આવતી નથી, કારણ કે કનેક્શન સ્થાપિત કરવું અને જાળવવું એ ખર્ચાળ કામગીરી છે. <link rel= "dns-prefetch" /> ઓછા સંસાધનોનો ઉપયોગ કરે છે, તેથી જો જરૂરી હોય તો તેનો ઉપયોગ કરો.

વિગતો જુઓ

વૈકલ્પિક ટૅગ. બ્રાઉઝરને આ સૂચનાનું પાલન કરવું જરૂરી નથી, તેથી તે DNS રિઝોલ્યુશન કરી શકશે નહીં, ઉદાહરણ તરીકે, જો પૃષ્ઠ પર અથવા અન્ય કોઈ કિસ્સામાં આવા ઘણા ટૅગ્સ હોય.

DNS શું છે. ઈન્ટરનેટ પર દરેક સર્વર પાસે એક અનન્ય IP સરનામું છે, જે દેખાય છે 216.58.215.78. સાઇટનું નામ સામાન્ય રીતે બ્રાઉઝરના એડ્રેસ બારમાં દાખલ કરવામાં આવે છે (ઉદાહરણ તરીકે, google.com), અને DNS (ડોમેન નેમ સિસ્ટમ) સર્વર્સ તેને સર્વરના IP સરનામા સાથે મેચ કરે છે (216.58.215.78).

IP સરનામું નક્કી કરવા માટે, બ્રાઉઝરએ DNS સર્વરને ક્વેરી કરવી આવશ્યક છે. નવા તૃતીય-પક્ષ ડોમેન સાથે કનેક્ટ કરતી વખતે તે 20−120 ms લે છે.

DNS કેશ્ડ છે, જો કે ખૂબ વિશ્વસનીય નથી. કેટલાક OS અને બ્રાઉઝર DNS ક્વેરીઝને કેશ કરે છે: આ પુનરાવર્તિત ક્વેરીઝ પર સમય બચાવશે, પરંતુ કેશીંગ પર આધાર રાખી શકાતો નથી. Linux પર તે સામાન્ય રીતે બિલકુલ કામ કરતું નથી. ક્રોમ પાસે DNS કેશ છે, પરંતુ તે માત્ર એક મિનિટ સુધી ચાલે છે. વિન્ડોઝ પાંચ દિવસ માટે DNS પ્રતિસાદોને કેશ કરે છે.

પ્રીરેન્ડર

<link rel= "prerender"> બ્રાઉઝરને URL ડાઉનલોડ કરવા અને તેને અદ્રશ્ય ટેબમાં પ્રદર્શિત કરવા માટે કહે છે. જ્યારે વપરાશકર્તા લિંક પર ક્લિક કરે છે, ત્યારે પૃષ્ઠ તરત જ પ્રદર્શિત થવું જોઈએ. આ ઉપયોગી છે જો તમને ખાતરી હોય કે વપરાશકર્તા ચોક્કસ પૃષ્ઠની મુલાકાત લેશે અને તેના પ્રદર્શનને ઝડપી બનાવવા માંગે છે.

2019 માં, આ ટેગની અસાધારણ અસરકારકતા હોવા છતાં (અથવા તેના કારણે). <link rel= "prerender"> મુખ્ય બ્રાઉઝર્સમાં નબળી રીતે સપોર્ટેડ. વધુ વિગતો જુઓ. નીચે.

વાક્યરચના

<link rel="prerender" href="https://my-app.com/pricing" />

href તમે પૃષ્ઠભૂમિમાં રેન્ડરિંગ શરૂ કરવા માંગો છો તે URL પર નિર્દેશ કરે છે.

ક્યારે ઉપયોગ કરવો

જ્યારે તમે ખરેખર ખાતરી કરો કે વપરાશકર્તા ચોક્કસ પૃષ્ઠ પર જશે. જો તમારી પાસે "ટનલ" છે જેના દ્વારા પૃષ્ઠ A પર મુલાકાતીઓમાંથી 70% પૃષ્ઠ B પર જાય છે <link rel= "prerender"> પૃષ્ઠ A પર પૃષ્ઠ Bને ખૂબ જ ઝડપથી પ્રદર્શિત કરવામાં મદદ કરશે.

વધુ પડતો ઉપયોગ ન કરો. બેન્ડવિડ્થ અને મેમરીના સંદર્ભમાં પ્રી-રેન્ડરિંગ અત્યંત ખર્ચાળ છે. વાપરશો નહિ <link rel= "prerender"> એક કરતાં વધુ પૃષ્ઠ માટે.

વિગતો જુઓ

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

મેમરી બચાવવા માટે Chrome સંપૂર્ણ રેન્ડરિંગ કરતું નથીઅને માત્ર NoState પ્રીલોડ કરો. આનો અર્થ એ છે કે Chrome પૃષ્ઠ અને તેના તમામ સંસાધનો લોડ કરે છે, પરંતુ JavaScript રેન્ડર અથવા એક્ઝિક્યુટ કરતું નથી.

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

સારાંશ

વાપરવુ:

• <link rel= "preload"> - જ્યારે તમને થોડી સેકંડમાં સંસાધનની જરૂર હોય
• <link rel= "prefetch"> - જ્યારે તમને આગલા પૃષ્ઠ પર સંસાધનની જરૂર હોય
• <link rel= "preconnect"> - જ્યારે તમે જાણો છો કે તમને ટૂંક સમયમાં સંસાધનની જરૂર પડશે, પરંતુ તમે હજી સુધી તેનું સંપૂર્ણ URL જાણતા નથી
• <link rel= "dns-prefetch"> - તેવી જ રીતે, જ્યારે તમે જાણો છો કે તમને ટૂંક સમયમાં સંસાધનની જરૂર પડશે, પરંતુ તમે હજી સુધી તેનું સંપૂર્ણ URL જાણતા નથી (જૂના બ્રાઉઝર્સ માટે)
• <link rel= "prerender"> — જ્યારે તમને ખાતરી હોય કે વપરાશકર્તાઓ ચોક્કસ પૃષ્ઠ પર જશે, અને તમે તેના પ્રદર્શનને ઝડપી બનાવવા માંગો છો

સોર્સ: www.habr.com