登录查看更多内容

Last updated on 2024年5月27日

How do you prioritize which resources to load first for faster web page rendering?

由人工智能和领英社区提供技术支持

In web development, prioritizing resource loading is crucial for optimizing page rendering speed. Your browser downloads and processes various resources like HTML, CSS, JavaScript, images, and fonts to display a webpage. By determining which resources are critical to initial rendering, you can instruct the browser to fetch and process these first. This is akin to a chef preparing the main ingredients of a dish before adding garnishes. You can use tools like browser DevTools to identify which resources are blocking the rendering path and adjust their loading priority accordingly.

此文章中的业界达人

由社区从 42 条内容中精选。了解更多

Anderson Achata Alarcon

Software Engineer | Tech Lead | Teacher | Next Js | React Js | Node Js | GCP | Figma
Madhawa Umanga Kariyawasam

Senior Front-End Engineer (UX) | Building Scalable SaaS Architectures | Data-Driven Future
Jeremy Fusselman

Principal at WP Site Protection & Grant Marketing Group, Inc. | Executive & Strategic Advisor | Digital Operations…

1 Critical CSS

Identifying and loading 'Critical CSS' first can dramatically improve the perceived performance of your site. Critical CSS refers to the minimal set of styles required to render the above-the-fold content of your web page. By inlining this CSS directly into the HTML or using <link rel="preload" as="style"> to load it as early as possible, you ensure that users see a visually complete page faster. This technique is especially useful for mobile users who often rely on slower network connections.

添加您的观点

Anderson Achata Alarcon

Software Engineer | Tech Lead | Teacher | Next Js | React Js | Node Js | GCP | Figma
举报内容
Al optimizar el css crítico, se mejora significativamente el tiempo de carga inicial de la página: 1. Identificar css crítico: extrae los estilos necesarios para renderizar la parte visible de la página y colócalos directamente en el <head> del documento HTML. 2. Minificación del css: minifica los archivos css para reducir su tama?o y acelerar los tiempos de descarga. Herramientas como CSSNano o CleanCSS pueden ayudarte a lograrlo. 3. Code splitting: divide el css en fragmentos más peque?os, cargando solo los estilos necesarios para cada página.

已翻译

赞
Madhawa Umanga Kariyawasam

Senior Front-End Engineer (UX) | Building Scalable SaaS Architectures | Data-Driven Future
举报内容
I recently revamped a blog website with a complex layout. Extracting critical CSS using a dedicated tool significantly reduced the initial loading time. Users saw the basic layout with content almost instantly, creating a much more positive first impression. You can use tools like Google's Critical Path CSS Generator or frameworks like Next.js or Gatsby that automatically extract critical CSS. These tools analyze your HTML and identify the styles needed for the initial page render. For simple layouts, you can inline critical CSS directly within your HTML. This eliminates an extra HTTP request and ensures the essential styles are loaded immediately.

已翻译

赞
Jeremy Fusselman

Principal at WP Site Protection & Grant Marketing Group, Inc. | Executive & Strategic Advisor | Digital Operations | Board Member
举报内容
To prioritize which resources to load first for faster web page rendering, focus on optimizing Critical CSS. This ensures essential content is rendered quickly, enhancing the user experience. Identify Critical CSS: Determine the essential CSS required to render the above-the-fold content. Inline Critical CSS: Embed this CSS directly into the HTML to eliminate render-blocking requests. Defer Non-Critical CSS: Load non-essential CSS asynchronously or after the main content has rendered. Implementing these steps will significantly improve page load times and overall performance.

已翻译

赞
?? Samy MOSA

Développeur Full Stack
举报内容
If you use TailwindCSS, your CSS will automatically be minified and unused classes/selectors will be cleared. That is a less known huge benefits of using Tailwind.

已翻译

赞
Ikram Khizer

Top 3% Full Stack Developer | Laravel | Node | API | React | Vue | Helping Full-Stack Devs Level Up Their Skills
举报内容
Prioritize loading critical resources like HTML, CSS, and above-the-fold content first. Use async or defer for non-essential scripts and preload key assets to optimize rendering speed.

已翻译

赞

加载更多内容

2 JavaScript Loading

