stinger5のソーシャルボタン読み込みを画像に差し替える事で表示速度を上げる

stinger5ではデフォルトでソーシャルボタンを読み込む機能が備わっています。とても便利ですが、各スクリプトへのアクセスを行うことでベージ表示速度に少なからず影響を与えています。

そこで、スクリプトによるボタンの読み込みではなく画像に差し替えスクリプトを読み込まないようにしましょう。

実際どれだけ表示速度が変わるのか。

実際の所、どれほどページ表示速度に影響があるのでしょうか。見てみましょう。

まずはデフォルトの状態。各ボタンを読み込むために公式から提供されるスクリプトファイルを読み込んでいます。

読み込みにかかった時間は2.09秒です。

次に画像を設定したと仮定してボタンを外しました。画像の容量はそこまで大きくないので誤差の範囲だと仮定します。

1.66秒。大体0.4秒程度のページ表示改善になりました。0.4秒の違いは結構大きいでしょう。

コードの差し替え

ソーシャルボタンの読み込みは、stinger5テーマ内の「sns.php」により提供されています。ここを変更すれば、ソーシャルボタンの読み込みを変える事ができます。

    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
    </ul>

公式から提供されるコードをそのまま貼り付けている事がここから分かります。これをまるっとスクリプトを使わない画像リンクに差し替えます。

<?php $title = the_title( "", "", false ) . "｜" . get_bloginfo( 'name' ); ?>
<div class="sns">
	<ul class="snsb clearfix">
		<li>
			<!-- twitter -->
			<a href="https://twitter.com/share?text=<?php echo $title ?>&amp;url=<?php the_permalink(); ?>" target="_blank" rel="nofollow">
				<img src="<?php echo get_template_directory_uri(); ?>/images/twitter.png" alt="twitter_share"/>
			</a>
		</li>
		<li>
			<!-- facebook -->
			<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" target="_blank" rel="nofollow">
				<img src="<?php echo get_template_directory_uri(); ?>/images/face.png" alt="facebook_share"/>
			</a>
		</li>
		<li>
			<!-- google+ -->
			<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow">
				<img src="<?php echo get_template_directory_uri(); ?>/images/google.png" alt="googleplus_share">
			</a>
		</li>
		<li>
			<!-- hatena -->
			<a href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php the_permalink(); ?>&amp;3title=<?php echo $title ?>" target="_blank" rel="nofollow">
				<img src="<?php echo get_template_directory_uri(); ?>/images/hatena.png" alt="hatena_share">
			</a>
		</li>
	</ul>
</div>

最初の行の「<?php $title = the_title( "", "", false ) . "｜" . get_bloginfo( 'name' ); ?>」でページタイトルとブログタイトルを取得して合わせています。その後はリンクと画像をつけているだけです。SEO対策としてリンクには「nofollow」を付与しています。画像はstingerテーマ内の画像用ディレクトリ「images」を参照していて、そこにソーシャルボタン用画像を読み込んでいます。デフォルトでは入っていないので各自用意する必要があります。

ソーシャルボタン用リンク記述はそれぞれやり方がありますので、その他のソーシャルボタンを実装したい場合は各自調べてみてください。

これで画像読み込みが完了いたしました。きちんと画像に切り替わっていますね。

表示速度もまずまず。大体1.5～1.6秒を行ったり来たりしています。

ボタンをクリックすると新しいタブが開いてツイートできるようになっています。

スクリプトを使い専用小ウィンドウを表示して共有できるようにする

公式スクリプトのボタンを押すと、小さな専用窓が開きます。画像リンクの場合はそれができないので、別途jsファイルを読み込んで小ウィンドウで開くように設定しましょう。

stinger5テーマ内にある「js」ディレクトリ内に「socialopen.js」ファイルを作成し、下記コードを記述します。

jQuery(document).ready(function () {
    jQuery(".sns a").
        click(function () {
            window.open(this.href, 'sosialwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1');
            return false;
        });
});

「.sns」クラス内のリンクがクリックされたら小ウィンドウを表示するというjqueryコードです。
次に同じくテーマ内の「functions.php」を開きます。

function register_jq_script() {
	if ( ! is_admin() ) {
		$script_dir = get_template_directory_uri();
		wp_deregister_script( 'jquery' );
		wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), false, false );
	}

というコードが記述されていると思いますので、そこに下記のようにコードを追加します。

function register_jq_script() {
	if ( ! is_admin() ) {
		$script_dir = get_template_directory_uri();
		wp_deregister_script( 'jquery' );
		wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), false, false );
	}
	wp_enqueue_script( 'socialopen', get_template_directory_uri() . '/js/socialopen.js', array(), false, true );

新しいウィンドウがでて共有できるようになりました。

あとはCSSを整えるなどの調整をして完了です。お疲れ様でした。