𝗔𝘀𝘁𝗿𝗼 𝗚𝗮𝘃𝗲 𝗠𝘆 𝗦𝗶𝘁𝗲 𝗮 𝗣𝗲𝗿𝗳𝗲𝗰𝘁 𝗣𝗮𝗴𝗲𝗦𝗽𝗲𝗲𝗱 𝗦𝗰𝗼𝗿𝗲

𝗔𝘀𝘁𝗿𝗼 എന്റെ സൈറ്റിന് മികച്ച PageSpeed സ്കോർ നൽകി

തുടക്കത്തിൽ എനിക്ക് Astro-യിൽ സംശയമുണ്ടായിരുന്നു. ഞാൻ React-ഉം Next.js-ഉം ആണ് ഉപയോഗിച്ചിരുന്നത്. പിന്നീട് ഞാൻ Zimnovate സൈറ്റ് നിർമ്മിച്ചു. Google PageSpeed അതിന് മികച്ച സ്കോർ നൽകി.

Astro ഡിഫോൾട്ട് ആയി സീറോ JavaScript ആണ് നൽകുന്നത്. മിക്ക ഫ്രെയിംവർക്കുകളും സ്റ്റാറ്റിക് ഉള്ളടക്കത്തിനായി ബ്രൗസറിനെ കോഡ് പ്രവർത്തിപ്പിക്കാൻ നിർബന്ധിക്കുന്നു. എന്നാൽ Astro ബിൽഡ് സമയത്ത് തന്നെ കംപോണന്റുകളെ HTML ആയി റെൻഡർ ചെയ്യുന്നു.

ഇത് Islands Architecture ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ പേജ് ഒരു സ്റ്റാറ്റിക് സമുദ്രം പോലെയാണ്. ഇന്ററാക്റ്റീവ് ആയ ഭാഗങ്ങൾ ദ്വീപുകൾ (islands) പോലെയാണ്. ആ സമുദ്രം വെറും HTML ആണ്. ദ്വീപുകൾ മാത്രമാണ് JavaScript ഉപയോഗിക്കുന്നത്.

കോഡ് എപ്പോൾ ലോഡ് ആകണമെന്ന് നിങ്ങൾക്ക് നിയന്ത്രിക്കാം:

• client:visible ഉപയോക്താവ് സ്ക്രോൾ ചെയ്യുമ്പോൾ ലോഡ് ആകുന്നു.
• client:load ഉടൻ തന്നെ ലോഡ് ആകുന്നു.
• client:idle ബ്രൗസർ ഒഴിവായിരിക്കുമ്പോൾ ലോഡ് ആകുന്നു.

ഞാൻ Astro 4.x, Tailwind CSS, Supabase എന്നിവയാണ് ഉപയോഗിച്ചത്. Supabase ആണ് ബ്ലോഗ് പോസ്റ്റുകൾ സൂക്ഷിക്കുന്നത്. ബിൽഡ് സമയത്ത് Astro ഈ ഡാറ്റ ശേഖരിക്കുന്നു. ഉപയോക്താക്കൾക്ക് കാഷഡ് (cached) HTML ലഭിക്കുന്നു. ഇത് വളരെ വേഗതയുള്ളതാണ്.

ഇത് SEO-യ്ക്ക് സഹായിക്കുന്നു. സെർച്ച് ബോട്ടുകൾക്ക് ഉടൻ തന്നെ HTML കാണാൻ സാധിക്കും. അവ JavaScript-നായി കാത്തുനിൽക്കില്ല.

ഒരു പ്രോജക്റ്റിൽ തന്നെ നിങ്ങൾക്ക് React, Vue, അല്ലെങ്കിൽ Svelte എന്നിവ ഉപയോഗിക്കാം. നിങ്ങളുടെ നിലവിലുള്ള കഴിവുകൾ നിലനിർത്തുന്നതിനൊപ്പം മികച്ച വേഗതയും നിങ്ങൾക്ക് ലഭിക്കുന്നു.

ഇവയ്ക്കായി Astro ഉപയോഗിക്കുക:

• Agency സൈറ്റുകൾ
• Landing pages
• CMS ബ്ലോഗുകൾ
• Portfolios

ഇവയ്ക്കായി Astro ഒഴിവാക്കുക:

• Dashboards
• Real-time apps

വെബ് ലോകം അമിതഭാരമുള്ളതാണ് (bloated). Astro ഇത് പരിഹരിക്കുന്നു. ഇത് പെർഫോമൻസിന് മുൻഗണന നൽകുന്നു.

Source: https://dev.to/vincent_mugondora_599ed60/i-built-the-zimnovate-agency-site-with-astro-and-google-pagespeed-gave-it-a-perfect-score-heres-4img

Optional learning community: https://t.me/GyaanSetuAi