Tag: Wordpressプラグイン

61月

[WordPress]素人がキャッシュ系プラグインやCDNを安易に導入するのは危険

以前、キャッシュ系プラグイン『W3 Total Cache』や『DB Cache Reloaded』、CDN『CloudFlare』を利用していましたが、許容できないレベルのタイムラグが発生してしまいました。

知識がなければ、原因を特定できず、致命的な欠陥となる恐れがあります。質のいいサーバーを利用すれば、100万PV/月程度までなら、キャッシュ系プラグインやCDNは不要であるため、素人は安易に手を出さないことをおすすめします。

 

キャッシュ系プラグイン&CDNとは

WordPressを利用したサイトは、その構造上、アクセスがある度に動的にページを生成して表示させています。

キャッシュ系プラグインは、動的に生成する様々な要素をキャッシュ化し、あらかじめ用意しておくことで、負荷を経験したり、コンテンツ表示速度を速めたりできます。

便利なものではあるのですが、実のところ、仕組みはかなり複雑です。

どの要素をキャッシュ化するかによって、ページキャッシュ、オブジェクトキャッシュ、データベースキャッシュなど、様々に分類でき、それぞれに対応しているプラグインが無数に存在します。こちらのページがうまく分類してくれています。

WordPressキャッシュ系プラグインの比較とサイトに適した選び方 | ゆっくりと…

つまり、あれがいいから、これがいいからと、仕組みもよくわからずにキャッシュ系プラグインを多用してしまうと、機能がかぶってしまったり、機能を充分に発揮させられなかったり、酷いときには不具合が出て逆にパフォーマンスが低下したりするわけです(後述しますが、体験済みです……)。

またCDNとは、コンテンツ・デリバリ・ネットワーク(Contents Delivery Network)を意味し、従来は大容量コンテンツをストレスなく配信するために用いられてきたシステムです。

が、無料で使える『CloudFlare』などの登場により、個人ブログの負荷対策・コンテンツ表示速度改善にも使われるようになりました。きちんと機能すれば、キャッシュ系プラグインよりも大幅な効果を期待できるようです。

ただしこれも、仕組みをきちんと理解できないと、うまく機能しなかったり、不具合が出たときに対処できなかったりします。

 

GTmetrixでは明確に数値が向上するものの、許容できないタイムラグが発生

当サイト『Handmade Future !』では、2013年秋頃まで、キャッシュ系プラグイン『W3 Total Cache』『DB Cache Reloaded』と、CDN『CloudFlare』を併用していました。

GTmetrixでは、明らかに数値が向上し、GoogleとYahoo!の指標でダブルAを獲得できていました。
2014-01-06_1027

(なので、きちんと動作してくれれば、これで正解なのだと思います)

が、当サイトで使用しているテンプレート『Sahifa』との相性が悪かったのか、はたまは別の要因によるのかわかりませんが、リンクをクリックしてからページの読み込みが開始されるまでに、3秒や5秒といった、とても許容できないレベルのタイムラグが発生してしまっていました。

プラグインのオン・オフを切り替えてみたり、『CloudFlare』を切ってプラグインのみにしてみたりと、時間をかけて思いつく限りの検証はしてみたのですが、結局、知識の無さがアダになり、原因を特定できませんでした。

最終的には、数字よりも体感を優先すべく、キャッシュ系プラグインとCDNの利用を取りやめました。

上記グラフのとおり、現在はGTmetrixでの評価は下がっていますが、体感速度は飛躍的に向上しています。

Latest Performance Report for: http://yorikanekeiichi.com/ | GTmetrix

 

高品質サーバーを利用するのが最大の負荷対策

現在、『Handmade Future !』では、共有サーバー最高峰とも言われる『シックスコア』のレンタルサーバーを利用し、キャッシュ系プラグインやCDNは一切使用していません。

記事がバズったときは、該当記事のみを、手動で、シックスコアのキャッシュ機能である “Xキャッシュ” でキャッシュ化しています(サイト全体をキャッシュする設定にすると、すべてのページで同じ記事が表示されてしまう不具合が発生したため、現在の運用に落ち着きました)。

これだけで、同時接続800人超にも対応できました。
2013-12-29_1705

体感ではパフォーマンスの低下は感じなかったので、同時接続1000人くらいまでは問題なく行けそうな雰囲気です。

同時接続800人以上となると、Yahoo!のトップニュースに取り上げられる以外には、なかなか考えられない水準です。

