/blog/WordPressのTips（ログイン画面変更・最適化などのメモ）

WordPressのTips（ログイン画面変更・最適化などのメモ）

Type: Tech BlogDate: 2019 - 8 - 4Tags:
#WordPress

ログイン画面変更，SEO，画像最適化と高速化などでとりあえずやることを書いておく

1// add to functions.php
2function custom_login()
3{
4  $style = '
5  <style>
6    .login > #login > h1 > a {
7      background-image: url(PATH/TO/IMAGE.webp);
8      background-size: 100%;
9      width: 100%;
10      height: 100px;
11    }
12    .login > #login > h1::after {
13      content: "LOGIN DESCRIPTION";
14      font-size: 1rem;
15    }
16  </style>
17  ';
18  echo $style;
19}
20add_action('login_enqueue_scripts', 'custom_login');

All in One SEO Packで meta タグ挿入，https://search.google.com/search-consoleでの検索最適化

  • sitemap の登録と ping

XML Sitemap Generator for WordPressを用いるが，この際に「html 形式のサイトマップを含める」のチェックを外すこと（search console 上で xml 外の形式だとエラーが出るため）

https://developers.google.com/speed/pagespeed/insights でのスピード診断を行い，SP/PC 両方での速度の向上を図る。 WordPress では高速化のためのプラグインが複数あるため，そのうち今回導入した事例を示す

imagify

pagespeed insights の診断結果で「次世代フォーマットでの画像の配信」が上位に来る時，サイト内で読み込んでいる画像のサイズが大きさを減らせば大幅な改善が期待できる。imagify というプラグインでは，メディアライブラリ上の画像ファイルを（サムネイル等の別サイズも含め）自動的に縮小してくれるため，非常に有効。

画質が気にならない場合はすべて Ultra モードで縮小化しても構わない。背景画像等はそもそもの解像度も小さくする（resize）する

Asset CleanUp

pagespeed insights の診断結果で「レンダリングを妨げるリソースの除外」が上位に来る場合は外部ファイルの読み込み時間を減らすことで大幅な改善が期待できる。Asset CleanUpを用いて以下の処置をし，速度が改善したので示す。

  • css の縮小化と結合
  • 使っていない css の除去
  • Google Fonts の CDN リクエストが複数存在する際の一本化&async にする

(ただしフロント開発の際は Sass の map とかも無効化され可読性が著しく下がるので開発終了後に行う)