使用php加载图片并减少HTTP请求

Question

目标：最大限度地减少我的网站的加载时间。

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

他们都表明，有大量的时间花费在无用的，等待HTTP响应.实际发送数据的时间是非常小的相比。

一个 "速度测试 "的截图。

所以我开始在PHP中加载所有的脚本和样式，然后直接呼应它们。

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

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

这样做确实有效，但是，图片的速度还是有点慢。我如何用php读取它们，并将它们呼应成一个 <img> 标签？

(所述网站为 https:/www.finnmglas.com)

Answer 1

每个人都在寻求答案。

你不应该用PHP回传图片到主文件中。

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

从一个单独的PHP文件中呼应图像，并包含一个 <img> 标签指向该PHP应该没有问题^^。

Answer 2

是的，你可以添加数据而不是url到 src 属性。

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

但我建议对小图片使用这种方式。对于更多的小图片来说，更好的方法是将其作为精灵使用。https:/www.toptal.comdeveloperscsssprite-generator

并为cssjavascript使用一些minify预处理器。gulp gulp-clean-css gulp-uglify-es

Answer 3

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

有很多因素，服务器的位置，访问者的位置（在picscreen的情况下，做测试的服务器的位置），互联网供应商之间的路由器，等等。

我发现，使用CDN是更好的方式，浏览器将连接到CDN，有许多服务器在世界各地，然后cloudflare问你的服务器和缓存的HTML，js，CSS，图像，视频......所以，交付到终端变得更快的方式。

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