画像を組み合わせてWordPressのネットワーク要求を減らす方法

2019年3月10日

過去数週間にわたり、私は特定のページにCloudflareのフルページキャッシュを実装し、CSSをリファクタリングし、1ページの読み込みあたりのリクエスト数を減らすことで、このWebサイトの最適化に取り組んできました。 Decryptoの各ページの左上隅にTwitterアイコン、右上隅にInstagramアイコンがあります。以前は、2つのアイコンは2つの別々のPNG画像でした。ちょっとPhotoshopとCSSの魔法の後、私はその数を半分にしました。現在は、両方のアイコンが同じPNG画像で表示されています。

これを達成するために、私が最初にしたことは、2つのオリジナルのアイコンをPhotoshopにインポートすることでした。それらを並べて配置し、2つのアイコンの間に余分な空白を1ピクセル追加しました。これが結果の画像です。ズームインすると、2つのアイコンが1ピクセル幅の空白で区切られているのがわかります。

次に、次のCSSを使用して各「個別」アイコンのサイズを設定しました。私は object-fit プロパティを使って画像のサイズが変わらないようにしました。

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

次に、以下のCSSで相対的な画像位置を設定します。ソース画像の1pxの空白を考慮して、Instagramのアイコンの位置に余分な1pxがあることに注意してください。あなたがあなたのウェブサイトに似たようなものを実装しようとしているならば、私は強く「個人」の間に少なくとも1pxの空白を追加することを勧めます。そうしないと、特定のブラウザで表示エラーが発生する可能性があります。

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

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

それでおしまい!この方法を使用して、必須の画像リクエスト数を50%削減しました。パフォーマンスは向上しましたか?たぶん、しかしそれは気づくほど十分ではありません。それは私の気分を良くするのでしょうか?はい、それがすべて重要です。


質問は?

ツイッターまたはメールで問い合わせ。