README

🚀 一个旨在帮助您专注于网络性能优化的PHP库。

包: @shinsenter/defer.php
版本: 2.5.0
作者: Mai Nhut Tan shin@shin.company
版权: 2019-2023 SHIN公司 https://code.shin.company/defer.php
许可: MIT

🥇 由defer.js提供支持 - 一个超级小、超级高效的库，可以帮助您懒加载几乎所有东西，如图片、视频、音频、iframe以及样式表和JavaScript。

特性

简化库选项
嵌入defer.js库
标准化DOM元素
修复缺失的meta标签
修复缺失的媒体属性
预连接到所需源
预加载关键请求
预取关键请求
网页级别的浏览器图像懒加载
懒加载屏幕外和隐藏的iframe
懒加载屏幕外和隐藏的视频
懒加载屏幕外和隐藏的图片
懒加载CSS背景图片
减少JavaScript的影响
延迟非关键CSS请求
延迟第三方资源
为懒加载对象添加<noscript>回退标签
在浏览器渲染页面时添加自定义HTML（启动屏幕）
忽略优化元素的属性
忽略懒加载元素的属性
优化AMP文档
压缩HTML输出

安装

使用composer安装

composer require shinsenter/defer.php

将库加载到您的程序中

// Include the library
require_once __DIR__ . '/vendor/autoload.php';

// TODO: your code is from here

要求

此库需要PHP 5.6或更高版本，因此您需要在系统上安装此版本或最新版本的PHP。

建议服务器运行PHP版本7.3+或更高版本以获得更好的性能和支持。

从v2.x开始的库选项与先前版本的选项不兼容。请阅读库手册以获取更多详细信息。

用法

基本用法

// Include the library
require_once __DIR__ . '/vendor/autoload.php';

// Create a Defer object
$defer = new \AppSeeds\Defer();

// Read HTML source from file
$html_source = file_get_contents('mypage.html');

// Then get the optimized output
$result = $defer->fromHtml($html_source)->toHtml($html);
var_dump($result);

// You can use the same instance to keep loading another HTML and optimize it
$result2 = $defer->fromHtml(file_get_contents('otherpage.html'))->toHtml();
var_dump($result2);

选项

// Include the library
require_once __DIR__ . '/vendor/autoload.php';

