Wordpress高速化のためにソーシャルボタンをかなり削減した@web_shufuです。しかし、各ページヘッダーの検索窓の下にある、各SNSアカウントとフィードへのリンクボタンのアイコン画像は手付かずでした。これらをアイコンフォントにして画像を減らし、高速化を図りました。
アイコンフォントとは
アイコンフォントは、a,b,c‥などの文字をキーボード入力したときに、特定のアイコン画像が出現するようにしたものです。
見た目はアイコンですが、あくまでも文字として取り扱われます。
@web_shufuの場合は、ソーシャルアイコンを全てアイコンフォントにすることで、全ページで4枚ずつ画像が削減できるわけです。
取り組む価値あり、ということで導入しました。
アイコンフォント導入方法
以下のページを参考に導入しましたが、
私のITリテラシー不足でかなり時間がかかったので、導入の詳細をキャプチャーつきで説明します。
まずは、http://fontello.com/に行きます。
欲しいアイコンを全てクリックし、「Customize Codes」タブをポチッ。
各アイコンに任意の文字をあてがいます。私は左からr,f,t,gをあてがいました。
その後右上の「Download webfont」ボタンを押します。
ダウンロードしたファイルを全て展開。
展開されて新しく出来た「fontello‥‥」フォルダーの下層からfontフォルダーを見つけてください。
これを、お使いのテーマフォルダーの直下にアップロードします。例えばtwentytwelveテーマを使っている場合は、/wp-content/themes/twentytwelve/の直下にアップロードします。
それが済んだら、cssフォルダーの中にあるfontello.cssをテキストエディターで開いてください。
いの一番に以下のような@font-faceの記述があります。(?の後ろについては人それぞれで記述が変わります。)
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?55379083');
src: url('../font/fontello.eot?55379083#iefix') format('embedded-opentype'),
url('../font/fontello.woff?55379083') format('woff'),
url('../font/fontello.ttf?55379083') format('truetype'),
url('../font/fontello.svg?55379083#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
これを、「../」を全て削除した上で、使っているテーマのstyle.cssで、スタイルに関する記述が始まる直前に置きます。私は、Twentytwelveをカスタマイズしているのですが、Resetのためのcssの直前に置きました。
@font-face {
font-family: 'fontello';
src: url('font/fontello.eot?35397399');
src: url('font/fontello.eot?35397399#iefix') format('embedded-opentype'),
url('font/fontello.woff?35397399') format('woff'),
url('font/fontello.ttf?35397399') format('truetype'),
url('font/fontello.svg?35397399#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* =Reset
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
‥‥‥‥‥‥‥‥‥‥‥
‥‥‥‥‥‥‥‥‥‥‥
‥‥‥‥‥‥‥‥‥‥‥
これでアイコンフォントが使えるようになりました。
例えばstyle.cssに以下のように書き
.icon-2466 {font-family: "fontello";}
テーマのテンプレートファイル(single.phpなど)や投稿で以下のように書くと
<span class="icon-2466">r,f,t,g</span>
見事にアイコンが表示されます。
r,f,t,g
各SNSアカウントとフィードへのリンクボタンのコード
アイコンフォントが無事に表示されたら、あとは適宜スタイルをあてれば完成です。こんなボタンを造りました。
画像を貼らなくても検索窓の下を見ればわかるのですが、今後のサイト外観の更新に備えて、画像で残しておきました。
コードは以下の通りです。
header.php
<div class="sb">
<a href="https://twitter.com/web_shufu"><span class="icon-twitter-squared">t</span></a>
<a href="http://www.facebook.com/webshufu"><span class="icon-facebook-squared">f</span></a>
<a href="http://plus.google.com/108359383884281303564?prsrc=3"><span class="icon-gplus-squared">g</span></a>
<a href="https://webshufu.com/feed/"><span class="icon-rss-squared">r</span></a>
</div>
style.css
.sb {
font-size: 42px;
text-align: center;
}
.icon-rss-squared {
color:#ff9f00;
} /* 'r' */
.icon-facebook-squared {
color:#455a9d;
} /* 'f' */
.icon-gplus-squared {
color:#dc4935;
} /* 'g' */
.icon-twitter-squared {
color:#4dccf5;
} /* 't' */
.icon-rss-squared ,
.icon-facebook-squared,
.icon-gplus-squared ,
.icon-twitter-squared {
font-family: "fontello";
speak: none;
text-decoration: inherit;
}
Google page speed insightで高速化の成果を測った。
ボタンをアイコンフォント化した後、例によって、「Krad XinによるロリポップWordpressサイト大量ハッキングまとめ |ウェブシュフ」のページスピードをGoogleページスピードインサイトで計測しました。
が、今回はうっかりGoogleページスピードインサイトのキャプチャーを取り忘れました。
しかし、前回と比べてモバイルのスコアは74⇒79と大幅アップ。
PCのほうは89のまま変わりませんでした。
画像を減らすと高速化する理由
わかっている人には今更感満載ですが、アイコンフォントで画像を減らすと高速化するわけを少し説明。
ウェブページ表示の際、htmlソースは、基本的に上から順に読まれていきます。
ソースに書かれていることに従って順次ページ表示が完成していきます。
しかし
<img src="" />
<link rel="" />
<script src=""></script>
こういうのがソース上にあるたびに、””で示されたファイルを読み込む為のHTTPリクエストが発生し、ページ表示作業が中断します。
httpリクエストとは何かというと、ウェブページを表示しているクライアントPCからサーバーに対して行われる特定ファイルの送信要求です。
Webサイト高速化に必要なHTTPの仕組みを理解する (1/4):CodeZine掲載の下の図がとてもわかりやすいです。
HTTPリクエストはクライアントとサーバーの間の通信作業なので、どうしてもそれなりの時間がかかります。
そしてその間ページ表示作業が止まります。ですから、
<img src="" />
<link rel="" />
<script src=""></script>
を減らすのは高速化の基本と言ってもいいわけです。
画像を減らすと
<img src="" />
が減るので高速化にとても寄与します。
CSSスプライトで画像を減らす方法もあるが‥
画像を減らす方法としてよく採用されているのがCSSスプライトです。
複数の画像を1枚の巨大な画像にまとめ、必要な部分をその都度切り出して表示する感覚です。
CSSスプライトもCodeZineさんの記事でわかりやすく説明されています。
ただ、CSSスプライトは、画像を1枚に減らす手法であって、0枚には出来ないです。
また、@web_shufuとしては、CSSスプライト用の巨大画像を作るのが面倒です。
また、切り出して表示するときのCSSもめんどくさそうです。(勉強すればなんでもないかもしれませんが)
そういうわけで、今回のアイコン画像削減では、アイコンフォントを採用しました。
手軽に出来てほんとによかったです。