100万PV/月程度までの個人ブログなら、負荷対策としてのキャッシュ系プラグインやCDNは不要です。また、ページ表示速度も見てのとおりで、これ以上を求めることももちろん可能ですが、必要充分だと個人的には考えています。

ロリポップやさくらインターネットの格安プランでは、いくらキャッシュ系プラグインやCDNを導入したところで、基本スペックの低さをごまかすことはできません(さくらインターネットの500円プランから、シックスコアへ乗り換えているので、実感しています)。

つまり、高品質サーバーを利用するのが最大の負荷対策であるわけです。おまけに、素人でも確実に効果を発揮できます。

 

キャッシュやCDNは必要になったら専門家に依頼すべし

もし、月間300万PVクラスのサイトに成長したり、ページ表示速度を本気で1秒未満にする必要に迫られたりすれば、キャッシュ系プラグインやCDNも必要になってくるでしょう。

それどころか、共有サーバーでなく、専用サーバーやAWSも必要になるかもしれませんね。

そこまできたら、お金をかけて、しっかりとした知識のある専門家に依頼すれば済む話だと思います。

個人的には、知識に不安があるのなら、高品質サーバーを利用し、キャッシュ系プラグインやCDNには手を出さないのが、ベストの選択肢だと思います。

試行錯誤してみるのも面白いは面白いですし、手軽にできてしまいはするのですが、トラブルが起きたときに対処できないのでは、リスクが大きいと感じました。

122月

WordPress|PCとスマホで記事中に表示させるコンテンツを切り替える方法

Google Analyticsを見ると、Handmade Future ! にアクセスしてくださる方の環境は、4割がモバイル(スマートフォン&タブレット)です。

2013-02-12_0946

ほとんどのブログやWebサイトは大差ないはずです。それどころか、スマートフォンからのアクセスが上回る時代が近いうちに来るでしょう。もはやスマートフォン対応は必須ですよね。

スマートフォン対応には大きく2つの方向性があります。1つはスマートフォン用のサイトを構築する方法。もう1つは、Handmade Future ! もそうですがレスポンシブデザインです。PCで閲覧している方は、ブラウザの横幅を小さくしてみてください。Handmade Future ! は、ある一定の大きさになるとタブレット用のレイアウトに、もっと小さくするとスマートフォン用のレイアウトに、シームレスに変化します。

スマートフォンで見せる場合には、PC環境に比較して「貧弱な通信回線」「処理速度の遅いCPU」という2つの課題を解消する必要があります。同じコンテンツを見せれば、スマートフォンのほうがより時間がかかり、「重い」印象になるわけです。

例えば、Handmade Future ! では、読み込み負荷を軽減させるために、スマートフォン環境では、記事下コールトゥアクションのFacebookページ『Like Box』を表示させていません。

このように、WordPressで構築しているサイトで、閲覧環境(パソコンor スマートフォン)によって記事中に表示させるコンテンツを切り替える方法を紹介します。

 

1. ユーザエージェントを判定するコードを追加する

WordPressの管理画面から、外観 → テーマ編集へと進みます。『functions.php』に、以下のコードを追加します。

function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android', // 1.5+ Android
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

なお、このコードにはiPadが含まれていません。Handmade Future ! のレイアウト&コンテンツの場合は、タブレットはPCと同じ内容で良いとの判断からです。

iPadもモバイルに含めたい場合は、iPhoneの下あたりに、

        'iPad',           // iPad

を追加してください。

また、モバイルに判定するべきユーザエージェントが増えた場合は、追加していく必要があります。

 

2. 記事中でPHPコードを利用できるようにする

手順1の段階で、PHPコードを利用して表示の切り替えができる状態になります。サイドバーやフッターなど、テーマ内ではPHPコードが利用できるので、すぐにでも機能します。

がしかし、記事中では、PHPコードを利用できません。

そこで、記事中でPHPコードを利用できるようにするWordPressプラグインをインストールします。『Insert PHP』や『Allow PHP in Posts and Pages』など、いくつか種類があります。Handmade Future ! では『Exec-PHP』を使っていますが、2年以上アップグレードがない古いプラグインなので、今後もきちんと動作するか不透明です。

WordPressの管理画面から、プラグイン → 新規追加と進みます。プラグイン名で検索するか、「PHP」などの単語で検索して見つけてください。

同様に、ウィジェット内でPHPコードを利用できるようにするプラグインもあります。必要に応じて検索してインストールしてください。

 

3. PHPを利用し、表示させるコンテンツを指定する

