ஒரு சரியான Lighthouse மதிப்பெண்ணிற்குப் பின்னால் உள்ள ஒவ்வொரு மேம்படுத்தலும்

நான் எனது தளத்தில் தொடர்ந்து Lighthouse-ஐ இயக்குகிறேன். ஒவ்வொரு முறையும் உள்ளூர் இயக்கத்திலும் (local run) மற்றும் Vercel-ன் Real Experience Score-லும் இது 100 ஆகவே உள்ளது.

இந்த மதிப்பெண்கள் ஏதோ ஒரு பொதுவான சரிபார்ப்புப் பட்டியலிலிருந்து (checklist) வருவதல்ல. வேலையை உலாவியிலிருந்து (browser) பில்ட் நிலைக்கு (build stage) மாற்றுவதன் மூலம் நான் இவற்றை அடைகிறேன்.

நான் இதைச் சரியாக எப்படிச் செய்கிறேன் என்பது இதோ.

வேலையை பில்ட் நேரத்திற்கு மாற்றவும்

பெரும்பாலான வழிகாட்டிகள் அனைத்தையும் lazy-load செய்யச் சொல்வார்கள். நான் prerender செய்வதையே விரும்புகிறேன். நான் prerendering வசதி செயல்படுத்தப்பட்ட TanStack Start-ஐப் பயன்படுத்துகிறேன்.

இது பில்ட் செய்யும் போது முழுத் தளத்தையும் static HTML ஆக மாற்றுகிறது. முதல் பக்கத்தைக் காட்டுவதற்காக உலாவியானது கனமான JavaScript-ஐ இயக்க வேண்டிய அவசியமில்லை. பயனர் என்டர் (enter) அழுத்தும்போதே HTML ஏற்கனவே தயாராக இருக்கும்.

சிக்கலான தர்க்கங்களை முன்கூட்டியே கணக்கிடுங்கள்

எனது முகப்புப் பக்கத்தில் 5,000 புள்ளிகளைக் கொண்ட ஒரு உலக வரைபடம் உள்ளது. பொதுவாக, ஒரு library GeoJSON-ஐப் பகுப்பாய்வு செய்து (parse) main thread-ல் கணிதச் செயல்பாடுகளைச் செய்யும். இது பக்கத்தை 1,000ms வரை முடக்கும் (blocks).

கணிதச் செயல்பாடுகளை ஒரு build script-க்கு மாற்றுவதன் மூலம் நான் இதைத் தீர்த்தேன்.

• 5,000 புள்ளிகளுக்கும் சேர்த்து ஒரே ஒரு SVG path string-ஐ நான் உருவாக்குகிறேன்.
• 5,000 தனித்தனி வட்டங்களை விட, ஒரே ஒரு path-ஐ உலாவியால் மிக வேகமாகத் திரையில் காட்ட (render) முடியும்.
• ஒருங்கிணைப்புத் தேடல் அட்டவணைகளை (coordinate lookup tables) நான் முன்கூட்டியே கணக்கிடுகிறேன், இதனால் runtime-ல் உலாவியானது எந்தக் கணிதத்தையும் செய்ய வேண்டியதில்லை.

அந்த 1,000ms தாமதம் ஒரு நொடியில் நிகழும் ஒரு instant paint-ஆக மாறுகிறது.

எழுத்துரு (font) ஏற்றலை மேம்படுத்தவும்

எனது முதன்மை எழுத்துருக்களுக்கு rel="preload" பயன்படுத்துகிறேன்.

crossOrigin பண்பை (attribute) மறப்பது ஒரு பொதுவான தவறு. நீங்கள் அதைத் தவிர்த்தால், உலாவியானது எழுத்துருவை இரண்டு முறை எடுக்கும். இது உங்கள் Largest Contentful Paint (LCP)-ஐப் பாதிக்கும். 'above the fold' பகுதியில் பயன்படுத்தப்படும் மூன்று எழுத்துருக்களை மட்டுமே நான் preload செய்கிறேன்.

அனிமேஷனுக்கான சரியான கருவிகளைப் பயன்படுத்தவும்

எனது வரைபடக் குறிகளுக்கான (map markers) எளிய pulse அனிமேஷன்களுக்கு SMIL பயன்படுத்துகிறேன். அனிமேஷன் லூப்பை (animation loop) இயக்க React state-ஐப் பயன்படுத்துவதை விட இது சிறந்தது (cheaper). இது உலாவியின் compositor thread-ல் வேலையைச் செய்ய அனுமதிக்கிறது.

சிக்கலான பாதைகளுக்கு (complex paths), நான் motion பயன்படுத்துகிறேன். நான் அதை எளிமையாக வைத்திருக்கிறேன். mount ஆகும் போது ஒருமுறை அனிமேட் செய்கிறேன் மற்றும் scroll நிலைகளைக் கவனிப்பதைத் (listening to scroll positions) தவிர்க்கிறேன்.

வெக்டர்கள் மற்றும் WebP-யைப் பயன்படுத்துங்கள்

அது ஒரு லோகோ அல்லது வடிவம் என்றால், SVG-யைப் பயன்படுத்துங்கள். அது ஒரு புகைப்படம் என்றால், WebP-யைப் பயன்படுத்துங்கள். இது கோப்பின் அளவைக் குறைவாக வைத்திருக்கவும், layout shifts-ஐத் தவிர்க்கவும் உதவுகிறது.

அதிகப்படியான பொறியியல் (over-engineering) செய்வதைத் தவிர்க்கவும்

நான் ஒரு image CDN-ஐப் பயன்படுத்துவதில்லை. சிக்கலான code-splitting-ஐப் பயன்படுத்துவதில்லை. எனது தளம் சிறியது, எனவே route-level splitting போதுமானது.

ஒரு சரியான மதிப்பெண் என்பது வெறும் ஒரு பகட்டு அளவீடாக (vanity metric) இருக்கலாம். உண்மையான இலக்கு உங்கள் செயல்திறனை (performance) அளவிடுவதும், முடிந்தவரை அதிக வேலையை பயனரின் சாதனத்திலிருந்து (user's device) அகற்றுவதும் ஆகும்.

எனது போர்ட்ஃபோலியோ: brodin.dev

மூலக் குறியீடு (Source code): github.com/NathanBrodin/Portfolio

TanStack Start prerendering: tanstack.com/start

Paper Shaders: shaders.paper.design

முழுப் பதிவு: https://dev.to/nathan-brodin/every-optimization-behind-a-perfect-lighthouse-score-283n