IOKプログラミング

phpやsshコマンド使い方、woredpress、seo等に関して個人的メモサイトです。

WordPress

Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと

Googleが提供しているPageSpeed Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。

PageSpeed Insights

たかがページの読み込み時間、と侮ることはできません。
読み込み時間が短くなることで、

  • Googleに評価される。
  • ユーザーにストレスをあたえない。

というメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。

ページの読み込みスピードを分析してみる

画面中央のフォームにサイトのURLを入力し、「分析」をクリックします。

PageSpeed-Insights

モバイルで読み込んだ場合と、パソコンで読み込んだ場合の両方で、スコアと改善内容が表示されます。

【スコア】
score

【改善内容】

teian

真っ赤っ赤です。全然ダメですね……反省です。ここから心機一転し、改善に取り組みます。

ツールから提案された修正項目は以下になります。

  1. 画像を最適化する
  2. スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する
  3. ブラウザのキャッシュを活用する
  4. HTML,CSS,JavaScriptを縮小する

あまり馴染みのない項目もありますが、やっていきましょう。

実際に改善してみよう

各提案にはGoogleから推奨される解決方法が記載されています。順番にやっていきます。

1. 画像を最適化する

Googleは、「画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます」と言っています。そこで、画像圧縮ツールを使用し、画像のサイズを小さくしましょう。

「でも、画像加工ソフトを持っていない」という方もいるかもしれません。その場合はWebサービスを使いましょう。

例えば、pngファイルであれば、ドラッグ・アンド・ドロップするだけの「TinyPNG」が便利です。

TinyPNG – Compress PNG images while preserving transparency
jpegファイルであれば、「JPEGmini」なんていかがでしょうか。

JPEGmini   Process your photo

 

また、以下のような画像圧縮プラグインを利用することもできます。

EWWW Image Optimizer

WordPress › EWWW Image Optimizer « WordPress Plugins

(使い方の詳細については、日本語解説記事もあります)

 

これでだいぶページが軽くなりました。それでは、次に行きます。

2. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

GoogleはJavaScriptについて、2通りの解決方法を推奨しています。

    1. 小さな JavaScript をインライン化する

これは、外部スクリプトの内容が小さい場合はHTMLに直接記述することでJavaScriptの読み込みを減らしてページの表示を速くするというものです。残念ながら今回は対応できそうなものがなかったので実行はしませんでした。

    1. JavaScript の読み込みを遅らせる

これはHTMLのscript要素にasync属性を記述するというものです。これによってJavaScriptを非同期で読み込むことができます。

今回は上記の内容に加え、JavaScriptをwp_footer()内で呼び出すようにしました。
本来であればwp_head()内で読み込まれることが多いかと思いますが、wp_enqueue_scriptを実行する際に、パラメーターの最後にtrueを記述することでwp_footer()内で呼び出すようにしています。ただし、利用状況によってレイアウトが崩れたり、思った挙動がされなくなることがありますので、1つ1つ確認して実装しましょう。

またプラグインを利用することで、実装することもできます。

Asynchronous Javascript

WordPress › Asynchronous Javascript « WordPress Plugins

 

次は、CSS配信の最適化を行います。
Googleは、次の3つの解決方法を推奨しています。

    1. 小さな CSS ファイルのインライン化

先ほどのJavaScriptの例と同じように、HTMLに直接記述をすることで読み込みするファイルを減らすというものです。これはすぐ出来ますね。

    1. 大きなデータ URI をインライン化しない

小さなCSSファイルをインライン化すると読み込みファイルを減らすことができますが、データ量の多いものをインライン化するとスクロールせずに見える範囲のCSSのサイズが大きくなり、読み込み時間が遅くなってしまいます。

    1. CSS 属性をインライン化しない

コードの不要な重複につながる場合があるため、HTML要素にCSS属性(< p style=…> など)をインライン化するのはできるだけ避けてください。

例によって、プラグインを利用することで、実装することもできます。

Async JS and CSS

Refresh SF   Online JavaScript and CSS Compressor

(使い方の詳細は日本語解説記事で)

3. ブラウザのキャッシュを活用する

これについては、.htaccessを設置してブラウザキャッシュを設定することにより解決できます。
.htaccessは、設置したディレクトリ以下に適用されます。弊社の場合はWordPressインストール時に展開されたディレクトリ内に置きました。

.htaccess内に以下の内容を記載してください。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 15 days”
ExpiresByType image/gif “access plus 10 days”
ExpiresByType image/jpg “access plus 10 days”
ExpiresByType image/jpeg “access plus 10 days”
ExpiresByType image/png “access plus 10 days”
ExpiresByType application/x-javascript “access plus 10 days”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType text/js “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
</ifModule>

なお、Apacheのモジュール「mod_expires」に対応している必要があります。
また、記述する期間はサイトの運用状況によって変更が必要になります。キャッシュ系のプラグインは、扱いが難しいので推奨はいたしません。

4. HTML,CSS,JavaScriptを縮小する

Googleからは余分なスペース、改行、インデントなどの不要なバイトを取り除くことが必要だと言われています。

Webサービスで実装できるものがあります。

Refresh-SF

Refresh SF   Online JavaScript and CSS Compressor