// Declare the options
$options = [
  // Insert debug information inside the output HTML after optimization.
  // Debug information will contain outer HTMLs of tags before being optimized.
  // Default: false (turn off the debug information)
  'debug_mode' => false,

  // Although defer.js is the soul of this library,
  //   in some regions, you may want to serve defer.js library locally
  //   due to The General Data Protection Regulation (EU).
  // See: https://en.wikipedia.org/wiki/General_Data_Protection_Regulation
  // If you need to manually insert the defer.js library yourself,
  //   please enable this option to true.
  // Default: false (always automatically insert defer.js library)
  'manually_add_deferjs' => false,

  // URL to defer.js javascript file.
  // Default: https://cdn.jsdelivr.net.cn/npm/@shinsenter/defer.js@3.6.0/dist/defer_plus.min.js
  'deferjs_src'  => \AppSeeds\DeferConstant::SRC_DEFERJS_CDN,

  // URL to javascript contains fixes.
  // for some older browsers that do not support IntersectionObserver feature.
  // Default: https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver
  'polyfill_src' => \AppSeeds\DeferConstant::SRC_POLYFILL_CDN,

  // Inline the defer.js library to minimize download time in the browser.
  // Default: true (always automatically inline defer.js library)
  'inline_deferjs' => true,

  // ---------------------------------------------------------------------------

  // This option moves all stylesheets to bottom of the head tag,
  //   and moves script tags to bottom of the body tag
  // See: https://webdev.ac.cn/render-blocking-resources/
  // Default: true (always automatically fix render blocking)
  'fix_render_blocking' => true,

  // Turn on optimization for stylesheets
  // This option applies to style and link[rel="stylesheet"] tags.
  // Best practices: https://webdev.ac.cn/extract-critical-css/
  // Default: true (automatically optimize stylesheets)
  'optimize_css'        => true,

  // Optimize script tags (both inline and external scripts).
  // Note: The library only minify for inline script tags.
  // See: https://webdev.ac.cn/unminified-javascript/
  // Default: true (automatically optimize script tags)
  'optimize_scripts'    => true,

  // Optimize img, picture, video, audio and source tags.
  // See: https://webdev.ac.cn/browser-level-image-lazy-loading/
  // See: https://webdev.ac.cn/lazy-loading-images/
  // Default: true (automatically optimize)
  'optimize_images'     => true,

  // Optimize iframe, frame, embed tags.
  // See: https://webdev.ac.cn/lazy-loading-video/
  // Default: true (automatically optimize)
  'optimize_iframes'    => true,

  // Optimize tags that containing CSS for loading images from external sources.
  // For example, style properties contain background-image:url() etc.
  // See: https://webdev.ac.cn/optimize-css-background-images-with-media-queries/
  // Default: true (automatically optimize)
  'optimize_background' => true,

  // Create noscript tags so lazy-loaded elements can still display
  //   even when the browser doesn't have javascript enabled.
  // This option applies to all tags that have been lazy-loaded.
  // See: https://webdev.ac.cn/without-javascript/
  // Default: true (automatically create fallback noscript tags)
  'optimize_fallback'   => true,

  // Optimize anchor tags, fix unsafe links to cross-origin destinations
  // See: https://webdev.ac.cn/external-anchors-use-rel-noopener/
  // Default: true (automatically optimize)
  'optimize_anchors' => true,

  // Add missing meta tags such as meta[name="viewport"], meta[charset] etc.
  // See: https://webdev.ac.cn/viewport/
  // Default: true (automatically optimize)
  'add_missing_meta_tags' => true,

  // Preconnect to required URL origins.
  // See: https://webdev.ac.cn/uses-rel-preconnect/
  // Default: true (automatically optimize)
  'enable_dns_prefetch'   => true,

  // Preload key requests such as stylesheets or external scripts.
  // See: https://webdev.ac.cn/uses-rel-preload/
  // Default: false (do not apply by default)
  'enable_preloading'     => false,

  // Lazy-load all elements like images, videos when possible.
  // See: https://webdev.ac.cn/lazy-loading/
  // Default: true (automatically optimize)
  'enable_lazyloading'    => true,

  // Minify HTML output.
  // See: https://webdev.ac.cn/reduce-network-payloads-using-text-compression/
  // Default: false (do not minify HTML by default)
  'minify_output_html'    => false,

  // ---------------------------------------------------------------------------

  // Detect and optimize third-party URLs if possible (experiment).
  // This option also allows entering an array containing the URL origins to be defered.
  // See: https://webdev.ac.cn/preload-optional-fonts/
  // Default: true (automatically optimize)
  'defer_third_party' => true,

  // Apply fade-in animation to tags after being lazy-loaded.
  // Default: false (do not apply by default)
  'use_css_fadein_effects' => false,

  // Use random background colors for images to be lazy-loaded.
  // Set the value to 'grey' if you want to use greyish background colors.
  // Default: false (do not apply by default)
  'use_color_placeholder'  => false,

  // ---------------------------------------------------------------------------

  // Default placeholder for lazy-loaded img tags.
  // If this value is not set or empty,
  //   an SVG image will be used to avoid CLS related problems.
  // See: https://webdev.ac.cn/cls/
  // Default: blank string
  'img_placeholder'    => '',

  // Default placeholder for lazy-loaded iframe tags.
  // Default: 'about:blank'
  'iframe_placeholder' => 'about:blank',

  // ---------------------------------------------------------------------------

  // Show custom HTML content (splashscreen)
  //   while browser is rendering the page (experiment).
  // Default: blank string (no splashscreen)
  'custom_splash_screen' => '',

  // ---------------------------------------------------------------------------

  // Do not lazy-load for URLs containing
  //   one of the array's texts (exact match keywords).
  // Default: blank array
  'ignore_lazyload_paths'  => [],

  // Do not lazy-load for tags containing
  //   one of the array's texts (exact match keywords).
  // Default: blank array
  'ignore_lazyload_texts'  => [],

  // Do not lazy-load for tags containing one of these CSS class names.
  // Default: blank array
  'ignore_lazyload_css_class'  => [],

  // Do not lazy-load for tags matching one of these CSS selectors.
  // See: https://w3schools.org.cn/cssref/css_selectors.asp
  // Default: blank array
  'ignore_lazyload_css_selectors'  => [
    // 'header img',
    // 'img#logo',
  ],
];

