PHPackages                             debjyotikar001/media-lazy-load - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. debjyotikar001/media-lazy-load

ActiveLibrary[Image & Media](/categories/media)

debjyotikar001/media-lazy-load
==============================

A Laravel package to help users implement media lazy loading using PHP and JavaScript, optimizing page load speeds by only loading media when they are in view.

V4.2.3(7mo ago)2223MITPHPPHP >=7.4

Since Sep 11Pushed 7mo ago2 watchersCompare

[ Source](https://github.com/debjyotikar001/media-lazy-load)[ Packagist](https://packagist.org/packages/debjyotikar001/media-lazy-load)[ RSS](/packages/debjyotikar001-media-lazy-load/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (13)Used By (0)

Media Lazy Load for Laravel
===========================

[](#media-lazy-load-for-laravel)

A Laravel package to help users implement media lazy loading using PHP and JavaScript, optimizing page load speeds by only loading media when they are in view. It runs automatically when you load a view or page. Increase your website performance on page load and save bandwidth.

Key Features:
-------------

[](#key-features)

1. Media (images, iframes, videos and audios) lazy loading for faster loading. [Read More...](#enable)
2. HTML lazy loading or defer the rendering process for faster loading. [Read More...](#html-lazy-loading)
3. Supports excluding specific User Agents (like Googlebot, Bingbot, etc.) from HTML lazy loading. [Read More...](#excluding-user-agents)
4. Supports excluding specific routes urls paths from being media lazy loading. [Read More...](#skip-or-ignore-specific-routes-urls)
5. Supports excluding specific media from lazy loading. [Read More...](#exclude-specific-media-from-lazy-loading)
6. Configurable to skip lazy loading for specific application Environment. [Read More...](#allowed-environments)
7. Easy integration with Laravel's middleware system. [Read More...](#register-the-middleware)
8. Supports lazy loading of background images set via inline CSS `background-image:url(...)`.
9. Customizable root margin allows you to control when elements start loading relative to their position in the viewport. [Read More...](#root-margin)
10. Adjustable threshold defines how much of an element must be visible before it loads. [Read More...](#threshold)

Installation
------------

[](#installation)

Media Lazy Load for Laravel requires PHP 7.4 or higher. This particular version supports Laravel 8.x, 9.x, 10.x, 11.x, and 12.x.

To get the latest version, simply require the project using [Composer](https://getcomposer.org):

```
composer require debjyotikar001/media-lazy-load
```

Configuration
-------------

[](#configuration)

Media Lazy Load for Laravel supports optional configuration. To get started, you'll need to publish all vendor assets:

```
php artisan vendor:publish --provider="Debjyotikar001\MediaLazyLoad\MediaLazyLoadServiceProvider"
```

This will create a `config/medialazyload.php` file in your app that you can modify to set your configuration. Also, make sure you check for changes to the original config file in this package.

Register the Middleware
-----------------------

[](#register-the-middleware)

In order to add media lazy loading functionality in Laravel, you need to add the MedLazyLoad middleware.

### (Laravel 10 or older)

[](#laravel-10-or-older)

In `app/Http/Kernel.php` file:

```
protected $middleware = [
  // other middleware
  \Debjyotikar001\MediaLazyLoad\Middleware\MedLazyLoad::class,
];
```

or

```
protected $middleware = [
  // other middleware
  'medialazyload',
];
```

You can use the middleware class or middleware alias `medialazyload` in web middleware or route.

### (Laravel 11 or newer)

[](#laravel-11-or-newer)

In `bootstrap/app.php` file:

```
->withMiddleware(function (Middleware $middleware) {
  $middleware->web(append: [
    // other middleware
    \Debjyotikar001\MediaLazyLoad\Middleware\MedLazyLoad::class,
  ]);
})
```

or

```
->withMiddleware(function (Middleware $middleware) {
  $middleware->web(append: [
    // other middleware
    'medialazyload',
  ]);
})
```

You can use the middleware class or middleware alias `medialazyload` in web middleware or route.

Usage
-----

[](#usage)

This is how you can use MediaLazyLoad for Laravel in your project.

### Enable

[](#enable)

You must set `true` on `enabled` in the `config/medialazyload.php` file enable media lazy loading functionality. For example:

```
// config/medialazyload.php
'enabled' => env('MEDLAZYLOAD_ENABLED', true),
```

```
# .env
MEDLAZYLOAD_ENABLED=true
```

### HTML Lazy Loading

[](#html-lazy-loading)

You can lazy load or defer the rendering of HTML content using the custom **Blade directives** `@lazyHtml` and `@endLazyHtml`. Any content wrapped inside these directives will be placed inside a `` tag, so it won’t render immediately with the rest of the page. This helps speed up the initial render by keeping non-critical content out of the first paint.

For example:

```

This content is loaded immediately

@lazyHtml

    This is lazy HTML content

@endLazyHtml
```

This will compile to:

```
This content is loaded immediately

    This is lazy HTML content

```

### Excluding User Agents

[](#excluding-user-agents)

Sometimes you may want to **disable HTML lazy loading** for specific user agents (e.g. search engine crawlers). You can configure this in the package config file `config/medialazyload.php`:

```
'excluded_user_agents' => [
  'Googlebot',
  'Bingbot',
  'Slurp',
],
```

If the current request matches any of these User Agents, the `@lazyHtml` ... `@endLazyHtml` directives will render normally (without `` wrapping).

### Allowed Environments

[](#allowed-environments)

If you want to disable it in specific environments such as during local development or testing to simplify debugging. Then set environments values in a comma (`,`) separated string in the `config/medialazyload.php` file, default `local,production,staging`. For example:

```
// config/medialazyload.php
'allowed_envs' => env('MEDLAZYLOAD_ALLOWED_ENVS', 'local,production,staging'),
```

```
# .env
MEDLAZYLOAD_ALLOWED_ENVS=local,production,staging
```

### Skip or Ignore specific Routes Urls

[](#skip-or-ignore-specific-routes-urls)

If you want to skip or ignore specific routes urls, then you have to set paths in the `config/medialazyload.php` file. You can use '\*' as wildcard. For example:

```
'skip_urls' => [
    '/',
    'about',
    'user/*',
    '*_dashboard',
    '*/download/*',
  ],
```

#### Example URLs:

[](#example-urls)

- `/`: Home URL will be excluded from minification.
- `about`: This exact URL will be excluded from minification.
- `user/*`: Any URL starting with `user/` (like `user/profile`, `user/settings`) will be excluded.
- `*_dashboard`: Any URL ending with `_dashboard` (like `admin_dashboard`, `user_dashboard`) will be excluded.
- `*/download/*`: Any URL has `download` (like `pdf/download/001`, `image/download/debjyotikar001`) will be excluded.

### Exclude Specific Media from Lazy Loading

[](#exclude-specific-media-from-lazy-loading)

If you want certain media (image, iframe, video, audio, or elements with `background-image`) to **load normally** without lazy loading, you can add the attribute `media="no-lazy"` to that element. For example:

```

```

### Root Margin

[](#root-margin)

This option allows you to control how early or late the elements should be lazy-loaded relative to their position in the viewport. You can set values in the `config/medialazyload.php` file, default `'0px 0px 100px 0px'`. Format: `'top right bottom left'`. For example:

```
// config/medialazyload.php
'rootMargin' => env('MEDLAZYLOAD_ROOTMARGIN', '0px 0px 100px 0px'),
```

```
# .env
MEDLAZYLOAD_ROOTMARGIN="0px 0px 100px 0px"
```

Here `'0px 0px 100px 0px'` means that elements will start loading 100px before they enter the viewport from the bottom. You can also use percentages (e.g., `'10% 0px 0px 0px'`).

### Threshold

[](#threshold)

This option allows you to control how much of an element must be visible in the viewport before it starts loading. It accepts a value between `0` and `1`. You can set values in the `config/medialazyload.php` file, default `0.1`. For example:

```
// config/medialazyload.php
'threshold' => env('MEDLAZYLOAD_THRESHOLD', 0.1),
```

```
# .env
MEDLAZYLOAD_THRESHOLD=0.1
```

Here `0.1` means the element will start loading when 10% of it is visible in the viewport.

#### Example values:

[](#example-values)

- `0` means elements will start loading as soon as one pixel is visible.
- `1` means the element will only load when it's fully visible in the viewport.
- `0.05` means that 5% of the element needs to be visible before loading starts.
- `0.1` means that 10% of the element needs to be visible before loading starts.

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Contributions are welcome! Please see [CONTRIBUTING](CONTRIBUTING.md) for details on how to get started.

License
-------

[](#license)

Media Lazy Load is licensed under the [MIT license](LICENSE).

Support
-------

[](#support)

If you are having general issues with this package, feel free to contact us on

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance64

Regular maintenance activity

Popularity17

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~35 days

Recently: every ~10 days

Total

12

Last Release

222d ago

Major Versions

V1.0.1 → V2.0.02024-09-21

V2.0.0 → V3.0.02024-09-27

V3.1.0 → V4.0.02025-03-16

### Community

Maintainers

![](https://www.gravatar.com/avatar/181fa9558a8a9dce047eecb9f4a1b6c60b21a0fad6d3dceaf303bf9fcfb396b7?d=identicon)[debjyotikar001](/maintainers/debjyotikar001)

---

Top Contributors

[![debjyotikar001](https://avatars.githubusercontent.com/u/100521307?v=4)](https://github.com/debjyotikar001 "debjyotikar001 (18 commits)")

---

Tags

laraveljavascriptimageperformancemediaimage-optimizationlazy loadmedia-lazy-load

### Embed Badge

![Health badge](/badges/debjyotikar001-media-lazy-load/health.svg)

```
[![Health](https://phpackages.com/badges/debjyotikar001-media-lazy-load/health.svg)](https://phpackages.com/packages/debjyotikar001-media-lazy-load)
```

###  Alternatives

[intervention/image-laravel

Laravel Integration of Intervention Image

1496.5M102](/packages/intervention-image-laravel)[bkwld/croppa

Image thumbnail creation through specially formatted URLs for Laravel

510496.0k23](/packages/bkwld-croppa)[ralphjsmit/laravel-glide

Auto-magically generate responsive images from static image files.

4719.6k5](/packages/ralphjsmit-laravel-glide)[somehow-digital/typo3-media-processing

Media Processing

101.1k](/packages/somehow-digital-typo3-media-processing)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)