HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

【WordPress高速化日記】アイコン画像を全てアイコンフォントにした

2013-10-30_2109
Wordpress高速化のためにソーシャルボタンをかなり削減した@web_shufuです。しかし、各ページヘッダーの検索窓の下にある、各SNSアカウントとフィードへのリンクボタンのアイコン画像は手付かずでした。これらをアイコンフォントにして画像を減らし、高速化を図りました。

アイコンフォントとは

アイコンフォントは、a,b,c‥などの文字をキーボード入力したときに、特定のアイコン画像が出現するようにしたものです。

見た目はアイコンですが、あくまでも文字として取り扱われます。

@web_shufuの場合は、ソーシャルアイコンを全てアイコンフォントにすることで、全ページで4枚ずつ画像が削減できるわけです。

取り組む価値あり、ということで導入しました。

アイコンフォント導入方法

以下のページを参考に導入しましたが、

私のITリテラシー不足でかなり時間がかかったので、導入の詳細をキャプチャーつきで説明します。

まずは、http://fontello.com/に行きます。
2013-10-31_1543

欲しいアイコンを全てクリックし、「Customize Codes」タブをポチッ。
2013-10-31_1553

各アイコンに任意の文字をあてがいます。私は左からr,f,t,gをあてがいました。
2013-10-31_1556

その後右上の「Download webfont」ボタンを押します。
2013-10-31_1603

ダウンロードしたファイルを全て展開。
2013-10-31_1606

展開されて新しく出来た「fontello‥‥」フォルダーの下層からfontフォルダーを見つけてください。
2013-10-31_1640

これを、お使いのテーマフォルダーの直下にアップロードします。例えばtwentytwelveテーマを使っている場合は、/wp-content/themes/twentytwelve/の直下にアップロードします。

それが済んだら、cssフォルダーの中にあるfontello.cssをテキストエディターで開いてください。
2013-10-31_1609

いの一番に以下のような@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アカウントとフィードへのリンクボタンのコード

アイコンフォントが無事に表示されたら、あとは適宜スタイルをあてれば完成です。こんなボタンを造りました。

2013-11-01_1731
画像を貼らなくても検索窓の下を見ればわかるのですが、今後のサイト外観の更新に備えて、画像で残しておきました。

コードは以下の通りです。

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掲載の下の図がとてもわかりやすいです。
2013-10-31_1512

HTTPリクエストはクライアントとサーバーの間の通信作業なので、どうしてもそれなりの時間がかかります。

そしてその間ページ表示作業が止まります。ですから、

        <img src="" />
        <link rel="" />
        <script src=""></script>

を減らすのは高速化の基本と言ってもいいわけです。

画像を減らすと

        <img src="" />

が減るので高速化にとても寄与します。

CSSスプライトで画像を減らす方法もあるが‥

画像を減らす方法としてよく採用されているのがCSSスプライトです。

複数の画像を1枚の巨大な画像にまとめ、必要な部分をその都度切り出して表示する感覚です。

CSSスプライトもCodeZineさんの記事でわかりやすく説明されています。

ただ、CSSスプライトは、画像を1枚に減らす手法であって、0枚には出来ないです。

また、@web_shufuとしては、CSSスプライト用の巨大画像を作るのが面倒です。

また、切り出して表示するときのCSSもめんどくさそうです。(勉強すればなんでもないかもしれませんが)

そういうわけで、今回のアイコン画像削減では、アイコンフォントを採用しました。

手軽に出来てほんとによかったです。


投稿日

カテゴリー:

投稿者:

 最終更新日: