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

𝗔𝘀𝘁𝗿𝗼 એ મારી સાઇટને પરફેક્ટ 𝗣𝗮𝗴𝗲𝗦𝗽𝗲𝗲𝗱 સ્કોર આપ્યો

શરૂઆતમાં મને 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 એપ્સ માટે

વેબ અત્યારે ભારે (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

વૈકલ્પિક લર્નિંગ કોમ્યુનિટી: https://t.me/GyaanSetuAi