سبق 1HTTP/2 ਅਤੇ HTTP/3 ਪ੍ਰਭਾਵ: ਮਲਟੀਪਲੈਕਸਿੰਗ, ਤਰਜੀਹ, ਸਰਵਰ ਪੁਸ਼ ਵਿਚਾਰਇਹ ਸਮਝੋ ਕਿ HTTP/2 ਅਤੇ HTTP/3 ਰਿਸੋਰਸ ਡਿਲੀਵਰੀ ਨੂੰ ਕਿਵੇਂ ਬਦਲਦੇ ਹਨ। ਮਲਟੀਪਲੈਕਸਿੰਗ, ਹੈੱਡਰ ਕੰਪ੍ਰੈਸ਼ਨ, ਤਰਜੀਹ ਅਤੇ ਸਰਵਰ ਪੁਸ਼ ਟ੍ਰੇਡ-ਆਫ਼ਸ ਸਿੱਖੋ, ਅਤੇ ਇਹ ਪ੍ਰੋਟੋਕਾਲਸ ਅਸਲ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਬੰਦਲਿੰਗ, ਕਨੈਕਸ਼ਨ ਰੀਯੂਜ਼ ਅਤੇ ਵਾਟਰਫਾਲ ਵਿਸ਼ਲੇਸ਼ਣ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ।
HTTP/1.1 limits vs HTTP/2 and HTTP/3 benefitsMultiplexing, head‑of‑line blocking, and streamsRequest prioritization and dependency treesServer push use cases, risks, and deprecationImpact on bundling, sprites, and domain shardingسبق 2ਪ੍ਰੀਲੋਡ, ਪ੍ਰੀਫੈੱਚ, ਅਤੇ ਤਰਜੀਹ ਹਿੰਟਸ: rel=preload, rel=preconnect, rel=dns-prefetch ਅਤੇ ਹਰੇਕ ਵਰਤਣ ਦਾ ਸਮਾਂਬ੍ਰਾਊਜ਼ਰ ਦੇ ਪ੍ਰੀਲੋਡ ਸਕੈਨਰ ਨੂੰ ਗਾਈਡ ਕਰਨ ਲਈ ਰਿਸੋਰਸ ਹਿੰਟਿੰਗ ਨੂੰ ਮਾਸਟਰ ਕਰੋ। rel=preload, prefetch, preconnect, ਅਤੇ dns-prefetch ਵਰਤਣ ਦਾ ਸਮਾਂ ਸਿੱਖੋ, ਤਰਜੀਹ ਹਿੰਟਸ ਕਿਵੇਂ ਇੰਟਰੈਕਟ ਕਰਦੇ ਹਨ, ਅਤੇ ਬੈਂਡਵਿਡਥ ਅਤੇ CPU ਵਰਤੋਂ ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਣ ਵਾਲੇ ਓਵਰ-ਹਿੰਟਿੰਗ ਤੋਂ ਬਚੋ।
Browser preload scanner and discoveryrel=preload for critical resourcesrel=prefetch and prerender for future viewsrel=preconnect and rel=dns‑prefetch usagePriority hints and fetchpriority attributeCommon over‑hinting mistakes to avoidسبق 3ਮੋਡੀਊਲ ਫਾਰਮੈਟਸ, ਟ੍ਰੀ ਸ਼ੇਕਿੰਗ, ਅਤੇ ਬੰਦਲਰਾਂ (ਵੈੱਬਪੈਕ, ਰੋਲਅਪ, ਵਾਈਟ) ਨਾਲ ਡੈੱਡ ਕੋਡ ਐਲੀਮੀਨੇਸ਼ਨਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਮੋਡੀਊਲ ਫਾਰਮੈਟਸ ਅਤੇ ਬੰਦਲਰਾਂ ਨਾਲ ਅਣਵਰਤੇ ਕੋਡ ਹਟਾਉਣ ਨੂੰ ਸਮਝੋ। ESM ਬਨਾਮ CommonJS, ਟ੍ਰੀ ਸ਼ੇਕਿੰਗ ਲੋੜਾਂ, ਸਾਈਡ ਇਫੈਕਟਸ, ਅਤੇ ਵੈੱਬਪੈਕ, ਰੋਲਅਪ, ਅਤੇ ਵਾਈਟ ਵਿੱਚ ਕੰਫਿਗਰੇਸ਼ਨ ਪੈਟਰਨ ਸਿੱਖੋ ਤਾਂ ਜੋ ਪਤਲੇ, ਕੈਸ਼ੇਬਲ ਬੰਦਲ ਬਣਨ।
ESM vs CommonJS and browser supportHow static analysis enables tree shakingMarking side‑effectful modules correctlyDead code elimination in Webpack and RollupOptimizing Vite builds for productionBundle analysis and regression detectionسبق 4ਕ੍ਰਿਟੀਕਲ ਰੈਂਡਰਿੰਗ ਪਾਥ ਬੁਨਿਆਦੀ: HTML, CSS, JS ਕ੍ਰਮ ਅਤੇ ਰੈਂਡਰ-ਬਲਾਕਿੰਗ ਰਿਸੋਰਸਿਜ਼HTML ਤੋਂ ਪਿਕਸਲਾਂ ਤੱਕ ਕ੍ਰਿਟੀਕਲ ਰੈਂਡਰਿੰਗ ਪਾਥ ਦੀ ਪੜ੍ਹਾਈ ਕਰੋ। CSS ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਿਵੇਂ ਰੈਂਡਰਿੰਗ ਨੂੰ ਬਲਾਕ ਕਰਦੇ ਹਨ, ਕ੍ਰਿਟੀਕਲ CSS ਨੂੰ ਘਟਾਉਣਾ, ਨਾਨ-ਐਸੈਂਸ਼ਲ ਸਕ੍ਰਿਪਟਸ ਨੂੰ ਡੀਫਰ ਕਰਨਾ, ਅਤੇ FCP, LCP ਅਤੇ ਕੁੱਲ ਵਿਜ਼ੁਅਲ ਤਿਆਰੀ ਵਧਾਉਣ ਲਈ ਰਿਸੋਰਸਿਜ਼ ਦਾ ਕ੍ਰਮ ਸਿੱਖੋ।
From HTML parse to first paint timelineCSS blocking behavior and critical CSSScript loading: parser‑blocking vs async/deferInlining vs externalizing critical resourcesOptimizing for FCP, LCP, and CLSTools to visualize the rendering waterfallسبق 5ਤੀਜੀ-ਧਿਰ ਪ੍ਰਭਾਵ ਘਟਾਉਣਾ: ਤੀਜੀ-ਧਿਰ ਸਕ੍ਰਿਪਟਸ ਦੀ ਆਡਿਟ, async/defer ਵਰਤੋਂ, ਅਤੇ ਪਰਫਾਰਮੈਂਸ ਬਜਟਸ ਵਰਤੋਂਤੀਜੀ-ਧਿਰ ਸਕ੍ਰਿਪਟਸ ਦੀ ਪਰਫਾਰਮੈਂਸ ਲਾਗਤ ਨੂੰ ਘਟਾਓ। ਟੈਗਸ ਦੀ ਆਡਿਟ ਕਰਨਾ, ਉਹਨਾਂ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਨਾਪਣਾ, ਅਤੇ async, defer, ਅਤੇ ਆਫ-ਮੇਨ-ਥ੍ਰੈਡ ਰਣਨੀਤੀਆਂ ਲਾਗੂ ਕਰਨਾ ਸਿੱਖੋ। ਪਰਫਾਰਮੈਂਸ ਬਜਟਸ ਅਤੇ ਗਵਰਨੈਂਸ ਨਾਲ ਤੀਜੀ-ਧਿਰ ਵਿਕਾਸ ਨੂੰ ਕੰਟਰੋਲ ਵਿੱਚ ਰੱਖੋ।
Inventory and classify third‑party scriptsMeasuring impact with RUM and lab toolsAsync, defer, and blocking script patternsLoading via workers, iframes, and proxiesSetting and enforcing performance budgetsGovernance and review workflows for tagsسبق 6SPAs ਲਈ ਕੋਡ ਸਪਲਿਟਿੰਗ ਰਣਨੀਤੀਆਂ: ਰੂਟ-ਬੇਸਡ, ਕੰਪੋਨੈਂਟ-ਲੈਵਲ, ਡਾਇਨੈਮਿਕ ਇੰਪੋਰਟਸ ਅਤੇ ਰਿਐਕਟ/ਵੂਐ/ਐਂਗੂਲਰ ਲਈ ਟੂਲਜ਼ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਕੋਡ ਸਪਲਿਟਿੰਗ ਪੈਟਰਨਾਂ ਵਿੱਚ ਡਾਈਵ ਕਰੋ। ਰੂਟ-ਬੇਸਡ ਅਤੇ ਕੰਪੋਨੈਂਟ-ਲੈਵਲ ਸਪਲਿਟਿੰਗ, ਡਾਇਨੈਮਿਕ ਇੰਪੋਰਟਸ, ਅਤੇ ਰਿਐਕਟ, ਵੂਐ ਅਤੇ ਐਂਗੂਲਰ ਲਈ ਫ੍ਰੇਮਵਰਕ ਟੂਲਿੰਗ ਸਿੱਖੋ ਤਾਂ ਜੋ ਪਹਿਲਾਂ ਲੋਡ, ਕੈਸ਼ਿੰਗ, ਅਤੇ ਰਨਟਾਈਮ ਕੰਪਲੈਕਸਿਟੀ ਨੂੰ ਬੈਲੰਸ ਕੀਤਾ ਜਾ ਸਕੇ।
Route‑based splitting and bundle boundariesComponent‑level and widget‑level splittingDynamic import() patterns and pitfallsReact lazy, Suspense, and router integrationVue and Angular code splitting toolingMeasuring impact on TTI and navigationسبق 7ਚਿੱਤਰਾਂ ਅਤੇ ਮੀਡੀਆ ਦੀ ਲੇਜ਼ੀ ਲੋਡਿੰਗ: ਨੇਟਿਵ ਲੋਡਿੰਗ=lazy, IntersectionObserver, ਰਿਸਪਾਂਸਿਵ srcset ਅਤੇ sizes ਅਟ੍ਰੀਬਿਊਟਸਚਿੱਤਰਾਂ ਅਤੇ ਮੀਡੀਆ ਨੂੰ ਸਿਰਫ਼ ਜਦੋਂ ਲੋੜ ਹੋਵੇ ਤਾਂ ਲੋਡ ਕਰਨ ਦੀਆਂ ਤਕਨੀਕਾਂ ਸਿੱਖੋ। ਨੇਟਿਵ ਲੋਡਿੰਗ="lazy" ਨੂੰ IntersectionObserver ਨਾਲ ਤੁਲਨਾ ਕਰੋ, ਰਿਸਪਾਂਸਿਵ srcset ਅਤੇ sizes ਕੰਫਿਗਰ ਕਰੋ, ਅਤੇ ਲੇਆਊਟ ਸ਼ਿਫਟਸ ਤੋਂ ਬਚਦੇ ਹੋਏ ਬੈਂਡਵਿਡਥ, CPU ਅਤੇ ਅਨੁਭਵੀ ਪਰਫਾਰਮੈਂਸ ਨੂੰ ਬੈਲੰਸ ਕਰੋ।
Native loading="lazy" capabilities and limitsIntersectionObserver for custom lazy loadingResponsive srcset and sizes best practicesPlaceholder, blur‑up, and LQIP techniquesAvoiding layout shifts with fixed dimensionsLazy loading video, iframes, and embedsسبق 8ਚਿੱਤਰ ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ: ਆਧੁਨਿਕ ਫਾਰਮੈਟਸ (AVIF, WebP), ਕੰਪ੍ਰੈਸ਼ਨ, ਰੀਸਾਈਜ਼ਿੰਗ, ਆਰਟ ਡਾਇਰੈਕਸ਼ਨ, ਅਤੇ ਡਿਲੀਵਰੀ ਰਣਨੀਤੀਆਂਫਾਰਮੈਟਸ, ਕੰਪ੍ਰੈਸ਼ਨ, ਅਤੇ ਡਿਲੀਵਰੀ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਅਪਟੀਮਾਈਜ਼ ਕਰਨਾ ਸਿੱਖੋ। AVIF, WebP, ਅਤੇ JPEG ਦੀ ਤੁਲਨਾ ਕਰੋ, ਕੁਆਲਿਟੀ ਸੈਟਿੰਗਜ਼ ਟਿਊਨ ਕਰੋ, ਡਿਵਾਈਸਾਂ ਲਈ ਰੀਸਾਈਜ਼ ਅਤੇ ਕ੍ਰਾਪ ਕਰੋ, ਆਰਟ ਡਾਇਰੈਕਸ਼ਨ ਲਾਗੂ ਕਰੋ, ਅਤੇ ਕੁਸ਼ਲ ਡਿਲੀਵਰੀ ਲਈ CDNs ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਲੋਡਰਾਂ ਨੂੰ ਇੰਟੀਗ੍ਰੇਟ ਕਰੋ।
Choosing between AVIF, WebP, JPEG, and PNGLossy vs lossless compression trade‑offsResponsive image sizing and DPR variantsArt direction with picture and media queriesCDN‑based resizing and format negotiationCaching and cache‑busting for image assets