準備が整ったら、PHPコードで、環境ごとに表示させるコンテンツを指定します。

<?php if(is_mobile()) { ?>
【スマートフォンで表示させるコンテンツ】
<?php } else { ?>
【スマートフォン以外(PC&iPad)で表示させるコンテンツ】
<?php } ?>

簡単なコードですよね。これ1つで、記事中でもサイドバーでもウィジェット内でも表示の切り替えができます。

例えば、PCとスマートフォンで読ませる文章を変えることもできますし、PCでは埋め込んだ動画を読み込ませ、スマートフォンでは動画が置いてある元ページのリンクを読み込ませる、といった動作が可能になります。

 

地道に最適化していこう

初心者の方は、はじめはスマートフォン対応に苦戦すると思いますが、スマートフォンでアクセスする割合が4割を超えてきているので、もはや無視はできません。

最初から完璧なWebサイトはありません。記事をUPしたら手持ちのスマートフォンでチェックして、違和感のある箇所を見つけ次第、地道に修正していくクセをつけるのがベターだと思います。

2811月

初心者が必ず押さえておきたいWordPressプラグイン7つ

こんにちは。寄金です。

いまWordPressで、当WEBマガジン『Handmade Future !』や『FutureCenterNEWS JAPAN』を含め、5つのサイトを運営しています。

ほんの1年前まで、はてなブログやら、一般のブログサービスを使っていたんですが、いまや戻る気は1ミリもありません。一つは「ブログは一生もののツールになるだろう」と考えているから。独自ドメインでコツコツとリンクを積み重ねていけば、検索流入がどんどん増えていきます。自分を知ってもらう優れた手段ですし、さまざまな出会いもあります。10年20年と積み重ねていったとき、必ず自分の財産になっていると思っています。

もう一つは、豊富なプラグインやテンプレートによるカスタマイズ性です。一般のブログサービスでも独自ドメインが利用できるケースがあるんですが、自由度はどうしても劣ります。ブログの目的にそって徹底的に最適化できるメリットは、僕は絶対に無視できません。

今回は、山ほどあるプラグインの中から、ブログの効果を最大化するために必須と言えるプラグインを7つ紹介します。「WordPressを始めたばかりでどうすればいいのかわからない」という方は、ぜひ押さえておいてください!

 

SEO

ブログの読者の多くはGoogle検索でやってきます。Google検索は絶対に無視できません! 僕らが考えるべきなのは、価値のあるコンテンツ(記事)をつくること、そしてGoogleにわかりやすく伝えること。特に後者はプラグインでより良くすることができます。

1. All in One SEO Pack

定番のプラグインです。簡単に記事にメタタグを設定できるようになります。

Googleは“Googlebot”と呼ばれるクローラを巡回させてWEB上の情報を収集しています。メタ情報を入力しておくことで、Google側に記事の内容や価値をわかりやすく伝えられます。

インストールすると、下記のようなエラーが表示されます。

ちょっとびっくりしますが、単に「プラグインを有効にしてください、設定をしてください」というメッセージです。設定画面へ行き、「enable」にしましょう。

 

2. Google XML Sitemaps

Googleにサイトマップを送信するためのプラグインです。サイトの構成をわかりやすく伝えることで、やはりSEO上、有利になると言われています。

また、主要検索エンジンに更新情報を即座に通知してくれます。

インストールしたら設定画面へ行きましょう。「サイトマップはまだ構築されていません。こちらをクリックしてまず構築してください」と表示されているので、最初の1回は手動でサイトマップを構築してください。

2回目以降は自動的にサイトマップを構築してくれるんですが、なにか変更した場合は手動で構築したほうが素早く反映されます。

またBingへの通知でエラーが出ますが、私はあまり影響がないとの考えから無視しています。

 

ソーシャルメディア、ソーシャルサービス連携

Google検索と同じくらい重要なのが、FacebookやTwitterなどソーシャルメディアや、はてなブックマークなどソーシャルサービスです。

3.  WP Social Bookmarking Light

各種ソーシャルボタンを表示させるためのプラグインです。いまやどこのサイトでも目にするようになりました。

ほんの一手間の簡略化なのですが、シェアしたいと思ったときにシェアできる環境を整えておくことは非常に大切なんですよね。

例えば一昔前、FAXに慣れきっていた人たちは、Eメールのほうが簡単なのかもしれないと薄々気づきつつも、「大した手間の違いはないし」と思っていたそうです。でも今や、よほどの事情がない限り「紙をセットして電話をかける」なんて面倒をする人はいない。(^^;)