// Create a Defer object
$defer  = new \AppSeeds\Defer($options);
$result = $defer->fromHtml(file_get_contents('mypage.html'))->toHtml();
var_dump($result);

// Change library options
$defer->options()->debug = true;
$defer->options()->minify_output_html = true;

// Keep loading another HTML and optimize it with new options
$result2 = $defer->fromHtml(file_get_contents('otherpage.html'))->toHtml();
var_dump($result2);

优化网站的最终输出HTML

您还可以捕获PHP生成的最终输出，并在将其返回给浏览器之前对其进行优化。

// Include the library
require_once __DIR__ . '/vendor/autoload.php';

// Create a callback function
function ob_deferphp($html) {
  // Create a Defer object
  $defer = new \AppSeeds\Defer([
    /* declare options here */
  ]);

  return $defer->fromHtml($html)->toHtml();
}

// Call ob_start() function to create an output buffer
//   and pass above callback function name as its argument.
// This function should be called before any other process to print the content.
ob_start('ob_deferphp');

// .......... (place your PHP code here)

// And call this to flush optimized output HTML
//   right before you send the final HTML to browser.
ob_end_flush();

忽略某些元素的优化

将data-ignore属性添加到您不希望库进行优化的元素上。此属性可用于所有HTML元素。

<!-- Example for add data-ignore for a script tag -->
<script data-ignore>var MY_IMPORTANT_VARIABLE = 'important value';</script>

<!-- Example for add data-ignore for an img tag -->
<img data-ignore src="my_photo.jpeg" alt="Awesome photo" />

将data-nolazy属性添加到您不希望库进行懒加载的元素上。除懒加载外，对该元素的其它优化仍将应用。此属性可用于所有<img>、<picture>、<video>、<audio>、<iframe>以及<link rel="stylesheet">元素。

<!-- Example for add data-nolazy for an img tag -->
<img data-nolazy src="my_photo.jpeg" alt="Awesome photo" />

样式表和JavaScript

此库支持更高效的懒加载方法，用于包含 defer 属性的样式表和 JavaScript 标签。

<!-- Example for defer an stylesheet -->
<link defer rel="stylesheet" href="some/heavy/fonts.css">

<!-- Examples for defer some heavy script tags -->
<script defer src="some/heavy/libraries.js"></script>
<script defer>someHeavyTask();</script>

即使关闭此库，包含 defer 属性的上述标签也具有向后兼容性，并在大多数现代浏览器中运行良好。您可以放心使用。

AMP 页面

此库的少数选项适用于 AMP 页面（例如，最小化 HTML 内容）。

我的作品

Defer.js

https://code.shin.company/defer.js/

🥇 一个超级小巧、超级高效的库，帮助您懒加载几乎一切，如图片、视频、音频、iframe 以及样式表和 JavaScript。

Wordpress 插件

https://code.shin.company/defer-wordpress/

⚡️ 原生、速度极快的懒加载器。✅ 兼容旧版浏览器（IE9+）。💯 SEO 优化。🧩 懒加载一切。

Laravel 包

https://code.shin.company/defer-laravel/

🚀 一个专注于最小化 HTML 文档负载大小并在渲染网页时优化浏览器处理的 Laravel 包。

支持我的活动

从越南 🇻🇳 爱心奉献。

shinsenter / defer.php

维护者

详细信息