対象ファイルをドラッグ・アンド・ドロップして、右上のJavascript・CSS・HTMLの該当するボタンをクリックします。

WordPressのRSSフィードに画像を入れる

ここしばらくRSSリーダは使わず、自分のTwitterアカウントに気になるサイトのRSSフィードを流して読んでましたが、

最近使い始めたFeedlyというRSSリーダがなかなか見やすく、iPhone、iPadアプリもあってサイトの閲覧はFeedly経由になりつつあります。

feedly. feed your mind.
Feedlyは、iOS, Android, Chrome, Safari , Firefoxで常にシンクして見ることが出来ます。

ただ、FeedlyのようなリッチコンテンツなRSSリーダやアプリを使うと、テキストオンリーなフィードだと味気なく感じるので、CamCamのRSSフィードを少し改造。

今まで放置していたRSSフィードに画像を入れて配信するようにしました。(タイトル画像が写真付きフィード)

WordpresはデフォルトではRSSフィードはテキストのみです。それに画像を入れるのは超簡単。
使っているテーマのfunctions.phpに(無ければ作成)以下を追記するだけ

function do_post_thumbnail_feeds($content) {
    global $post;
    if(has_post_thumbnail($post->ID)) {
        $content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
    }
    return $content;
}
add_filter('the_excerpt_rss', 'do_post_thumbnail_feeds');
add_filter('the_content_feed', 'do_post_thumbnail_feeds');

投稿画面右下のアイキャッチ画像で画像を設定すると反映します。

今、諸事情によりデカい画像付けて配信してますが、画像付けて配信すんなウザイみたいなお話しは、まちょっとお許しくださいませ。

スマホとPCに別々の広告を表示させる(WordPres&HTMLサイト対応)

スマホだけ表示させたい!とか、
PCだけ表示させたいコンテンツや広告ってありますよね。

スマホしか対応してない広告をPCユーザーに見せても成果につながらないじゃないですか。。。

そんな時に使えるコードをご紹介します。WordPressとHTMLサイト、
両方のバージョンをご紹介します。

WordPressでスマホとPCの広告を分ける

テンプレートに直接広告タグを貼る場合

single.phpとか、
テンプレートファイルに直接コードを書く場合、

<?php if(is_mobile()): ?>
★スマホのみに表示させる広告★
<?php else: ?>
★PCのみに表示させる広告★
<?php endif; ?>

↑ このように書けばOK!

スマホ・PCと表示させる広告を分けるのではなく、
スマホのみに表示させたい広告がある場合以下のように書きます。

<?php if(is_mobile()): ?>
★スマホのみに表示させる広告★
<?php endif; ?>

逆に、PCのみに表示させたい広告がある場合以下のように書きます。

<?php if(!is_mobile()): ?>
★PCのみに表示させる広告★
<?php endif; ?>

ブログ投稿内に広告を貼りたい場合

まずはfunctions.phpファイルに

function pccontents( $atts, $content = null ) { 
	if(is_mobile()) {
		return '';
	} else {
return '' . $content . '';
}
}
function spcontents( $atts, $content = null ) {
if(is_mobile()) { return '' . $content . ''; } else { return ''; } }
add_shortcode('pc-mieru', 'pccontents'); add_shortcode('sp-mieru', 'spcontents');

↑ このように書いてショートコードを作成!

記事投稿画面で、

[pc-mieru]★スマホのみに表示させる広告★[/pc-mieru]
 [sp-mieru]★PCのみに表示させる広告★[/sp-mieru]

↑ こんな感じに書けばOK!

参考サイト様:【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに内容を切り替える方法

HTMLサイトでスマホとPCの広告を分ける

HTMLサイトの場合、ちょっと荒業っぽいやり方になります(-`ω´-;A

2通りのやり方をご紹介しますので、お好きな方をお使いください。

JavascriptでスマホとPCの広告を分ける

HTMLファイルに以下のJavascriptコードを書けばOK!

<script type="text/javascript">
var getDevice = (function(){
	var ua = navigator.userAgent;
	if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
		document.write('★スマホのみに表示させる広告★');
	}else{
		document.write('★PCのみに表示させる広告★');
	}
})();
</script>

注意する所は、貼り付ける広告タグに改行が入っていると、
エラーになって、ちゃんと表示されません( ;∀;)

改行を削除されるか、改行前に \ を入れてください。


CSSでスマホとPCの広告を分ける

まずはCSSファイルに

.sp-mieru {
	display: none;
}
@media screen and (max-width: 640px) {
	.pc-mieru {
		display: none;
	}
	.sp-mieru {
		display: block;
	}
}

↑ このように書いて・・・・

HTMLファイルに

<div class="pc-mieru">★PCのみに表示させる広告★</div>
<div class="sp-mieru">★スマホのみに表示させる広告★</div>

↑ こんな感じに書けばOK!

ギャラリー
  • sshの置換するときの¥の使い方
  • インターネット広告の料金一覧
  • インターネット広告の料金一覧
  • インターネット広告の料金一覧
  • インターネット広告の料金一覧
  • インターネット広告の料金一覧
  • インターネット広告の料金一覧
  • インターネット広告の料金一覧
  • インターネット広告の料金一覧