googleアナリティクスではどのブラウザからの訪問が多いのか確認する事ができますが、バージョンまで確認する事はできません。
というわけで見れるようにしちゃいましょう。
左のメニューから、「マイレポート一覧＞新しいマイレポート」を選択します。
空白のキャンパスで、適当な名前をつけて「マイレポートを作成」をクリックします。
自動でウィジェットの追加ウインドウが出てくるので、設定していきます。
標準 ：円グラフ 次のエングラフの作成 ：ユーザー数 グループ分け単位 ：ブラウザのバージョン データのフィルタ ：表示の絞り込み／ブラウザ／含む／Internet Explorer
あとは名前などを「IEバージョン別グラフ」とかにするといいかなと思います。
自分のブログではIE11の人が多いようで、一安心していますｗ
試行錯誤してきたwordpressの高速化プラグイン。その総括をしようかなと思います。
ああでもない、こうでもないと色々とやってきましたが、ようやく落ち着いたという感じです。
私が関わっているwordpressサイトにはこの組み合わせで運営されておりますよ。
その名の通りキャッシュ系プラグイン。これが無いと始まりませんね。
WordPress › Head Cleaner « WordPress Plugins
ソース整理といえばこれ。ヘッダー部分のお掃除をしてくれます。jsファイルやcssファイルを圧縮してキャッシュ化しておくことも可能。cssファイルを編集してもその都度新しいcssキャッシュファイルを作成してくれるので他キャッシュ系プラグインの影響でレイアウトが崩れる心配も無し。
本当助かってます。ありがとうございます。ふがふが。
WordPress › WP Super Cache « WordPress Plugins
wordpressの出力画面をhtmlに出力してそれを見せちゃうというページキャッシュプラグイン。動的な処理を常時やるようなサイトに向きませんが、このサイトのような普通のブログにはモアベターなプラグインとなります。
キャッシュの有効期限が切れても、切れたキャッシュをユーザーに提供しつつ新しいキャッシュを裏で生成したりと痒いところに手が届きます。設定が豊富で取っつきにくいかも知れませんが、その分細やかな設定が可能です。
wordpressのキャッシュを制御できるプラグイン「WP Super Cache」の設定項目解説 » aoringo works
モバイルモードをオンにすれば、別にスマフォ用のキャッシュを作りそれを見せるようになります→wp super cacheのモバイルモードはスマフォ用のキャッシュファイルも生成してくれる！ » aoringo works
WordPress › DB Cache Reloaded Fix « WordPress Plugins
mysqlリクエストをキャッシュするプラグインです。私は検索ページをキャッシュしないようにしているので、そういう時はこいつが働くようになっています。wordpressはmysqlで全ての設定やデータを管理するので、このプラグインはもはや必須と言っていいでしょうね。
WordPress › WP File Cache « WordPress Plugins
php関数の出力をキャッシュします。これが有ると無いとではかなり動きに差があります。
キャッシュプラグインの組み合わせの最適回答を求めて – aoringo works
DB Cache Reloaded Fix同様、静的キャッシュが動かない所で強力にサポートしてくれます。
WordPress › 001 Prime Strategy Translate Accelerator « WordPress Plugins
wordpressは多言語に対応しており、ページを表示する度にどの言語で表示するべきかをphpにより判定しております。
このプラグインはその部分をキャッシュ化する事で高速化を図りますよ。同様のプラグインはいくつかありますが、このプラグインは閲覧ページ、ログインページ、管理者ページでキャッシュを使うかどうか設定する事が出来ます！！ 管理者ページでキャッシュをオンにすると恐ろしい事になるので、私は閲覧ページのみオンにしております。
「MO cache」はもしかするとすさまじい容量を食うかもしれない。 » aoringo works
wordpressの各種処理を手助けするプラグインです。縁の下の力持ちといった所。
WordPress › WP Hyper Response « WordPress Plugins
phpというのは、普通処理が全て終わってからクライアント側に送信しますが、このプラグインを利用すればphpの処理をリアルタイムでクライアントへと送信するようになります。
結果的に閲覧者はすぐに画面に反応があるのでストレスが減るというわけですね。
サーバーによっては利用できない場合があるので気をつけてくださいね。
ブログの画像はいつだって頭を悩ませる所ですね。ここでもプラグインは活躍します。
WordPress › Imsanity « WordPress Plugins
アップロードする画像を自動リサイズ！ 過去の画像もリサイズできるwordpressプラグイン「Imsanity」が素敵 » aoringo works
アップロードする画像を指定の解像度へリサイズしてくれるプラグインです。どんなに巨大な画像をあげようが、これで「1024px」等と設定しておけば、そのサイズになるのです！！ブログの解像度に合わせて設定しておけばなにより強力な速度対策になるでしょう。
過去にアップロードした画像を一括変換する機能もついてます。
アップロードされた画像を圧縮してくれるプラグイン。場合によっては50%以上も容量を抑える事が出来ます。また、アップロードされたpngをjpgに変換したりする機能もあります。至れり尽くせりですね。このプラグインも過去にアップロードした画像を圧縮する事が出来ます。
また、テーマファイルに含まれている画像も圧縮する事が出来るんですよ！！ ワザマエ！
WordPress › Unveil Lazy Load « WordPress Plugins
画面に表示されるであろう画像だけを読み込むようにして、下へとスクロールを始めたら画像の読み込みを開始する「遅延ロード」をさせる事ができるプラグインです。
どれだけ写真を大量に載せようが、これでかなり負荷を減らすことが出来ますよ！
WordPress › Jetpack by WordPress.com « WordPress Plugins
CDN設定って面倒くさいですよね・・・このプラグインを導入することによってボタン一個でCDNを導入する事が出来ます。他にも沢山の便利機能が一個に集約されているので、プラグインの節約にもなります。
どうですかね。結構な数のプラグインを導入しています。
高速化といっても色々なプラグインの組み合わせ、設定があるのでとても大変だとは思いますが、是非参考にしてみてくださいね！
wordpressのエディタはとても便利ですが、エディタでの編集時と実際に投稿後ではデザインが変わる事が多々あります。
エディタとブログ上で適応されるcssが違うわけですね。というわけで、エディタ画面で利用できるcssを作りましょう。
「editor-style.css」というファイルがテーマフォルダに入ってますか？ 入っているなら既にエディター用のcssが設定済みです。直接このファイルの内容を変更していけばＯＫです。簡単ですね。
さて、入っていない場合です。この場合、cssファイルを追加してもwordpressは認識しません。function.phpにコードを一行追加しましょう。
add_editor_style('editor-style.css');
これでエディターでcssファイルを利用する事が出来ますよ！
画像をアップロードするとき、その画像のサイズがどれくらいの大きさなのか、どれくらいの容量なのかをあまり確認せずにあげてしまうズボラ野郎です。
そんなわけで、毎回のようにアップされる巨大な画像を見つつ「どうにかせねばなるない」とは思ってはおりました。
思ってはいたんですよ？
というわけで今回は画像リサイズするプラグインです。
ダウンロードはこちら→WordPress › Imsanity « WordPress Plugins
アップロードする場所によって設定を詳細に変更する事ができます。
「Images uploaded within a Page/Post」記事、固定ページ画面でのアップロードで機能
「Images uploaded directly to the Media Library」メディア画面でのアップロードで機能
「Images uploaded elsewhere (Theme headers, backgrounds, logos, etc)」テーマ編集画面んでのアップロードで機能
「JPG image quality」リサイズする画像のクオリティ
「Convert BMP To JPG」BMPをjpgに変更する
という設定がそれぞれできます。横幅、縦幅をそれぞれ設定すれば、アップロードする画像を自動で判別してリサイズしてくれます。実際便利。
「0」に設定するとリサイズが働かないようです。横幅を指定しなければ縦で引っかからない限りどんなに長い画像でもリサイズしないとか出来るかも知れませんね。
説明には「最近はカメラ等からも記事をアップロードできるけれど、それらは解像度が高いのでこのプラグインは最適です。高解像度の画像を使わないサイトに利用するもので、オリジナルの解像度の画像が必要なサイトには導入しないでください」とあります。
なんと既にアップロード済みの画像も変換をかける事ができます！素晴らしいですね。
赤い警告には「バックアップ等取らないので気をつけて実行して」と書かれています。
画像を検索して一覧を出した後、さらに下に出てくるリサイズイメージボタンでリサイズを開始できます。
リアルタイムでどんどん作ってる・・・。
これでブログの画像に神経を尖らせる必要もなくなりますね。
1秒台を目指せ！ソーシャルボタンを高速に読み込む方法を比較する » aoringo works
script.jsでgoogleアナリティクスを読み込む » aoringo works
散々迷っていたのに、結局ソーシャルボタンは画像で読み込むようにしました。
JavaScriptで公式から読み込むと時間がかかるんですよね・・・。数字が出るのは嬉しいのですが、私みたいな弱小ブログではどうせ0ばっかですよ。
詳しくは前回の記事をご覧下さい→1秒台を目指せ！ソーシャルボタンを高速に読み込む方法を比較する » aoringo works
どれくらいの時間がかかるのか良く分かると思います。
ソーシャルボタンを読み込むだけで三秒。これはとても大きな数字です。ページを移動するたびにこれだけの時間がかかるのです。大変な事ですよ。
このストレスはページをみてくださる閲覧者に直接のしかかってきます。恐ろしい事ですね。
というわけで本題です。それならもうJavaScriptを使用せずに、用意した画像で良いんじゃない？ ということです。
結果ですが、こうなりました。
トップページの表示速度です。わあ。ソーシャルボタンを画像で表示するだけでこんな速度出るんですね。実際、見てみるとビックリしますよ。
各種ソーシャルボタンを画像で読み込むのは簡単です。
<div class="socialset"> <!-- twitter --> <a href="https://twitter.com/share?text=テキスト&url=アドレス" target="_blank" rel="nofollow"> <img src="画像アドレス" alt="twitter_share"/> </a> <!-- facebook --> <a href="http://www.facebook.com/share.php?u=アドレス" target="_blank" rel="nofollow"> <img src="画像アドレス" alt="facebook_share"/> </a> <!-- google+ --> <a href="https://plus.google.com/share?url=アドレス" target="_blank" rel="nofollow"> <img src="画像アドレス" alt="googleplus_share"> </a> <!-- hatena --> <a href="http://b.hatena.ne.jp/add?mode=confirm&url=アドレス&title=ページタイトル" target="_blank" rel="nofollow"> <img src="画像アドレス" alt="hatena_share"> </a> </div>
これで読み込めます。その他のソーシャルボタンについては私は利用してないので調べてないです。もうしわけぬい。
また、ワールドプレスの場合は今表示しているページのアドレスを出力する関数がありません。なので、
<?php $url = is_single() ? get_permalink() : home_url();?>
とすると、「$url」変数に投稿ページでは現在のアドレスを。その他のページではトップページのアドレスを表示するようになります。
新規ウインドウでページを開くのと、nofollow属性は念のためつけてます。
こんな奴です。小さなポップアップを出しましょう。新しいタブやウインドウよりは個人的にこっち派です。
jQuery(document).ready(function () {
jQuery(".socialset a").click(function () {
window.open(this.href, 'sosialwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1');
return false;
});
});
ちゃちゃっとjQueryで記述しちゃいます。socialsetクラスのリンクがクリックされたら小さなウインドウを表示するようにします。
これでソーシャルボタンの画像化終了になります。高速！ 早い！
ちなみに、各種ソーシャルアイコンは→画像 – Arabiki – 上質なweb素材とソーシャルアイコン類 » aoringo works
ここで紹介している「Arabiki」様より頂きました。日本のソーシャルサービスの画像もあって素敵です。
沢山あるソーシャルボタンですが、それの読み込み、どれだけの時間かかってるかわかりますか？
「はてな」「ツイッター」「フェイスブック」「google+」の各種ソーシャルボタンを、何も無い状態のhtmlファイルに読み込ませてみます。
どうでしたか？ 私は2.7秒かかりました。
ソーシャルボタンを読み込むだけでこれだけの時間がかかるんですよ。もちろんこのボタンたちと同時に、ページ自体の読み込みも進みはしますが、この「2.7」という数字は最低かかる事がわかるわけです。
色々考えたすえ、このブログではtwitterとファイスブックのみのボタン導入としてみました。
一秒近く縮みました。良い感じです。しばらくはこれでテストして見ようかなあという感じです。もっと高速に読み込めれば全てのソーシャルボタンを設置できるんですけれどね。高望みかも知れません。
さて、ボタン整理後の私のサイトですが、計測時間はこんな感じ。
ボタン以外も色々と読み込んでいるのでこれだけの時間がかかるのでしょう。参考にしてみてくださいね。
ブログ、いやサイトにとって画像の量というのはとても気になる物ですよね。記事を作成するたびに、どれだけの画像を詰め込むのかで数時間悩んだこともあります。ええ。
そういうわけで、画像の遅延ロードに着手いたしました。なんでもっと早くやらなかったんでしょ。
色々とみてみたのですが、今回チョイスしたのは「Unveil Lazy Load」です。
[試] 速いは正義！WordPressプラグイン Unveil Lazy Load | 表示速度改善のためのこだわり施策を適用 | 試行錯誤ライフハック
詳しい仕様などは製作者様のページをご覧下さい。
使い方は簡単で、プラグインを導入して有効かするだけです。
2012年に読んだ衝撃的だった本たち » aoringo works
動作のほどはこちらのページをご覧下さい。良い感じです。
どちらもwordpressのプラグインです。「head creaner」はページの<head>部分を整理するプラグイン、「Yoast WordPress SEO」がSEOに関するプラグインです。どちらもとても素敵なプラグインなのです。この二つのプラグインについては、あまりに有名で丁寧に解説しているブログが沢山あるのでそちらにお任せしますよ。
設定によっては競合するというお話です。
「Yoast WordPress SEO」の「Force rewrite titles」のチェックは外すようにしてください。head creanerが動作しなくなってしまいます。
チェックをオンにした場合
コメントタグで「Yoast WordPress SEO」が動作している事がわかりますね。
次にオフにしてみます。
head cleanerのキャッシュファイルであるcssへとリンクしているのが分かります。
解決してみればなあんだという感じですが、かなり焦りましたよ・・。
ちなみに、head cleanerを使った場合とそうでない場合のスコアをみてみます。
使うのは→PageSpeed Insights
head cleanerオフ
head cleanerオン
恐ろしい違いですね・・・。
それでは、皆さんも気をつけてくださいねー
SEO的なお話ですよ～。
サイトを運営する上で必要なのは、なんだかんだいってもリンクの存在です。
で、リンクには「nofollow属性」というものがあります。
<a href="http://hoge" rel="nofollow"> hogehoge </a>
このaタグについている「rel=”nofollow”」がそれです。これがついていると、「このリンク先は見る価値無し」と検索エンジンなどに宣言する意味合いになります。
なんとも難しい所ですが、普通に記事を書いてる分には必要無いのではないかと私は思うですよ。
そもそも皆に有益な情報を提供するためにブログをやっているのであって、そこで紹介したリンクはほとんどが重要な物のはずです。それを「価値無し」と宣言して回るのはあまり有効だとは思えません。
記事の本筋とは違う、一応リンク置いておこう、というような時はつけても良いんじゃないでしょうか。
ただし、荒らしの可能性があるコメント欄やトラックバック等は、wordpressを使用している場合「rel=”nofollow”」が原則つくようになっているようですね。
無料ブログ等のブログパーツとかにはこの要素がついていたりするそうです。
nofollow属性をリンクに付けるのはどんなとき？ | 海外SEO情報ブログ
そのものズバリな回答がありました。翻訳ありがとうございます。
- すべての外部リンクにnofollowが付いていたからといって、順位付けに関しては他のサイトとなんら違うように扱うことはない。
- でもそれがいい考えとは思わない。理由は、Googleはnofollowリンクを見るとそのリンクをリンクグラフから除外するから。つまりそのリンクを新しいウェブページの発見に使わないし、スコアリングのためにそのリンクのアンカーテキストを使わない。
- nofollowを付けてPageRankの流れを制御してため込もうとするPageRankスカルプティングはもう効き目がなくなっている。
- 外部リンクにすべてnofollowが付いていることはプラスにもならないしマイナスにもならない。
引用させて頂くとこういう事らしいです。SEO的な意味合いで「nofollow」しても意味は無い。さらに、そのリンクを評価しないどころか文字列すらも認識しないという事です。これはとても重要なポイントですね。リンクも記事を構成する文章の一つです。仮に上記のリンクをnofollowすると「nofollow属性をリンクに付けるのはどんなとき？ | 海外SEO情報ブログ」という一文がまるまる無視される事になります。
「PageRankスカルプティング」というのは、外部リンクをすべて「nofollow」にして、自分からは外部へリンクを出さず、外からどんどんアクセスを貯めるという手法みたいですが、常に検索エンジンをアップデートしている中で無効化されてるようですね。（極端な例なだけで、的確な構築をしていればpagerankを調整する事は可能のようです）
ノーフォロータグ(nofollow)リンクでSEO | ネットビジネスで20代にて転職して独立したなるひこのブログ
とはいえ、googleで「nofollow リンク」を検索するとこんなページも見つかるわけですが。なんでしょうね「自分のサイトからパワーを流出させないようにします。」っていうふわっとした説明がじわじわ来ます。もちろんこのリンクにはきちんとnofollow設定してます。
というわけで、自信を持ってリンクを張っていった方が良いと思いますよ。普通に記述すればいいだけです。簡単ですね。
wikipedia等はスパム防止のために全てのリンクが「nofollow」設定されています。それを差し引いても濃い記事内容ですし、役に立つサイトだから自然と上位に行くわけですね。納得ですよ。
ともあれ、個人的には「nofollow」の記事で使わないリンクと使ったリンク両方とも記述できて満足度高いです！
最近wordpress記事が多いですね。プラグインはどれもこれも特徴があって、入れたくなるものですが、あまり入れすぎるとセキュリティ、ページ表示速度に影響が出てきます。
jetpackはwordpressから直接提供されているプラグインで、色々な機能がセットになっています。
無料で出来る設定で、特に使えそうな機能をリストアップしてみます。
これらの機能が全て無料で使うことが出来るようになります！！ ヒャッホウ！
その中でも特に御世話になっているCDNとサイト統計を軽く説明しましょう。
CDNとは、画像やJSファイル等をクラウド上に置いておいて、負荷を分散する手法です。cloudfireが最近流行りましたよね。噂によると爆速、というのは聞いては居たのですが、設定が面倒くさかったんですね・・・（遠くを見る目）。
jetpackなら、有効化ボタンを押すだけで速適応ですよ。それだけ。鼻血が出る簡単さですね。
実際、サイトの表示速度は0.5秒ほど早くなりました。ありがたやありがたや。
さて、色々な情報がダダ漏れですが。良いんです。こんな弱小ブログのアクセス数なんて。ふへへ。
リファラ、人気記事、検索キーワードとある程度の情報が見れます。もっと詳しい情報はどうせグーグルアナリスクで見ればいいんですよ。こんくらいで十分です。wordpress上で見れるという事が重要ですよね。これがjetpackというプラグイン一個でまかなえるのだから素敵すぎて鼻血が出ます。
サイト閲覧中でも、上の帯でその日の統計が見れます。これまた素敵。チラチラ見ちゃう。素敵すぎる。
プラグインが多すぎてお悩みの方、jetpack、是非いれてみてくださいな！