如何通过组合图像减少WordPress中的网络请求

2019年3月10日

在过去的几周里,我一直致力于通过在某些页面上实施Cloudflare全页面缓存,重构CSS以及减少每页加载的请求数量来优化此网站。 Decrypto的每个页面左上角都有一个Twitter图标,右上角有一个Instagram图标。 以前,这两个图标是两个单独的PNG图像。 经过一点点Photoshop和CSS魔术,我把这个数字减少了一半。 现在,两个图标都显示相同的PNG图像。

为了实现这一点,我做的第一件事就是将两个原始图标导入Photoshop。 我将它们并排放置,并在两个图标之间添加了一个额外的空白像素。 这是结果图像。 如果放大得足够近,可以看到分隔两个图标的1px宽的空白区域。

接下来,我使用以下CSS来设置每个“单个”图标的大小。 我还使用 object-fit 属性来确保图像不会调整大小。

.social-icons img {
height: 32px;
width: 32px;
object-fit: none;
}

接下来,我使用以下CSS设置相对图像位置。 请注意Instagram图标位置上的额外1px,以说明源图像中的1px空白。 如果您希望在您的网站上实现类似的功能,我强烈建议在“个人”之间添加至少1px的空白。 不这样做可能会导致某些浏览器显示错误。

#twitter img {
object-position: 0 0;
}

#instagram img {
object-position: -33px 0;
}

而已! 使用此方法,我将强制图像请求数量减少了50%。 是否有性能提升? 可能,但它并不足以引起注意。 这会让我感觉更好吗? 是的,这就是最重要的。


如有问题

請联絡本人的Twitter帐户或电子邮箱.