എന്റെ പോർട്ട്ഫോളിയോ വെബ്സൈറ്റ് ഞാൻ എങ്ങനെ ഒപ്റ്റിമൈസ് ചെയ്തു
നിങ്ങളുടെ പോർട്ട്ഫോളിയോ നിങ്ങളുടെ ആദ്യ മതിപ്പാണ് (first impression). ഇത് പതുക്കെ ലോഡ് ആകുകയോ ഗൂഗിളിൽ കാണാൻ സാധിക്കാതെ വരികയോ ചെയ്താൽ, നിങ്ങൾക്ക് അവസരങ്ങൾ നഷ്ടപ്പെടും. വേഗത (speed), SEO, മെയിന്റനൻസ് എന്നിവയ്ക്കായി ഞാൻ എന്റെ സൈറ്റ് ഒപ്റ്റിമൈസ് ചെയ്തു.
എന്റെ രീതി ഇതാ.
വേഗതയും പെർഫോമൻസും (Speed and Performance)
ലഘുവായ ഒരു സ്റ്റാക്ക് (lean stack) തിരഞ്ഞെടുക്കുക. Astro അല്ലെങ്കിൽ Next.js പോലുള്ള സ്റ്റാറ്റിക് സൈറ്റ് ജനറേറ്ററുകൾ ഉപയോഗിക്കുക. ഇവ വലിയ ഫ്രെയിംവർക്കുകളെ അപേക്ഷിച്ച് കുറഞ്ഞ അളവിൽ മാത്രമേ JavaScript ഉപയോഗിക്കുന്നുള്ളൂ.
ഭാരമേറിയ UI ലൈബ്രറികൾ ഒഴിവാക്കുക. കിലോബൈറ്റുകൾ ലാഭിക്കുന്നതിനായി ലളിതമായ കോംപോണന്റുകൾ സ്വയം നിർമ്മിക്കുക.
ഫോണ്ടുകൾ സെൽഫ്-ഹോസ്റ്റ് ചെയ്യുക. DNS ലുക്കപ്പുകൾ കുറയ്ക്കുന്നതിനായി തേർഡ് പാർട്ടി CDN-കൾ ഒഴിവാക്കുക. ലേഔട്ട് ഷിഫ്റ്റുകൾ (layout shifts) തടയാൻ font-display: swap ഉപയോഗിക്കുക.
ഓരോ ചിത്രവും ഒപ്റ്റിമൈസ് ചെയ്യുക.
- ചിത്രങ്ങൾ WebP അല്ലെങ്കിൽ AVIF ഫോർമാറ്റിലേക്ക് മാറ്റുക.
- അപ്ലോഡ് ചെയ്യുന്നതിന് മുമ്പ് ചിത്രങ്ങളുടെ വലിപ്പം ക്രമീകരിക്കുക.
- സ്ക്രീനിന് താഴെയുള്ള ചിത്രങ്ങൾക്ക്
loading="lazy"ഉപയോഗിക്കുക. - ലേഔട്ട് ഷിഫ്റ്റുകൾ ഒഴിവാക്കാൻ width, height അറ്റ്രിബ്യൂട്ടുകൾ ചേർക്കുക.
നിങ്ങളുടെ JavaScript നിയന്ത്രിക്കുക.
- റൂട്ടുകൾ കോഡ്-സ്പ്ലിറ്റ് (Code-split) ചെയ്യുക.
- അനലിറ്റിക്സ് പോലുള്ള അത്യന്താപേക്ഷിതമല്ലാത്ത സ്ക്രിപ്റ്റുകൾ ഡെഫർ (Defer) ചെയ്യുക.
- ബണ്ടിൽ സൈസ് (bundle size) കൃത്യമായി പരിശോധിക്കുക.
SEO-യും ഘടനയും (SEO and Structure)
ഓരോ പേജിനും വ്യത്യസ്തമായ ടൈറ്റിലുകളും മെറ്റാ ഡിസ്ക്രിപ്ഷനുകളും ഉപയോഗിക്കുക.
സെമാന്റിക് HTML ഉപയോഗിക്കുക. ഓരോ പേജിലും ഒരു H1 മാത്രം ഉപയോഗിക്കുക, കൂടാതെ nav, main, footer തുടങ്ങിയ ശരിയായ ടാഗുകൾ ഉപയോഗിക്കുക.
Open Graph, Twitter Card ടാഗുകൾ ചേർക്കുക. ഇത് നിങ്ങളുടെ ലിങ്കുകൾ ഷെയർ ചെയ്യുമ്പോൾ അവ ആകർഷകമായി കാണാൻ സഹായിക്കും.
sitemap.xml, robots.txt എന്നിവ ഉൾപ്പെടുത്തുക. സെർച്ച് എഞ്ചിനുകൾക്ക് നിങ്ങളെ എളുപ്പത്തിൽ കണ്ടെത്താൻ ഇത് സഹായിക്കും.
JSON-LD സ്ട്രക്ചേർഡ് ഡാറ്റ ഉപയോഗിക്കുക. നിങ്ങൾ ആരാണെന്ന് സെർച്ച് എഞ്ചിനുകൾക്ക് കൃത്യമായി മനസ്സിലാക്കാൻ ഇത് സഹായിക്കും.
ആക്സസിബിലിറ്റിക്കും (accessibility) SEO-യ്ക്കുമായി ചിത്രങ്ങൾക്ക് എപ്പോഴും alt text ചേർക്കുക.
മെയിന്റനൻസും വർക്ക്ഫ്ലോയും (Maintenance and Workflow)
കണ്ടന്റ് Markdown അല്ലെങ്കിൽ ലളിതമായ ഒരു JSON ഫയലിൽ എഴുതുക. ഇത് കോഡ് മാറ്റാതെ തന്നെ പുതിയ പ്രോജക്റ്റുകൾ ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
ഒറ്റ കമാൻഡ് ഉപയോഗിച്ച് ഡിപ്ലോയ്മെന്റ് (one-command deployment) ക്രമീകരിക്കുക. Vercel അല്ലെങ്കിൽ Netlify ഉപയോഗിക്കുക, അങ്ങനെ ഒരു git push വഴി നിങ്ങളുടെ സൈറ്റ് ഉടൻ തന്നെ അപ്ഡേറ്റ് ചെയ്യാം.
ഡിപെൻഡൻസികൾ (dependencies) കുറയ്ക്കുക. ഇത് പിന്നീട് ഇൻസ്റ്റാളേഷൻ പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ സഹായിക്കും.
നിങ്ങളുടെ സൈറ്റ് പരിശോധിക്കുക. പ്രശ്നങ്ങൾ കണ്ടെത്താനും പരിഹരിക്കാനും Google PageSpeed Insights അല്ലെങ്കിൽ Lighthouse ഉപയോഗിക്കുക.
ഞാൻ എന്റെ സൈറ്റ് Next.js, Vercel എന്നിവ ഉപയോഗിച്ചാണ് നിർമ്മിച്ചത്. ഇത് WebP ചിത്രങ്ങളും, യൂണിക് മെറ്റാഡേറ്റയും, ഓട്ടോമാറ്റിക് ഡിപ്ലോയ്മെന്റും ഉപയോഗിക്കുന്നു. ഇപ്പോൾ, ഒരു പുതിയ പ്രോജക്റ്റ് ചേർക്കാൻ വെറും മുപ്പത് സെക്കൻഡ് മതിയാകും.
അടിസ്ഥാന കാര്യങ്ങളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക. നിങ്ങളുടെ സ്റ്റാക്ക്, ചിത്രങ്ങൾ, മാർക്കപ്പ് എന്നിവ ഒരിക്കൽ ശരിയായി ക്രമീകരിക്കുക. നിങ്ങളുടെ സൈറ്റ് വേഗതയുള്ളതായും എളുപ്പത്തിൽ കൈകാര്യം ചെയ്യാവുന്നതായും നിലനിൽക്കും.
നിങ്ങളുടെ പോർട്ട്ഫോളിയോ ഒപ്റ്റിമൈസ് ചെയ്തതിൽ ഏറ്റവും വലിയ മാറ്റം വരുത്തിയത് എന്താണ്? കമന്റുകളിൽ എന്നോട് പറയൂ.