```
```css
.lazy {
opacity: 0;
transition: opacity 0.5s;
}
.lazy:not([data-src]) {
display: none;
}
.lazy.loaded {
opacity: 1;
}
```
```javascript
// Initialize an IntersectionObserver instance
const lazyImages = document.querySelectorAll('img.lazy');
const options = {
threshold: 0.5, // Load image when it's 50% in the viewport
};
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Replace the src of the image with the data-src
entry.target.src = entry.target.getAttribute('data-src');
entry.target.classList.add('loaded');
entry.target.style.transition = 'none'; // Avoid flicker
setTimeout(() => {
entry.target.style.transition = 'all 0.5s'; // Re-apply transition after image is loaded
});
// Remove the entry from the observer to prevent unnecessary checking
observer.unobserve(entry.target);
}
});
}, options);
// Add the observer to each lazy image
lazyImages.forEach(image => {
imageObserver.observe(image);
});
```
## 2. Minify JavaScript Code
Minification reduces the file size of your JavaScript code by removing unnecessary characters such as whitespace, comments, and line breaks, which speeds up the loading time. You can use tools like `uglifyjs`, `terser`, or `gulp-uglify`/`gulp-minify`.
```bash
# Using terser via npm
npx terser src/js/*.js --compress --mangle --output src/js/minified.js
```
## 3. Defer Loading of Non-critical Resources
Defer the loading of non-critical resources like JavaScript and CSS files until after the main content of the page has loaded. For JavaScript, you can use the `defer` attribute or `async` loading.
```html
```
For CSS, consider using inline critical CSS and defer the full stylesheets:
```html
```
And for JavaScript files, use `async`/`defer` attributes:
```html
```
## 4. Optimize CSS Delivery
- Use a CSS preprocessor like Sass or Less to write clean and maintainable code, which can be minified during the build process.
- Split your CSS into smaller chunks if possible. Use `` for critical CSS and dynamically inject non-critical styles.
- Use a CDN to serve your CSS/JS files, which can cache them and serve them faster to users.
## 5. Implement Code Splitting
Code splitting allows you to split your JavaScript code into smaller chunks that are only loaded when needed, reducing the initial page load time. This is particularly useful for large applications with components that are not used immediately.
For example, if you're using a module bundler like Webpack, you can enable code splitting:
```javascript
// Assuming you're using React
import React, { lazy } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function App() {
return (
Lazy Loading for Images
To optimize page load time with JavaScript, you can implement the following techniques:
## 1. Lazy Loading for Images
Lazy loading is a technique where images are not loaded until they are in or near the viewport of the user. This reduces the initial page load time and bandwidth usage.
Here's a simple way to implement lazy loading using the `IntersectionObserver` API:
```html
![Image description]()
```
```css
.lazy {
opacity: 0;
transition: opacity 0.5s;
}
.lazy:not([data-src]) {
display: none;
}
.lazy.loaded {
opacity: 1;
}
```
```javascript
// Initialize an IntersectionObserver instance
const lazyImages = document.querySelectorAll('img.lazy');
const options = {
threshold: 0.5, // Load image when it's 50% in the viewport
};
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Replace the src of the image with the data-src
entry.target.src = entry.target.getAttribute('data-src');
entry.target.classList.add('loaded');
entry.target.style.transition = 'none'; // Avoid flicker
setTimeout(() => {
entry.target.style.transition = 'all 0.5s'; // Re-apply transition after image is loaded
});
// Remove the entry from the observer to prevent unnecessary checking
observer.unobserve(entry.target);
}
});
}, options);
// Add the observer to each lazy image
lazyImages.forEach(image => {
imageObserver.observe(image);
});
```
## 2. Minify JavaScript Code
Minification reduces the file size of your JavaScript code by removing unnecessary characters such as whitespace, comments, and line breaks, which speeds up the loading time. You can use tools like `uglifyjs`, `terser`, or `gulp-uglify`/`gulp-minify`.
```bash
# Using terser via npm
npx terser src/js/*.js --compress --mangle --output src/js/minified.js
```
## 3. Defer Loading of Non-critical Resources
Defer the loading of non-critical resources like JavaScript and CSS files until after the main content of the page has loaded. For JavaScript, you can use the `defer` attribute or `async` loading.
```html
```
For CSS, consider using inline critical CSS and defer the full stylesheets:
```html
```
And for JavaScript files, use `async`/`defer` attributes:
```html
```
## 4. Optimize CSS Delivery
- Use a CSS preprocessor like Sass or Less to write clean and maintainable code, which can be minified during the build process.
- Split your CSS into smaller chunks if possible. Use `` for critical CSS and dynamically inject non-critical styles.
- Use a CDN to serve your CSS/JS files, which can cache them and serve them faster to users.
## 5. Implement Code Splitting
Code splitting allows you to split your JavaScript code into smaller chunks that are only loaded when needed, reducing the initial page load time. This is particularly useful for large applications with components that are not used immediately.
For example, if you're using a module bundler like Webpack, you can enable code splitting:
```javascript
// Assuming you're using React
import React, { lazy } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function App() {
return (
```
```css
.lazy {
opacity: 0;
transition: opacity 0.5s;
}
.lazy:not([data-src]) {
display: none;
}
.lazy.loaded {
opacity: 1;
}
```
```javascript
// Initialize an IntersectionObserver instance
const lazyImages = document.querySelectorAll('img.lazy');
const options = {
threshold: 0.5, // Load image when it's 50% in the viewport
};
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Replace the src of the image with the data-src
entry.target.src = entry.target.getAttribute('data-src');
entry.target.classList.add('loaded');
entry.target.style.transition = 'none'; // Avoid flicker
setTimeout(() => {
entry.target.style.transition = 'all 0.5s'; // Re-apply transition after image is loaded
});
// Remove the entry from the observer to prevent unnecessary checking
observer.unobserve(entry.target);
}
});
}, options);
// Add the observer to each lazy image
lazyImages.forEach(image => {
imageObserver.observe(image);
});
```
## 2. Minify JavaScript Code
Minification reduces the file size of your JavaScript code by removing unnecessary characters such as whitespace, comments, and line breaks, which speeds up the loading time. You can use tools like `uglifyjs`, `terser`, or `gulp-uglify`/`gulp-minify`.
```bash
# Using terser via npm
npx terser src/js/*.js --compress --mangle --output src/js/minified.js
```
## 3. Defer Loading of Non-critical Resources
Defer the loading of non-critical resources like JavaScript and CSS files until after the main content of the page has loaded. For JavaScript, you can use the `defer` attribute or `async` loading.
```html
```
For CSS, consider using inline critical CSS and defer the full stylesheets:
```html
```
And for JavaScript files, use `async`/`defer` attributes:
```html
```
## 4. Optimize CSS Delivery
- Use a CSS preprocessor like Sass or Less to write clean and maintainable code, which can be minified during the build process.
- Split your CSS into smaller chunks if possible. Use `` for critical CSS and dynamically inject non-critical styles.
- Use a CDN to serve your CSS/JS files, which can cache them and serve them faster to users.
## 5. Implement Code Splitting
Code splitting allows you to split your JavaScript code into smaller chunks that are only loaded when needed, reducing the initial page load time. This is particularly useful for large applications with components that are not used immediately.
For example, if you're using a module bundler like Webpack, you can enable code splitting:
```javascript
// Assuming you're using React
import React, { lazy } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function App() {
return (
0 Comments:
Post a Comment
Thank you for taking the time to share your thoughts and feedback. We greatly appreciate your participation in the discussion and look forward to engaging with you. Please remember to be respectful and considerate towards others in the comments section. Keep your comments concise and on-topic to maintain a constructive and enriching environment for all readers. Let's continue to learn and grow together as a community!