મેં મારી પોર્ટફોલિયો વેબસાઇટ કેવી રીતે ઓપ્ટિમાઇઝ કરી
તમારો પોર્ટફોલિયો એ તમારી પ્રથમ છાપ છે. જો તે ધીમેથી લોડ થાય અથવા Google પર દેખાવામાં નિષ્ફળ જાય, તો તમે તકો ગુમાવો છો. મેં મારી સાઇટને સ્પીડ, SEO અને મેન્ટેનન્સ માટે ઓપ્ટિમાઇઝ કરી છે.
અહીં મારો અભિગમ છે.
સ્પીડ અને પરફોર્મન્સ
એક હળવું (lean) સ્ટેક પસંદ કરો. Astro અથવા Next.js જેવા સ્ટેટિક સાઇટ જનરેટર્સનો ઉપયોગ કરો. આ હેવી ફ્રેમવર્ક કરતા ઓછું JavaScript મોકલે છે.
હેવી UI લાઇબ્રેરીઓ ટાળો. કિલોબાઇટ્સ બચાવવા માટે તમારા પોતાના સાદા ઘટકો (components) બનાવો.
તમારા ફોન્ટ્સ જાતે હોસ્ટ કરો. DNS લુકઅપ ઘટાડવા માટે થર્ડ-પાર્ટી CDNs ટાળો. લેઆઉટ શિફ્ટ અટકાવવા માટે font-display: swap નો ઉપયોગ કરો.
દરેક ઇમેજને ઓપ્ટિમાઇઝ કરો.
- ઇમેજને WebP અથવા AVIF માં રૂપાંતરિત કરો.
- અપલોડ કરતા પહેલા ઇમેજનું કદ (Resize) બદલો.
- સ્ક્રીન પર દેખાતી ન હોય તેવી (below the fold) ઇમેજ માટે
loading="lazy"નો ઉપયોગ કરો. - લેઆઉટ શિફ્ટ અટકાવવા માટે width અને height એટ્રિબ્યુટ્સ ઉમેરો.
તમારા JavaScript ને મેનેજ કરો.
- તમારા રૂટ્સને કોડ-સ્પ્લિટ (Code-split) કરો.
- એનાલિટિક્સ જેવા નોન-ક્રિટિકલ સ્ક્રિપ્ટ્સને ડિફર (Defer) કરો.
- તમારા બંડલ સાઇઝનું નિયમિત ઓડિટ કરો.
SEO અને સ્ટ્રક્ચર
દરેક પેજ માટે યુનિક ટાઇટલ અને મેટા ડિસ્ક્રિપ્શનનો ઉપયોગ કરો.
સેમેન્ટિક (semantic) HTML નો ઉપયોગ કરો. દરેક પેજ પર એક H1 અને nav, main, અને footer જેવા યોગ્ય ટેગ્સનો ઉપયોગ કરો.
Open Graph અને Twitter Card ટેગ્સ ઉમેરો. આનાથી જ્યારે તમે લિંક્સ શેર કરો ત્યારે તે સારી દેખાશે.
sitemap.xml અને robots.txt સામેલ કરો. આ સર્ચ એન્જિનને તમને શોધવામાં મદદ કરે છે.
JSON-LD સ્ટ્રક્ચર્ડ ડેટાનો ઉપયોગ કરો. આ સર્ચ એન્જિનને ચોક્કસપણે જણાવે છે કે તમે કોણ છો.
એક્સેસિબિલિટી અને SEO માટે ઇમેજમાં હંમેશા alt ટેક્સ્ટ ઉમેરો.
મેન્ટેનન્સ અને વર્કફ્લો
Markdown અથવા સાદી JSON ફાઇલમાં કન્ટેન્ટ લખો. આનાથી તમે કોડને અડક્યા વગર પ્રોજેક્ટ્સ ઉમેરી શકશો.
વન-કમાન્ડ ડિપ્લોયમેન્ટ સેટ કરો. Vercel અથવા Netlify નો ઉપયોગ કરો જેથી git push કરવાથી તમારી સાઇટ તરત જ અપડેટ થઈ જાય.
ડિપેન્ડન્સીઝ (dependencies) ઓછી રાખો. આનાથી પછીથી ઇન્સ્ટોલેશનની સમસ્યાઓ અટકશે.
તમારી સાઇટનું ટેસ્ટિંગ કરો. સમસ્યાઓ શોધવા અને સુધારવા માટે Google PageSpeed Insights અથવા Lighthouse નો ઉપયોગ કરો.
મેં મારી સાઇટ Next.js અને Vercel સાથે બનાવી છે. તે WebP ઇમેજ, યુનિક મેટાડેટા અને ઓટોમેટિક ડિપ્લોયમેન્ટનો ઉપયોગ કરે છે. હવે, નવો પ્રોજેક્ટ ઉમેરતા માત્ર ત્રીસ સેકન્ડ લાગે છે.
પાયાની બાબતો પર ધ્યાન આપો. તમારો સ્ટેક, ઇમેજ અને માર્કઅપ એકવાર યોગ્ય રીતે સેટ કરી લો. તમારી સાઇટ ઝડપી રહેશે અને મેનેજ કરવામાં સરળ રહેશે.
તમારા પોર્ટફોલિયો ઓપ્ટિમાઇઝેશનમાં કઈ બાબતે સૌથી મોટો તફાવત લાવ્યો? મને કોમેન્ટ્સમાં જણાવો.