自作SNSボタンでロード時間を短縮計画

a-06

いつの間にやら、タブレットやスマホでの閲覧者が多くなって来た当ブログですが、最近表示スピードをチェックしてないな~と思い調べてみる。

現在はテーマを変更してしまい、デフォルトで簡単に設置できるものになってますが、ある程度は自身の勉強になったので無駄ではなかったと思います。

モバイル仕様にするか悩む。。。

Googleの【PageSpeed Insights】で調べると、結構遅くなっていました。

ついでにプラグイン【P3 (Plugin Performance Profiler)】にてプラグインのロードスピードを計測すると・・・

p3

う~ん、1秒過ぎたか・・・【crayon】がかなり占有しているが、結構使う事があるので据え置き。別プラグインで表示が速いと噂があるのに変更しようとも思ったが、こっちの方が使い勝手がいいのよね。

【crayon】が足を引っ張ている事は明白でオフるとかなりの時間短縮になる。ただ単にプラグインの容量が重い訳ではなく、cssなんかでロード時間の遅延がおきるのだ。

一応変更したくないので、設定を見直すも1~3ポイント程度しか回復しない・・・・

と言う訳で、【crayon】は後回しで他のプラグインを減らしましょうか。そう思ってもプラグインに依存している私は削れるものがほぼ無い😢

スポンサーリンク

それでも軽量化する

表示速度が遅くなっている主な原因は以下の通り

  1. プラグイン
  2. 公式SNSボタン&ウィジェット
  3. サーバー
  4. 広告

3と4は現在変更はしません。4がなければ3を変更する意味が無いんでwまあ逆にも言える事ですがね。サーバーが高速ならこの様な悩みは無くなるかも知れません。

でも高速サーバーを使っているサイトでも【PageSpeed Insights】で調べると遅かったりするので、結局は使い手次第なのかな?

テーマの問題

【ColorMag】って色々カスタマイズ出来るようになってはいるんですが、痒い所に手が届きそうで届いていない。

サイドバー変更機能がついているが、私的にはちょっといまいちなので、まだ当ブログでは使ってはいませんが、記事ごとにもサイドバーを変更できるプラグインを導入しています。

それはさて置き、SNSボタンも装備されているのですが、小さくそしてなにより右上にちょこんと置かれるので、全くの無意味なのである。

SNSボタンが問題

公式ボタンだとロード時間が遅すぎるんですよね。【WP Social Bookmarking Light】なんかで記事の上下に表示しているサイトが多いと思いますが、記事の上のボタンを読み込む前に記事本文を読み始めてしまうことありませんか?

当ブログでもこのプラグインを使っているのですが、余りにも表示スピードに影響が出ているので、自作ボタンに変更したいと思います。

フラットなSNSボタンをWEBフォントで自作

当ブログには、フラットで角ばったボタンが似合いそうだったので今回はこの様にしました。

sns-b

WEBフォントを使うことで、アイコンはテキストと同様に扱われるのでロード時間を大幅に短縮出来ます。

WEBフォントを用意しよう

「Icomoon」というサイトで簡単に用意できるのですが、問題があって【はてブ】【Pocket】などなどが、無いんですよ。

この「Icomoon」は簡単にインポートも出来るので、自作するかどーか迷いましたが、結局ネットでのアイコン探しの旅へw

いや~流石です!神様がおられました。わざわざダウンロードさせてくれるんです!ありがたや~ありがたや~

【ドウラク】さんありがたや~

てなわけで、無事WEBフォント素材を入手。

「Icomoon」サイトにてインポートします

icon-f

せっかくなので、欲しいアイコンもダウンロードをしておきます。

icon-2

私の場合は今回TwitterとFacebookのみ必要だったので2つダウンロードしましたが、Google+なんかも欲しければ、選択してください。

注意:ロゴは各団体企業の著作物で使用制限も各々違います。各レギュレーションを確認して使用して下さい。

フォルダのサーバーへのアップロード

解凍したフォルダの中に【fonts】を使用するテーマ、子テーマ内に入れます。

私の場合:wp-content/themes/colormag_child←この中

svr

この4つがfonts内にあればOKです。

style.cssファイルを子テーマに張り付ける

「Icomoon」のstyle.cssを開き全てコピーして子テーマのstyle.cssに追記します。

変更する場所があります。fontsの前に【./】を入れる。

ここまで分かりましたか?以上が事前準備なのです。

WEBフォントを使う

「Icomoon」からダウンロードしたdemoを開くと

fb

一覧が出て来るので、そこでコードに埋め込む文字を見る事が出来ます。

基本的には表示させるコードはこれ

記事本文中は

文字やカラーを変更するにはCSS

SNSボタン設置

さあいよいよ設置方法なのですが、適当にコードを晒しておきますので、自分で変更を加えるなりして下さい。

子テーマのstyle.cssに追加して下さいね。

この部分は【ColorMag】用に合わせました。結構適当で、5つ並列表示にしたかったので、100÷5=20なのですが、マージン2px取っているので約19.5%

場合によっては、先頭の.share {width : 100%;}は要らないかと思いますが、私の環境では入れないと変な回り込みが発生したので追加しました。

スマホ表示

このままではグデグデ表示なので、どーしたものかと色々なサイトから知恵を拝借して、とりあえず一列ずつ表示させる事にしました。

sumaho

この様な感じでコードは

これ!条件分岐で599px以下になったらこっちを表示しますよって事。

う~ん、横幅いっぱいだと記事上に置くにはちょっとね? なので、現在は記事下のみに配置しています。どうせ大してシェアされていませんしねw

この事は後から考えます。

子テーマの中に新しくphpファイルを作る

名前は自分が分かれば適当でいいですが、sns.phpとでもしておきましょうか。サーバーのFTPソフトなんかで、空ファイルを作って子テーマの中に入れて下さい。

WordPreeに戻って、テーマの編集画面に新しく【sns.php】が出来ているのを確認したらそいつをクリック。

このコードをコピペして下さいな。feedlyは自分のドメインを記入して下さい。

設置して完了

上記のコードを任意の場所に設置します。私はcontent-single.php内に張り付けました。

分からなければ、single.php内の</div><!– .entry-content –>の上にでも貼れば間違いないかと思います。

私は個別ページにしか設置していないのでこれで終了です。そういう風に条件分岐させてます。

SNS Count Cacheというプラグインを入れるとカウントされる様にしておきました。

これは、サーバーのキャッシュを使うので、リアルタイムで表示は出来ませんが、キャッシュを読み込むだけなので、高速表示に繋がります。

設定はデフォルトで問題ないかと思います。逆にキャッシュ取得の時間を短くするとサーバーに負荷をかけるかも知れないので、気長に待っていて下さい。

まとめ

何だかんだで、今回はSNSボタンのみの変更でしたが、目に見えて速くなったと実感できるようになりました。

SNSボタンは今や必須です。自身のブログの来訪者がスマホユーザーが多い場合は、自作ボタンに挑戦するのも良いかもしれませんね。

スポンサーリンク

シェアする

フォローする

スポンサーリンク