JavaScript can significantly impact your page load time. To prioritize its loading, you should defer non-essential scripts using the defer attribute in your script tags or asynchronously load them with the async attribute. This way, the browser can continue parsing and rendering the rest of your page without waiting for these scripts to load and execute. You should also consider minimizing and bundling your scripts to reduce the number of requests and the size of data transferred.

添加您的观点

Anderson Achata Alarcon

Software Engineer | Tech Lead | Teacher | Next Js | React Js | Node Js | GCP | Figma
举报内容
Para priorizar la carga de recursos y asegurar una representación más rápida de la página web, es esencial optimizar la carga de JavaScript: 1. Carga diferida (defer): utiliza el atributo defer para diferir la ejecución de scripts hasta que el HTML se haya cargado y procesado completamente. 2. Carga asíncrona (async): usa el atributo async para cargar los scripts de manera asíncrona, permitiendo que el navegador continúe procesando el HTML mientras descarga los scripts en segundo plano. 3. Code splitting: divide el código en archivos más peque?os y carga solo lo necesario para cada página. Herramientas como Webpack facilitan esta práctica.

已翻译

赞
Jeremy Fusselman

Principal at WP Site Protection & Grant Marketing Group, Inc. | Executive & Strategic Advisor | Digital Operations | Board Member
举报内容
To prioritize resources for faster web page rendering, focus on essential content first. Start by deferring or asynchronously loading non-critical JavaScript. Ensure a smooth user experience and quick access to primary functionalities. Here are three key steps: Critical Path: Load critical JavaScript inline or in the head for immediate execution. Defer/Async: Use defer or async attributes for non-critical scripts. Bundling/Minification: Bundle and minify scripts to reduce file size and load times. Optimizing resource loading enhances user engagement and reduces bounce rates.

已翻译

赞
?? Samy MOSA

Développeur Full Stack
举报内容
For large applications with lots of routes, consider lazy loading. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times. You may want to learn how to lazy load routes/modules in your favorite web framework (Angular, React, Vue, Svelte...).

已翻译

赞
Thomaz Staziak

Software Engineer | React.js - React Native - Node.js - PostgreSQL | Full Stack
举报内容
Use lazy Loading to dynamically import JavaScript modules only when they are needed. This is especially useful for large libraries or components that are not immediately needed on the initial load. Minify your JavaScript to reduce file sizes. Code Splitting utilize code splitting with tools like Webpack to break your code into smaller chunks. This way you can handle the parts that can be loaded on demand.

已翻译

赞
Navid M.

Software Engineer @ CapTech | MSCS Student at Georgia Tech | Techwise Student
举报内容
JavaScript can significantly impact page load times. To manage this, defer loading JavaScript files that are not essential for the initial page render. Use the async or defer attributes in your <script> tags to prevent JavaScript from blocking the DOM construction. This ensures that the browser can continue to process the rest of your page without waiting for the JavaScript to load and execute. #WebPerformance #WebDevelopment #Optimization

已翻译

赞

加载更多内容

3 Image Optimization

Images often account for the bulk of a webpage's size. Prioritize their loading by using responsive images with the srcset attribute, which allows the browser to select the most appropriate image size based on the user's device. Additionally, consider lazy-loading offscreen images so they are only fetched when they're about to enter the viewport. This reduces initial load time and saves bandwidth for both users and servers.

添加您的观点

Anderson Achata Alarcon

Software Engineer | Tech Lead | Teacher | Next Js | React Js | Node Js | GCP | Figma
举报内容
Las imágenes suelen representar una gran parte del peso total de una página web, y su optimización puede llevar a una mejora significativa. Herramientas populares son : 1. TinyPNG/TinyJPG: herramientas en línea que comprime las imágenes png y jpg de manera eficiente sin sacrificar la calidad visual. 2. ImageMagick: herramienta para redimensionar, comprimir y convertir imágenes entre diferentes formatos. 3. Squoosh: herramienta de compresión de imágenes desarrollada por Google que permite ajustar la calidad y el formato de las imágenes. 4. Cloudinary: servicio de gestión de medios que ofrece optimización automática de imágenes, conversión de formatos y entrega a través de CDN.

已翻译

赞
Jeremy Fusselman

Principal at WP Site Protection & Grant Marketing Group, Inc. | Executive & Strategic Advisor | Digital Operations | Board Member
举报内容
Prioritizing which resources to load first for faster web page rendering involves focusing on critical content and optimizing images efficiently. Begin by loading essential CSS and JavaScript files that impact above-the-fold content. 1. Utilize lazy loading for images to defer offscreen images until they're needed. 2. Compress images using formats like WebP for reduced file sizes without compromising quality. 3. Implement responsive images to serve appropriate sizes based on device and screen resolution. These strategies ensure a swift, seamless user experience by emphasizing crucial elements and optimizing visual assets.

已翻译

赞
Navid M.

Software Engineer @ CapTech | MSCS Student at Georgia Tech | Techwise Student
举报内容
Images often account for the majority of a page's weight. Optimize your images by compressing them and using modern formats like WebP, which provides high-quality results at smaller file sizes. Also, consider implementing lazy loading, where images are only loaded when they enter the viewport. This reduces initial load time and saves bandwidth for users who do not scroll through the entire page. #WebPerformance #WebDevelopment #Optimization

已翻译

赞
Ritu Sharma

I Promise Small businesses to book 50+ appointments/month for High-Value Services with a 100% guarantee through Website Development, Mobile App Development and Digital Marketing.
举报内容
<!DOCTYPE html> <html> <head>  <style> .logo { background: url('data:image/png;base64,...') no-repeat; } </style> </head> <body>  <picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.jpg" type="image/jpeg"> <img src="image.jpg" alt="Example Image" width="600" height="400"> </picture>  <img src="large-image.jpg" alt="Large Image" loading="lazy" width="1200" height="800"> </body> </html>

已翻译

赞
Raj Seth

Full Stack Developer | MERN | 3M Post Views ?? | Hacktoberfest'22 | Open Source | IT Services & Solutions | SaaS | Business Development (??,?)
举报内容
Images can eat up your page's loading time. Here's how to solve it: - Responsive Images: Utilize srcset to let the browser choose the perfect image size for the device, delivering high-quality visuals without unnecessary data transfer. - Lazy Loading: Prioritize content users see first. Images outside the viewport are loaded only when about to enter the view, significantly reducing initial load time and saving bandwidth. Bonus; Image Optimization Tools: - Free Online Tools: TinyPNG/TinyJPG offers significant size reduction with minimal quality impact. - Advanced Tools: Explore ImageOptim (Mac) or Squoosh (Online) for more in-depth compression options.

已翻译

赞

加载更多内容

4 Font Performance

Web fonts are an integral part of modern web design but can slow down page rendering. To prioritize web font loading, use the font-display CSS property to control how fonts are displayed during loading. Options like 'swap' or 'fallback' ensure text remains visible with a fallback font while the web font loads, preventing a flash of invisible text (FOIT). Additionally, only load the font styles and weights that are actually used on the page.

添加您的观点

Madhawa Umanga Kariyawasam

Senior Front-End Engineer (UX) | Building Scalable SaaS Architectures | Data-Driven Future
举报内容
On an e-commerce website with a custom font for product titles, I implemented font preloading and font display swap. This ensured users saw product titles quickly and avoided any initial layout shifts during font loading. You can use the preload resource hint to prioritize the loading of critical fonts. This tells the browser to fetch the font early, minimizing the time users wait for text to render. Use the font-display property with the swap value to gradually replace a fallback font with the desired font once it's loaded. This prevents a flash of invisible text (FOIT) and ensures a smooth font appearance. And, reduce font file size by only including the glyphs (characters) your website actually uses.

已翻译

赞
Jeremy Fusselman

Principal at WP Site Protection & Grant Marketing Group, Inc. | Executive & Strategic Advisor | Digital Operations | Board Member
举报内容
Prioritizing which resources to load first is crucial for faster web page rendering, particularly for optimizing font performance. 1. Use font-display: swap to ensure text remains visible during font loading. 2. Preload key font files to reduce fetch time and enhance rendering speed. 3. Optimize and subset fonts to include only the necessary characters, minimizing file size. These steps significantly improve user experience by ensuring quick and efficient font rendering.

已翻译

赞
Ritu Sharma

I Promise Small businesses to book 50+ appointments/month for High-Value Services with a 100% guarantee through Website Development, Mobile App Development and Digital Marketing.
举报内容
<!DOCTYPE html> <html> <head> <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin> <style> @font-face { font-family: 'MyFont'; src: url('fonts/myfont.woff2') format('woff2'); font-display: swap; } body { font-family: 'MyFont', sans-serif; } </style> </head> <body>  </body> </html>

