使用php加载图片并最小化HTTP请求答案

【问题标题】：Use php to load images and minimize HTTP requests使用php加载图片并最小化HTTP请求
【发布时间】：2020-05-02 14:46:21
【问题描述】：

目标：最小化我网站的加载时间

我做了很多扫描和速度测试。

它们都表明，有很多时间无用地花费在等待 HTTP 响应上。与此相比，实际发送数据所花费的时间非常少。

“速度测试”的屏幕截图：

我开始在 PHP 中加载所有脚本和样式，然后只是回显它们：

<!-- loading a style -->
<style><?php echo file_get_contents("style.css"); ?></style>

<!-- loading a script (similar) -->
<script type="text/javascript"><?php echo file_get_contents("script.js"); ?></script>

这确实有效，但是图像仍然会减慢速度。如何使用 php 读取它们并将它们作为<img> 标签回显？

（提到的网站是https://www.finnmglas.com/）

【问题讨论】：

标签： php image httprequest pagespeed

【解决方案1】：

每个寻求答案的人：

您不应使用 PHP 将图像回显到主文件中：

它会扰乱加载时间（使其更长）
它会延迟您网站的第一次渲染。即使您的请求较少，您也希望快速进行首次渲染（用户会注意到延迟）

从单独的 PHP 文件中回显图像并包含指向该 PHP 的 <img> 标记应该不是问题^^

【讨论】：

【解决方案2】：

是的，您可以将数据而不是 url 添加到 src 属性：

<img src="data:image/jpg;base64,<? php echo base64_encode($data) ?>" />

但我建议将其用于小图像。更多小图像的更好方法是将其用作精灵：https://www.toptal.com/developers/css/sprite-generator/

对于 css/javascript 使用一些 minify 预处理器：gulp gulp-clean-css gulp-uglify-es

【讨论】：

因此，如果我的服务器上存储了 jpeg，我可以将提到的 $data 替换为 file_get_contents("image.jpeg")，它会起作用吗？
它确实有效！我实际上并没有使用它，因为它在移动设备上的渲染速度较慢 - 但谢谢，它确实完美地回答了我的问题

【解决方案3】：

我注意到了同样的等待和滞后问题......

有很多因素，服务器的位置，访问者的位置（在图片屏幕的情况下；进行测试的服务器的位置），互联网提供商之间的路由器等等......

我发现使用 CDN 更好，浏览器将连接到在世界各地拥有许多服务器的 CDN，然后 cloudflare 询问您的服务器并缓存 HTML、js、css、图像、视频......所以交付到终点变得更快

你可以试试https://www.cloudflare.com/

【讨论】：

谢谢 - 从技术上讲这很棒，但这可能会使我的法律说明和隐私政策过于复杂（我在德国哈哈）
@finnmglas 嗨，另一个解决方案是 cloudinary 将图像、音频和视频放在 cloudinary cloudinary.com 中，然后将您的图像放在 <img src="...cloudinary_url..." 中