そのEメールも、少なくともプライベートなやり取りでは、メッセージングサービスに取って代わられようとしています。FacebookメッセージやLINEに慣れてしまうと、アドレスを指定するとか、件名を入れるというわずかな手間が煩わしく感じられるんですよね。

このように直感的な操作で自由に設定できます。

Facebook、Twitter、Google+、はてなブックマークの4つがおすすめ。提供するコンテンツによっては20代前半ユーザの多いmixiを入れるのもアリです。

 

4. Facebook for WordPress

Facebookの公式プラグインです。大きく2種類の役割があります。

OGP設定

記事が「いいね!」されたとき、きちんとOGPが設定されていると、「いいね!」した人の友達のニュースフィードに「●●さんがいいね!と言っています」と表示されるようになります。1人100人の友達がいるとすると、100いいね!で約10,000人に露出する可能性があるということです。

日本最大級のSNSとなったいま、FacebookのOGP設定は必須! ちょっと面倒ではあるんですが、絶対に設定してください

 

各種機能の実装

Facebookの各種機能が実装できます。僕の場合、Recommendations Barと、

Facebookコメント欄を設置しています。

Recommendations Barは、いわゆる「おすすめ」。読者がサイト内を回遊してくれる可能性が高まり、ページビューの増加に繋がります。

後者はFacebookアカウントでコメントすることにより、コメント内容がFacebook内にも共有され、露出が増えます。

このプラグインはApp ID、App secret、App namespaceの設定が必要なんですが、設定画面に手順の案内が表示されます。英語なので面食らうかもしれませんが、それほど難しくないですよ! 一つ深呼吸をしてから、説明に従って設定してください。

 

アクセス解析

5. Ultimate Google Analytics

WEBサイトは常に問題点を把握し、改善し続ける必要があります。そのためにGoogleが無料でGoogle Analyticsという超優秀なアクセス解析サービスを用意してくれています。

Google Analyticsを使うには、「そのサイトが自分のものである」と証明する手続きを踏まなくてはいけないんですが、ちょっと面倒なんです。手間を簡略化してくれるプラグインがこれ。

インストールして、Google AnalyticsのAccount IDを設定するだけで、Google Analyticsが使えるようになります。

 

高速化

6. DB Cache Reloaded Fix

WEBサイトは速ければ速いほど、SEOで有利になりますし、多くのユーザがブログを読んでくれます。

いつもWEBサイトを見ているときのことを思い返してほしいんですけど、たった3秒WEBサイトが表示されなかっただけで、別のサイトへ移動しようとしていませんか。重いサイトは、それだけで離脱の要因になるんですよ。

そこで、キャッシュを利用して表示を高速化してくれるプラグインがこれ!

インストールしたら設定画面へ行き、「有効」にチェックしてください。

 

フィーチャーフォン、スマートフォン、タブレット対策

7. WPtouch

WordPressで構築したサイトは、そのままでは、モバイル機器でも表示が変わることはなく、そのまんま表示されてしまいます。これじゃ見にくいケースがほとんどです。

現在、スマートフォンの普及によって、モバイルでの閲覧は3割を越えてきています。これからもどんどん増えるトレンドです。

そこで、携帯電話やスマホなど、閲覧機器によって表示を最適化してくれるWPtouch。必須ですね。

なお、WordPressのテーマの中には「レスポンシブ」と呼ばれるものがあります。現在の主流のモバイル対策は、モバイル用にサイトを別途(ときにはスマホ用、タブレット用など複数)用意するというものです。WPtouchも、別画面を自動生成して表示してくれるプラグイン。でもレスポンシブは、閲覧環境によって柔軟に表示を変えられるように設計されています。レスポンシブのテンプレートを利用すればWPtouchを利用しなくても大丈夫です。

 

おまけ:バックアップ

WP-DBManager

いつなんどき、どんなトラブルがあるかわかりません! プラグインのちょっとした相性で、管理画面が表示されなくなる、なんてことも!!

これが自由度が高い反面、独自に運営するデメリットです。

そこでコイツできちんとバックアップしておきます。

インストールするとエラーメッセージが出るのですが、下記を参照して解消してください。同時にメニューを日本語化する方法も書いてあります。

データバックアッププラグイン、WP-DBManager2.50を設定しました。 
http://www.taskmother.com/wordpress/209.html

TOPページ サイトマップ 更新履歴