已翻译

赞
Jheel Soni

Software Engineer @ Wayfair ? Ex-Microsoft ? Full Stack Developer ? MERN Stack Developer
举报内容
Use the font-display: swap; in your @font-face CSS declarations to ensure that text is rendered using a fallback font until the custom font is fully loaded.

已翻译

赞

5 Resource Hints

Resource hints such as preload , prefetch , and preconnect can be powerful tools for managing resource priority. Preload instructs the browser to load important resources early in the page load process. Prefetch helps with loading resources that will be needed in the near future, while preconnect sets up early connections to important third-party domains. These hints help browsers anticipate and manage resource loading more efficiently.

添加您的观点

Jeremy Fusselman

Principal at WP Site Protection & Grant Marketing Group, Inc. | Executive & Strategic Advisor | Digital Operations | Board Member
举报内容
Efficiently loading resources is crucial for faster web page rendering. By implementing resource hints, developers can optimize the loading sequence effectively. Here’s how: 1. Use `<link rel="preload">` for critical resources like fonts, stylesheets, and scripts. 2. Implement `<link rel="dns-prefetch">` to resolve DNS for external domains early. 3. Apply `<link rel="preconnect">` to establish early connections to important origins. These strategies ensure essential elements are loaded swiftly, enhancing user experience.

已翻译

赞
Madhawa Umanga Kariyawasam

Senior Front-End Engineer (UX) | Building Scalable SaaS Architectures | Data-Driven Future
举报内容
Think of a website with a hero section featuring a large background image. By using the preload hint for the image, we can ensure it's downloaded before the user scrolls down, leading to a smoother & more visually appealing experience. You can use the preload hint to instruct the browser to prefetch specific resources like critical fonts or critical images to ensures resources are readily available. The prefetch hint suggests to the browser that a resource might be needed in the near future, prompting it to download the resource in the background without blocking initial page render. For third-party resources like fonts or scripts hosted on external domains, consider using the dns-prefetch hint to initiate the DNS lookup process early.

已翻译

赞
Thomaz Staziak

Software Engineer | React.js - React Native - Node.js - PostgreSQL | Full Stack
举报内容
Use the <link rel="preload"> tag, you can instruct the browser to fetch resources that are essential for the initial rendering of the page. You can use <link rel="dns-prefetch" >it resolves domain names before the user clicks on a link, reducing the latency involved in DNS resolution. Finally use <link rel="prefetch" href="page.html"> to fetches resources that might be needed in the near future, such as the next page the user is likely to visit.

已翻译

赞

6 Caching Strategies

Effective caching strategies ensure that returning visitors experience faster page loads by storing important resources locally in the user's browser cache. Utilize cache-control headers to specify how long resources should be cached and the service worker API for more granular control over caching behavior. By caching assets that change infrequently, like stylesheets or scripts, you can significantly reduce load times on subsequent visits.

添加您的观点

Anderson Achata Alarcon

Software Engineer | Tech Lead | Teacher | Next Js | React Js | Node Js | GCP | Figma
举报内容
El almacenamiento en caché es una estrategia esencial para mejorar la velocidad de carga y la eficiencia de una página web: 1. Cache-Control headers: utiliza encabezados HTTP Cache-Control para definir políticas de almacenamiento en caché de recursos. 2. ETag: implementa ETag (Entity Tag) para que los navegadores puedan verificar si un recurso ha cambiado desde la última vez que se solicitó. 3. Service Workers: utiliza Service Workers para interceptar solicitudes de red y servir recursos desde la caché cuando sea posible.

已翻译

赞
Navid M.

Software Engineer @ CapTech | MSCS Student at Georgia Tech | Techwise Student
举报内容
Implement effective caching strategies to reduce load times on repeat visits. Use the browser cache to store assets like stylesheets, images, and JavaScript files locally. Configure your server to send appropriate Cache-Control headers to instruct the browser on how long to store these files. By using caching, you minimize the need for return visitors to download the same resources repeatedly. #WebPerformance #WebDevelopment #Optimization

已翻译

赞
Tales de Jesus

Desenvolvedor Fullstack C# .Net | Angular | JavaScript & TypeScript | Inglês Fluente | Software Engineer Backend & Frontend
举报内容
Implementing effective caching strategies is key to providing returning visitors with faster page load times by storing essential resources locally in the user's browser cache. Use cache-control headers to specify how long resources should be cached and the service worker API for more detailed control over caching behavior. By caching assets that change infrequently, such as stylesheets or scripts, you can significantly reduce load times on subsequent visits. Focusing on caching can greatly enhance the user experience by minimizing delays and ensuring quicker access to your site’s content. This not only improves performance but also encourages repeat visits, contributing to better overall user satisfaction and engagement.

已翻译

赞
Raj Seth

Full Stack Developer | MERN | 3M Post Views ?? | Hacktoberfest'22 | Open Source | IT Services & Solutions | SaaS | Business Development (??,?)
举报内容
Effective caching ensures returning visitors experience fast page loads. Consider using: - - Cache-Control Headers: These tell the browser how long to store resources locally. Leverage them to cache static assets like stylesheets or scripts, minimizing downloads on subsequent visits. - Service Worker API (Advanced): For more granular control, explore the Service Worker API. This empowers you to define caching behavior and even serve content offline, providing a smooth user experience even with limited connectivity.

已翻译

赞

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Aneeqa Khan

Frontend Engineer | React, React Native, JavaScript, TypeScript, Next.js | Technical Writer | I Help Companies Build Scalable Software Solutions
举报内容
- Minimize Redirects: Reduce the number of redirects to prevent additional HTTP requests and decrease latency. - HTTP/2 and HTTP/3: Utilize modern protocols like HTTP/2 and HTTP/3 to take advantage of multiplexing, header compression, and other performance enhancements.

已翻译

赞
Jheel Soni

Software Engineer @ Wayfair ? Ex-Microsoft ? Full Stack Developer ? MERN Stack Developer
举报内容
HTTP/2: Leverage HTTP/2 for faster multiplexing of requests over a single connection. This reduces the overhead associated with multiple HTTP connections and improves the delivery of assets. Server-Side Rendering (SSR): Pre-render content on the server to deliver fully formed HTML to the client, reducing the time to interactive.

已翻译

赞
?? Samy MOSA

Développeur Full Stack
举报内容
"Premature optimization is the root of all evil" is a famous saying among software developers. Its source is credited to Donald Knuth. Your often want to write cleaner and more organized code rather than optimizing low level code.

已翻译

赞
Suraj Dubey

Business Partner | Tech Entrepreneur | Developer
举报内容
Server Response Time: Optimize backend code and database queries. Render-Blocking Resources: Prioritize critical CSS and defer non-essential JavaScript. Image Optimization: Compress images and use lazy loading techniques. Browser Caching: Set cache-control headers for efficient resource caching. Content Delivery Networks (CDNs): Utilize CDNs for faster asset delivery. Resource Prefetching: Use <link rel="preload"> for critical resources. Performance Monitoring: Regularly analyze metrics and make iterative improvements.

已翻译

赞
Raj Seth

Full Stack Developer | MERN | 3M Post Views ?? | Hacktoberfest'22 | Open Source | IT Services & Solutions | SaaS | Business Development (??,?)
举报内容
We've explored core strategies, but here's more to supercharge your website's speed: - Performance Testing Tools: Tools like Google PageSpeed Insights and Lighthouse analyze your website and offer specific recommendations for improvement. - Critical Rendering Path (CRP) Optimization: Identify resources essential for initial rendering (CRP) and prioritize their loading for a faster first impression. - Preload Key Requests: Use the preload attribute to instruct the browser to prioritize fetching critical resources like fonts, further accelerating the rendering process.

已翻译

赞

Web Development

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How do you prioritize which resources to load first for faster web page rendering?

1

2

3

4

5

6

7

1 Critical CSS

2 JavaScript Loading

3 Image Optimization

4 Font Performance

5 Resource Hints

6 Caching Strategies

7 Here’s what else to consider

Web Development

给文章评分

感谢您的反馈

更多Web Development相关文章

更多相关阅读内容

How do you prioritize which resources to load first for faster web page rendering?

1

2

3

4

5

6

7

1 Critical CSS

2 JavaScript Loading

3 Image Optimization

4 Font Performance

5 Resource Hints

6 Caching Strategies

7 Here’s what else to consider

Web Development

给文章评分

感谢您的反馈

查看其他技能