css - 如何使用 CSS sprites 组合图像

标签 css wordpress yslow gtmetrix

在使用 GTmetrix 测试我的 wordpress 网站速度后,我通过 YSlow 获得了以下建议: enter image description here

*使用 CSS sprites 组合图像 应使用 CSS sprites 将 wamakity.com 提供的以下图像组合成尽可能少的图像。 enter image description here

*添加过期 header 有 9 个没有远期失效日期的静态组件。 enter image description here

*减少 HTTP 请求 此页面有 16 个外部 Javascript 脚本。尝试将它们合二为一。

此页面有 14 个外部样式表。尝试将它们合二为一。

本页面有15张外部背景图片。尝试将它们与 CSS Sprite 组合。

有人可以帮忙吗?我是 wordpress 的新手,除了从这里,我似乎找不到任何其他方法来解决这个问题。 谢谢!

最佳答案

我最喜欢的 Sprite 生成器是 https://spritegen.website-performance.org/ 您只需要将小图像拖放到窗口中,下载 spritesheet.png、stylesheet.css,然后在您的 style.css 中更改这些图像的背景图像和背景位置属性

关于css - 如何使用 CSS sprites 组合图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47388387/

相关文章:

jquery - 列出 LI 元素并在高于父容器时包装

javascript - 通过操作 DOM w 更改内容。 Javascript 与创建新的 HTML/CSS 页面 : which is more efficient?

php - 手动更新 WordPress 数据库

jquery - WordPress 网站上的响应图像

html - 从无 cookie 域提供静态内容

c# - 没有过期 header

optimization - 网站优化有多重要?

javascript - 按照 EJS 中的 If 条件给出样式

html - 使用边框样式 css 制作哈维球

php - 在 Woocommerce 中将我的帐户编辑帐户字段设置为只读