ನಾನು ನನ್ನ ಪೋರ್ಟ್ಫೋಲಿಯೊ ವೆಬ್ಸೈಟ್ ಅನ್ನು ಹೇಗೆ ಉತ್ತಮಗೊಳಿಸಿದೆ
ನಿಮ್ಮ ಪೋರ್ಟ್ಫೋಲಿಯೊ ನಿಮ್ಮ ಮೊದಲ ಪ್ರಭಾವ (first impression). ಅದು ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆದರೆ ಅಥವಾ ಗೂಗಲ್ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳದಿದ್ದರೆ, ನೀವು ಅವಕಾಶಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತೀರಿ. ನಾನು ನನ್ನ ಸೈಟ್ ಅನ್ನು ವೇಗ, SEO ಮತ್ತು ನಿರ್ವಹಣೆಗಾಗಿ (maintenance) ಉತ್ತಮಗೊಳಿಸಿದೆ.
ನನ್ನ ವಿಧಾನ ಇಲ್ಲಿದೆ.
ವೇಗ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ
ಲೀನ್ ಸ್ಟ್ಯಾಕ್ (lean stack) ಅನ್ನು ಆರಿಸಿ. Astro ಅಥವಾ Next.js ನಂತಹ ಸ್ಟ್ಯಾಟಿಕ್ ಸೈಟ್ ಜನರೇಟರ್ಗಳನ್ನು ಬಳಸಿ. ಇವು ಭಾರೀ ಫ್ರೇಮ್ವರ್ಕ್ಗಳಿಗಿಂತ ಕಡಿಮೆ JavaScript ಅನ್ನು ಬಳಸುತ್ತವೆ.
ಭಾರೀ UI ಲೈಬ್ರರಿಗಳನ್ನು ತಪ್ಪಿಸಿ. ಕಿಲೋಬೈಟ್ಗಳನ್ನು ಉಳಿಸಲು ಸರಳವಾದ ಘಟಕಗಳನ್ನು (components) ನೀವೇ ತಯಾರಿಸಿಕೊಳ್ಳಿ.
ನಿಮ್ಮ ಫಾಂಟ್ಗಳನ್ನು ಸ್ವತಃ ಹೋಸ್ಟ್ ಮಾಡಿ (Self-host). DNS ಲುಕ್ಅಪ್ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಥರ್ಡ್-ಪಾರ್ಟಿ CDN ಗಳನ್ನು ತಪ್ಪಿಸಿ. ಲೇಔಟ್ ಶಿಫ್ಟ್ಗಳನ್ನು ತಡೆಯಲು font-display: swap ಬಳಸಿ.
ಪ್ರತಿಯೊಂದು ಚಿತ್ರವನ್ನು ಉತ್ತಮಗೊಳಿಸಿ (Optimize).
- ಚಿತ್ರಗಳನ್ನು WebP ಅಥವಾ AVIF ಗೆ ಪರಿವರ್ತಿಸಿ.
- ಅಪ್ಲೋಡ್ ಮಾಡುವ ಮೊದಲು ಚಿತ್ರಗಳ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಿ (Resize).
- ಸ್ಕ್ರೀನ್ನ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಚಿತ್ರಗಳಿಗೆ
loading="lazy"ಬಳಸಿ. - ಲೇಔಟ್ ಶಿಫ್ಟ್ಗಳನ್ನು ತಡೆಯಲು width ಮತ್ತು height ಅಟ್ರಿಬ್ಯೂಟ್ಗಳನ್ನು ಸೇರಿಸಿ.
ನಿಮ್ಮ JavaScript ಅನ್ನು ನಿರ್ವಹಿಸಿ.
- ನಿಮ್ಮ ರೂಟ್ಗಳನ್ನು (routes) ಕೋಡ್-ಸ್ಪ್ಲಿಟ್ ಮಾಡಿ.
- ಅನಾಲಿಟಿಕ್ಸ್ನಂತಹ ಅನಿವಾರ್ಯವಲ್ಲದ ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ಡಿಫರ್ (Defer) ಮಾಡಿ.
- ನಿಮ್ಮ ಬಂಡಲ್ ಗಾತ್ರವನ್ನು (bundle size) ನಿಯಮಿತವಾಗಿ ಪರಿಶೀಲಿಸಿ.
SEO ಮತ್ತು ರಚನೆ
ಪ್ರತಿ ಪುಟಕ್ಕೂ ವಿಶಿಷ್ಟ ಶೀರ್ಷಿಕೆಗಳು (titles) ಮತ್ತು ಮೆಟಾ ವಿವರಣೆಗಳನ್ನು (meta descriptions) ಬಳಸಿ.
ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಬಳಸಿ. ಪ್ರತಿ ಪುಟಕ್ಕೆ ಒಂದು H1 ಮತ್ತು nav, main, ಮತ್ತು footer ನಂತಹ ಸರಿಯಾದ ಟ್ಯಾಗ್ಗಳನ್ನು ಬಳಸಿ.
Open Graph ಮತ್ತು Twitter Card ಟ್ಯಾಗ್ಗಳನ್ನು ಸೇರಿಸಿ. ಇದು ನೀವು ಲಿಂಕ್ಗಳನ್ನು ಹಂಚಿಕೊಂಡಾಗ ಅವು ನೋಡಲು ಆಕರ್ಷಕವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ.
sitemap.xml ಮತ್ತು robots.txt ಅನ್ನು ಸೇರಿಸಿ. ಇದು ಸರ್ಚ್ ಇಂಜಿನ್ಗಳು ನಿಮ್ಮನ್ನು ಹುಡುಕಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
JSON-LD ಸ್ಟ್ರಕ್ಚರ್ಡ್ ಡೇಟಾವನ್ನು ಬಳಸಿ. ಇದು ನೀವು ಯಾರು ಎಂಬುದನ್ನು ಸರ್ಚ್ ಇಂಜಿನ್ಗಳಿಗೆ ನಿಖರವಾಗಿ ತಿಳಿಸುತ್ತದೆ.
ಅಕ್ಸೆಸಿಬಿಲಿಟಿ (accessibility) ಮತ್ತು SEO ಗಾಗಿ ಯಾವಾಗಲೂ ಚಿತ್ರಗಳಿಗೆ alt text ಸೇರಿಸಿ.
ನಿರ್ವಹಣೆ ಮತ್ತು ವರ್ಕ್ಫ್ಲೋ
ಕಂಟೆಂಟ್ ಅನ್ನು Markdown ಅಥವಾ ಸರಳ JSON ಫೈಲ್ನಲ್ಲಿ ಬರೆಯಿರಿ. ಇದು ಕೋಡ್ ಅನ್ನು ಮುಟ್ಟದೆಯೇ ನೀವು ಪ್ರಾಜೆಕ್ಟ್ಗಳನ್ನು ಸೇರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಒಂದೇ ಕಮಾಂಡ್ನಲ್ಲಿ ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ (deployment) ಸಿದ್ಧಪಡಿಸಿ. Vercel ಅಥವಾ Netlify ಬಳಸಿ, ಇದರಿಂದ ಒಂದು git push ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ತಕ್ಷಣವೇ ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ.
ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು (dependencies) ಕಡಿಮೆ ಇರಿಸಿ. ಇದು ನಂತರದ ಇನ್ಸ್ಟಾಲೇಶನ್ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿ. ಸಮಸ್ಯೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಸರಿಪಡಿಸಲು Google PageSpeed Insights ಅಥವಾ Lighthouse ಬಳಸಿ.
ನಾನು ನನ್ನ ಸೈಟ್ ಅನ್ನು Next.js ಮತ್ತು Vercel ಬಳಸಿ ನಿರ್ಮಿಸಿದ್ದೇನೆ. ಇದು WebP ಚಿತ್ರಗಳು, ವಿಶಿಷ್ಟ ಮೆಟಾಡೇಟಾ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಈಗ, ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸೇರಿಸಲು ಕೇವಲ ಮೂವತ್ತು ಸೆಕೆಂಡುಗಳು ಮಾತ್ರ ಬೇಕಾಗುತ್ತದೆ.
ಮೂಲಭೂತ ಅಂಶಗಳ ಮೇಲೆ ಗಮನಹರಿಸಿ. ನಿಮ್ಮ ಸ್ಟ್ಯಾಕ್, ಚಿತ್ರಗಳು ಮತ್ತು ಮಾರ್ಕಪ್ ಅನ್ನು ಒಮ್ಮೆ ಸರಿಯಾಗಿ ಮಾಡಿಕೊಳ್ಳಿ. ನಿಮ್ಮ ಸೈಟ್ ವೇಗವಾಗಿ ಮತ್ತು ಸುಲಭವಾಗಿ ನಿರ್ವಹಣೆಗೆ ಲಭ್ಯವಿರುತ್ತದೆ.
ನಿಮ್ಮ ಪೋರ್ಟ್ಫೋಲಿಯೊ ಉತ್ತಮಗೊಳಿಸುವಿಕೆಯಲ್ಲಿ (optimization) ಯಾವುದು ದೊಡ್ಡ ಬದಲಾವಣೆಯನ್ನು ತಂದಿತು? ಕಾಮೆಂಟ್ನಲ್ಲಿ ತಿಳಿಸಿ.