BLOG
2020年8月10日
解析士としてのwordpress裏側の設定のお話
やあ、みなさんこんにちわ。
沖縄唯一のウェブ解析士マスターの山内です^^ ←言いたいw
本題入る前に個人的な話させて。
先日沖縄でマイビジネスセミナーが行われました。
その際に、沖縄入りしたマスターは本当に豪華なメンバーでした。
代表理事の江尻さん、山口さん、八木さん、参加者として暇人の寺岡さん、中村さんです。
沖縄にこんなにマスターが一気に入ってくる事ってないので嬉しかったです。
その際沖縄で今までマスターをしていた西岡さんともお会いできてお話できて嬉しかったよって前置きを残しつつ本題に入ります。
Contents
wordpress裏側のお話
ウェブ制作をしている人で wordpress を使っている人はかなり多くいると思います。
そもそも wordpress が当たり前みたいになっているこの世の中、色々なプラグインがあり、その設定を正しくできているのかはかなり重要と思っています。
制作会社で裏側の設定をどこまでやってくれるかの問題もあります。
前にクライアントのサイトのフルリニューアルをお願いした会社はAll in One SEO Pack（SEO対策できるヤツ）入れてくれてるのにディスクリプション もOGP（SNSで使うヤツ）もセットしてくれなかったのでびっくりしました。
解析の事を考えると設定するのは当たり前だと思っていた私からしたら衝撃でした・・
多分この考えは解析ができるから当たり前の感覚で「ベストな設定をして数値取りたいからこれ設定しとかないと」みたいな脳が働くんですよね。
SNSでシェアしてもらったときの画像があるなしとか考えたら圧倒的に画像ありがクリックされるはずだし、その考えがある事自体解析できる子でよかったっとつくづく思います。
wordpressを用いた設定で最低限やるべき項目
本当はもっと沢山やった方がいい設定はあるのですが今回は最低限するべき設定のみ説明します。
- 画像の圧縮
- 画像のwebP化（これは予算と相談、後ほど説明）
- cssの圧縮
- htmlの圧縮
- jsの圧縮（結構問題が起こりやすいから大丈夫な場合しかやらない）
- SEO対策 ←今回はAll in Oneの設定ね
最低限これは設定しとかないとサイトスピードにも影響するし、解析上改善ですぐに出てくる問題だからです。
ちなみにこのサイトはJS以外は対応してるよ。
wordpressは読み込みが遅い
まずwordpressは数万のファイルで構成されているため、読み込み速度は遅くなります。
直帰を防ぐにはサイトスピードの改善が重要なので圧縮をすることで読み込みは早くなります。
ただJSをゴリゴリに書いているとスピードは遅くなります。
読み込み速度が3秒を切る事が難しくなるので直帰に繋がるわけですよ。
この考え方解析士らしい考えww
でもこの考えが大事
読み込み速度が早い → 直帰されない → アクセスが増える → クライアントが喜ぶ（売上に繋がる可能性がある）
みたいに考えられるわけですよ。
なので圧縮が大事、ただJSは何かと引き起こしてくれるので圧縮した瞬間に動かなくなるとかよくあるから慎重に！
画像の圧縮はwordpressのメディアに全部あげている場合は「EWWW Image Optimizer」で一括で対応もできます。
ただ投稿とサイトで使っている画像を切りはなしたい場合はフォルダを分けて作成している事が多いのでその場合は圧縮ソフトを使います。
wordpressのメディアにあげると1枚の画像からサイズ別で複数作成されてしまうため画像ファイルの数は増えます。そこを気持ち悪いと思ってしまう私は投稿以外は別フォルダで管理しています。
読み込み対応で画像のwebP化
さっきから読み込み速度の話をしていますが、現在Googleが推奨しているのが次世代フォーマットのwebPです。
通常はJPGとかPNGとかの画像を使いますが、webPは読み込み速度が段違いにあがります。ただ設定が面倒なんだよね。wordpressのメディア管理ならEWWW image Optimizerで一括設定できるんだけど、フォルダを切り離している場合は大変・・・手動です。
ブラウザで対応していないものもあるので、webPのファイルとJPGなどのファイル両方用意しないといけないんですよ。
ブラウザの判定はそれ用のJSがあるのでそこで判定させて、webP対応ブラウザの場合webP表示、非対応ならJPGみたいに制御します。
この設定がCSSの背景とかbeforeとかの擬似クラス使っていると超絶面倒で、大型サイトには向いてないのですよ。下記のように切り分けないといけないから・・・・（これはSCSSの画像です）
なので予算と要相談って感じなんですよね。
プラグインでファイルを圧縮
htmlやCSSはどうやって圧縮するの？となると思いますがwordpress使ってるならこのプラグインでポチッと簡単に圧縮できます。
なんて便利なんだ！！
ちなみにこんな感じになります。
普通に読みづらいね。でも改行も読み込み速度に影響がでるので少しでも早くしたいという願いですね。
All in One SEO Packの設定
上記までの話は技術的にやっておいた方がいいよって話（SEOにもなるんだけど）、ここからはディスクリプション やOGPの話をします。
この部分はユーザーやカスタマーが実際に「読んで / 見て」のエリア。
世の中のSEO対策プラグインでかなり使われているのがこのAll in One SEO Packです。ただこのプラグイン読み込みが遅いと言われているので使うか使わないかはご自身でご判断ください。私は設定が慣れているのでこれを使っています。
このプラグインでやる事は、各ページのディスクリプションの設定やSNSのOGP設定、ロボットのクロール制限の設定などができます。
ディスクリプション とはページの説明文ね（↓こんなヤツ、お恥ずかしながら47wamのサイトはちゃんとディスクリプション が走ってなかった・・反省・・なので私個人のサイト）
世の中の人間がどのように物事を探したどり着くのか考えると説明文は結構大事よね、ってことでちゃんと設定してあげましょう！
SNSのシェアされたサイトとかに画像がついてるのをよく見ますよね、あれがOGPなんだけどあれも大事、人間は感覚的に視覚で判断が8割と言われているのであるなしだと印象は別物なんですよ。（↓こんなヤツ）
と最低限しといた方がいいよってwordpress裏側のお話でした。
解析士のみなさんも実は裏側めちゃ設定してあげないといけないってことを念頭に制作サイドに指示が出せるようになってもらえると嬉しいなー。
他、細かな設定の話は別で記事化します。
最後まで読んでいただいてありがとうございました^^