WordPressプラグイン | Tekito style.me

記事リストの抽出に便利！WPプラグイン「Export All URLs」の使い方・設定方法まとめ

やすのり — Wed, 08 Jul 2020 17:01:57 +0000

やすのり

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

Webメディア・ブログを運営していると、数値計測などをするために「記事の一覧リスト」が欲しいことがあります。

そういう場合、WordPressなら「Export All URLs」というプラグインがとても便利でおすすめです。

記事ID、タイトル、URL、カテゴリを簡単に一括でリスト化してくれます。

ということで本記事では、Export All URLsの使い方や設定方法などをご紹介していきます。サイト運営の参考にしてみてくださいね。

WordPressプラグイン「Export All URLs」とは？

Photo by：WordPress公式サイト

「Export All URLs」は、記事のID、タイトル、URL、カテゴリなどを簡単に一括でリスト化する便利プラグイン。

サイトの記事数が10記事とか少ない場合は、手動で記事リストを作成することもできます。

しかし記事数が数百など、多過ぎてデータ抽出が大変なケースも多いでしょう。WordPressサイトなら、このプラグインを使えば一括で簡単に抜き出しができます。

下記記事のように、記事ごとのPV数を計測するために計測用シートを作成したい場合などに便利です。

2020.06.24

Export All URLs | WordPress公式サイト

知識があるならSQLで抽出してもよいでしょうが、多くの方は自力では難しいと思いますので、プラグインでサクッとデータ抽出しましょう！

記事リストを一回作成し以後使わなければ、プラグインを削除してもOKです。

Export All URLsの導入方法

まずExport All URLsの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

インストールと有効化

Export All URLsはWordPressの公式プラグインとして登録されているので、WordPress管理画面で簡単に導入できます。

管理画面のメニュー「プラグイン」>「新規追加」から、Export All URLsで検索。

「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

ダウンロードし有効化したら、自動的にプラグインの設定ページに飛びます。

管理画面の「ツール欄」にも項目が追加で表示されますよ。

Export All URLsの基本的な使い方

Export All URLsの使い方はとてもシンプルです。一つひとつ確認していきましょう。

（1）取得するデータ項目の設定

抽出したデータの項目を自由に設定することができます。

まずは下記のように設定してみましょう。

Select a Post Type to Extract Data:

取得するページのタイプを下記から選択できます。

All Types（すべての種類のページ）
Pages（記事ページのみ）
Posts（固定ページのみ）

ここはひとまず「すべての種類のページ」を選択。

記事ページだけではなく、固定ページもリストとして抽出することができますよ。

Additional Data:

ページごとに取得する項目を設定できます。

Post IDs（記事ID）
Titles（記事タイトル）
URLs（記事のURL）
Categories（記事カテゴリー）

今回は「Titles」と「URLs」のみで設定してみましたが、そこはお好みでご調整ください。

Post Status:

Published（公開済み）
Pending（保留中）
Draft & Auto Draft（下書きと自動下書き保存）
Future Scheduled（配信予定の記事）
Private（非公開記事）
Trashed（ゴミ箱にある記事）
All（すべて：公開済み、保留中、下書き、公開予定、非公開、ゴミ箱）

抽出する記事データの公開状態を選択できます。ここでは「Published（公開済みの記事）」を選択してみます。

下書き記事なども含めたければ、各自設定を調整してみてください。

（2）データのエクスポート

設定が完了したら、Export Typeの「CSV」を選択し、「Export Now」ボタンをクリック。

すると、画面上部に「Click here」と表示されるのでクリックします。

記事ごとのタイトルやURLが一覧化されたCSVファイルを落とせているはずです。

Export All URLsの注意点

コンテンツのリストデータを抽出すると、場合によっては文字化けする可能性があります。

やすのり

私も文字化けしました。まぁよくあることです。

盛大に文字化けした場合は、CSVファイルをCotEditorなどのメモ帳で開くと修正できます。

文字のエンコーディングをMacユーザーの方は日本語（Mac OS）、Windowsの方は日本語（Windows）に変換し保存してみましょう。

再度CSVファイルを開くと、日本語が正しく表示されていますよ。

Export All URLsの詳細な設定方法

Export All URLsの設定方法についても解説していきます。

「Post Status:」欄にある、

Show Filter Options
Show Advanced Options

についてそれぞれ見ていきましょう。必要に応じて使ってみてください。

Show Filter Options

Date Range:（公開日の範囲）
By Author:（著者）

ここでは、コンテンツ公開日時の範囲と執筆者を指定することができます。

例えば、「今月公開したライターAさんのみの記事リストを抽出」したい場合に使う感じですかね。

Show Advanced Options

Exclude Domain URL:（ドメインURLの除外）
Number of Posts:（投稿数の指定）
CSV File Path:（CSVファイルの保存先の指定）

このあたりはかなり細かいので、お好みで調整してください。

ドメインURLを除外したい場合は、必要であればはここで除外しても良いですし、出力したCSVファイル上で一律削除しても良いですし。

投稿数の指定は謎な仕様ですが、抽出する記事数を指定できる感じです。

例えば全200記事中から10記事のみ抽出したい場合、「1〜11」みたいに設定するとランダムで10記事選ばれる感じです。あんまり設定する意義はないかなと。

CSVファイルの設定について

「CSV File Path」については、出力したCSVの保存先のパスを指定できます。

デフォルトでは「wp-content/uploads」に保存されますが、特に変更しなくてもOKかと。

ただしここで気づきましたが、出力したデータは全てサーバーにアップされてしまうようですね。

データ抽出後に下記の案内が出るので、クリックして削除しておくと良いかなと思います。もしくはサーバーから手動でファイル削除しておきましょう。

Once you have downloaded the file, it is recommended to delete file from the server, for security reasons.Click Here to delete the file. And don’t worry, you can always regenerate anytime.
「ファイルをダウンロードしたら、セキュリティ上の理由から、サーバーからファイルを削除することをお勧めします。ここをクリックしてファイルを削除します。いつでも再生成できますので、削除しても心配する必要はありません。:)」

記事リストを作るならExport All URLsを活用しよう

Export All URLsは、コンテンツを一括でリスト化するなら便利なプラグインです。

上手に活用して作業を効率的にしましょう。

一度データを抽出して利用が不要になれば、プラグインを削除すればOKです！

上記のように、WordPressで局所的に使うと便利なプラグインは色々あります。下記記事でもまとめているので、良かったら参考にしてみて下さいね。

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

The post 記事リストの抽出に便利！WPプラグイン「Export All URLs」の使い方・設定方法まとめ first appeared on Tekito style.me.

WPプラグインShow Current Templateの使い方・設定方法【閲覧中のテンプレートが分かる】

やすのり — Wed, 10 Jun 2020 17:11:56 +0000

Yasu

こんにちは！「Tekito+Style.me」を運営しているYasu（@98nasi_nori）です。普段は都内でWebディレクターなどをしています。

WordPressをカスタマイズしたいけど、「どのファイル・テンプレートをいじればよいのか分からない……」という時ってありますよね。

特に初心者の方だと、WordPressのファイル構成を掴めていないことが多いので、なかなか思うようにカスタマイズが進まないはず。

そこで便利なプラグインが「Show Current Template」。

現在閲覧中のページが、どのテンプレートファイルに対応しているのかすぐに分かるプラグインです。

今回はShow Current Templateの使い方や注意点などを解説してきます。

これからWordPressのカスタマイズを検討している方は、ぜひチェックしてみてください。

Show Current Templateってどんなプラグイン？

Show Current Templateは、閲覧中のWordPressページに対応しているテンプレートファイルが何かがひと目で分かる便利プラグイン。

WordPressの構造をある程度理解してる人は全く不要ですが、はじめてソースコードを修正・追加する方にとってはなかなか便利なプラグインです。

photo by：Show Current Template WP公式サイト

このように、WordPressの管理画面にログインしている状態で自サイトを閲覧すると、画面上部にテンプレートファイル名が表示されます。

Show Current Template WP公式サイト

Show Current Templateの導入方法

Show Current Templateの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「Show Current Template」で検索。

「いますぐインストール」をクリックし、有効化します。

これですべて完了で、何か設定する必要もありません。簡単ですね！

Show Current Templateの使い方

Show Current Templateの使い方はかなりシンプルです。確認していきましょう。

試しに本サイトのTOPページを閲覧してみます。

上記のように「テンプレート：home.php」と表示されています。

つまりTOPページを修正するなら、home.phpのソースコードを修正すればいいことが分かります。

さらにカーソルをホバーさせると、下記の詳細を確認することが可能です。

・テンプレート相対パス
themes/jstork19_custom/home.php

・テーマ名
・その他インクルードされている関連ファイル
themes/jstork19/blocks/blocks-functions.php
themes/jstork19/functions.php
・
・

FTPソフトでソースコードを実際に修正する方法

対応するテンプレートファイルが分かれば、あとはそのファイルを探して修正するだけです！

WordPressのソースコードを変更する場合、個人のブロガーさんであれば「FileZilla」などのFTPソフトを利用している方が多いのかなと思います。

FTPソフトを使うなら、

（1）対応するファイルを探しダウンロード
（2）ローカル環境でダウンロードしたファイルを修正
（3）修正済みのファイルをFTPソフトの同じ場所に再アップロード

の流れでOKです。キャッシュをクリアすれば、修正版がすぐに本番に反映されているはずです。

テンプレートのHTMLなど簡単な修正をする場合は、基本的にはそこまで問題はないでしょう。

大きな修正や重要ファイルをいじる場合は要注意

FTPソフトを使って本番のソースコードをそのまま管理すると、変更がいきなり本番公開されて、万が一改修したコードがやばかった時にそのまま公開されてしまいます。

.htaccessやfunction.phpなど重要なファイルをいじる時は、一歩間違えると大きなエラーに繋がる可能性もあります。

慎重に確認と修正作業を進めるべきです。

大きな修正をする前は、必ずデータのバックアップを取ることを推奨します。バックアップを取ってから、ソースコードを修正するようにしましょう。

バックアップについては下記プラグインがおすすめです。

2022.02.22

ちなみに本番環境とほぼ同じ環境（ステージング環境）をつくり、そこで一度安全かどうかテストしてから本番サイトに反映するのがより安全な方法です。

さくらサーバの場合は無料でステージング環境をつくれるので、良かったら合わせて確認してみてください。

2020.05.16

Show Current Templateを有効活用しよう！

今回はShow Current Templateの使い方などを解説してきました。

Show Current Templateは、初めてWordPressのソースコードを修正する時にとても便利なプラグインです。

WordPress初心者の方は少し使ってみると、どのファイルがどこに対応しているのか感覚値を掴めるようになるかなと思います。

ある程度ファイル構成が分ってきたら必要なくなるかなと思うので、状況に応じて使うと良いですよ！

その他に役立つプラグインはこちらから ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

本サイトで活用しているWordPressテーマ「STORK19」について ↓↓

2023.09.30

The post WPプラグインShow Current Templateの使い方・設定方法【閲覧中のテンプレートが分かる】 first appeared on Tekito style.me.

WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

やすのり — Sat, 30 Nov 2019 09:18:50 +0000

やすのり

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

サイトスピード（ページ表示速度）とは、ユーザーがサイトを訪問したときにサイトが表示される速さのこと。

ユーザビリティやSEOにも影響を与える重要な要素で、サイトスピードが1秒から5秒まで遅くなると、直帰率が90%増加するというデータもあります。速ければ速いに越したことはありません。

ですが「サイトスピードが遅いのはわかってるけど、実際にどんな対策をしたらいいのか……。」と悩んでいる方も多いのかなと思います。

ということで今回は、WordPressサイト・ブログのスピード改善をするために僕が実施した施策を12個紹介します。また実際にどれくらい改善したのか、施策ごとにスコア結果をまとめてみました。

スピード改善に役立つプラグインを活用しているので、初心者の方でも実施可能な施策ばかりです。これからWordPressのサイトスピードを改善したい方は、ぜひ1つの事例として参考にいただけますと幸いです。

そもそもサイトスピードが遅いと何が問題なのか？

Photo by https://www.thinkwithgoogle.com

Webサイトでユーザーがイライラする要因として最も割合が高いのが、サイトスピードであると言われています。

Googleが示したデータでは、54%の人がサイトのロード時間が長いとフラストレーションが溜まり、モバイルサイトの場合3秒以上ロード時間がかかると半分以上の人がそのページの閲覧を止めます。

The average mobile webpage takes 15.3 seconds to fully load, and more than half of visits are abandoned if a mobile website takes more than three seconds to load.4 In retail, we see that a one-second delay in mobile load times can impact conversions by up to 20%.

平均的なモバイルWebページは完全にロードするのに15.3秒かかり、モバイルWebサイトでロードするのに3秒以上かかる場合、訪問者の半分以上が閲覧を放棄します。また小売業では、モバイルサイトのロード時間が1秒遅延すると、コンバージョンに最大20%まで影響することがあります。

https://www.thinkwithgoogle.com

サイトスピードが遅いと、直帰・離脱に繋がり、コンテンツを読んでもらえない可能性を高め、ひいてはアフィリエイトや広告のクリック率、CVRの低下にも影響します。

そうした背景もあり、Googleが2018年1月に「スピードアップデート」を実施し、ページの表示速度が検索エンジンのランキングに影響が出ると発表されました。サイトスピードが遅いサイトは、SEOでも不利になるのです。

そもそもどれくらいのスピードであればいいのか？

もちろんサイトスピードは速ければ速い方がベストです。現実的には1〜2秒以内くらいが理想とされています。

サイトスピードにはページの読み込みが完了するまでの「ロード時間」と、ユーザーが感じる「表示速度」があります。どちらかというとユーザビリティへの影響が大きいのは表示速度の方で、特に最初のファーストビューが表示されるまでの時間がユーザーの直帰率などに大きな重要を与えているようです。

参考までにGoogle公式サイトでは、直帰率とロード時間の関係を示す以下のデータが紹介されています（※データはモバイルページのもの）。

Photo by https://www.thinkwithgoogle.com

ロード時間が1 → 3秒になると…… 直帰率が32%増加
ロード時間が1 → 5秒になると…… 直帰率が90%増加

ちなみに最速で一時期有名になったサイトは、著名人の阿部寛さんの公式サイトです。爆速過ぎて感動しますね……（笑）。
阿部寛さんの公式サイト

サイトスピード改善の背景と改善前のデータ

僕が現在利用しているWordpressの人気テーマ「ストーク」は、機能やデザインに優れていますが表示速度が遅いという難点があります。

そもそもモバイル版サイトの流入がPC版と比較し極端に少なく、実際に平均順位も低いので、どうしてかなと思っていましたが、1つの要因としてサイトスピードも影響してそうだなと。ユーザー行動による場合はしょうがないのですが、改善できる部分は極力改善しておきたいところ。

参考にGoogleが提供するサイトスピード分析のツール
PageSpeed Insightsで、「https://tekito-style.me/columns/webdesign-school-merit」の記事をチェックしてみると……

検証前のサイトスピード

モバイル：13
デスクトップ：44

やすのり

スコア低……（泣）。

デスクトップとスマフォのスコアに約3倍の開きが……。そもそもPC版も44スコアということでかなり低いです。モバイル版に至ってはもはや壊滅的ですね。できればスコア90以上は目指したいところ。悪くても80は行きたいですねー。これは改善しがいがあるな。

モバイル版

デスクトップ版

指摘されている改善できそうな項目は、下記のような感じですね。やはり重い画像データ周りが多いです。

画像サイズ
画像フォーマット
画像の遅延読み込み
サーバーの応答時間
レンダリングを妨げるリソース

参考までに下記のサイトスピード計測ツールhttps://gtmetrix.com/でも調べてみました。

・PageSpeed Score：57%　E
（Relative Score / The average PageSpeed score is 72%）

・YSlow Score　(63%)　D
（The average YSlow score is 71%）

・Fully Loaded Time：9.8s
（Relative Fully Loaded Time　The average Fully Loaded Time is 6.8s）

・Total Page Size　5.06MB
（The average Total Page Size is 3.25MB）

・Requests　104
（The average number of Requests is 90）

フルロードに9.8秒もかかっていますね……。

実際にスピード改善をやってみた！施策とその結果をまとめていきます

ということで実際にサイトスピード改善で効果がありそうな施策を実施してみました。結果の検証には、
PageSpeed Insightsのスコアを利用します。

参考までにテストを実施した時に環境条件は下記になります。

参考：表示速度改善時の環境

・サーバー：さくらサーバー
・プラン：スタンダードプラン
・テーマ：ストーク
・WordPressバージョン：5.2.2
・PHPバージョン：PHP 5.6.40 (CGI版)

またテーマによっては、導入するとエラーやバグが発生するプラグインがあります。テスト前にかならず確認しておきましょう。
参考：アルバトロス・ハミングバード・ストークテーマと相性の悪いプラグイン

※ 実施する前に、万が一に備えて必ずバックアップを取っておきましょう！バックアップについては以下のプラグインを参考にしてみてください ↓↓

2022.02.22

1. 余計なWordpressプラグインを削除する

まずは簡単にすぐできるところから。プラグインは多用すると動作が重くなったりするので、不要なプラグインはどんどん削除しましょう。

また自分で実装できそうなものはテーマを編集するなど、できればプラグインを使わないで実現する方法を模索するのも手です。プラグインを導入する場合も、同じ機能ならできる限り動作が軽いプラグインを選びましょう。

今回は不要なWordpressプラグインを7個前後削除しました。

サイトスピードスコア結果

スコア結果

・モバイル：17
・デスクトップ：33

モバイルが微妙にスコアが上がり、PCは10くらい下がりました……。まぁこれくらいは誤差の範囲ということで次に進みます。

2. WordPressに溜まったゴミデータの削除

WordPressに溜まった不要なデータを削除することも、サイトスピードにプラスになる場合があります。リビジョン（記事の下書きや更新前データ）やゴミ箱のデータや、使っていないタグなど。

余分なリビジョンが溜まるとデータベースを圧迫し、サイトスピードに悪影響を与えます。

今回はリビジョンデータの削除・管理でおすすめなWordPressプラグイン「Optimize Database after Deleting Revisions」を活用してみました！

設定方法や使い方の詳細についてはこちらから ↓↓

2020.04.20

こちらのプラグインで、57記事の645ものリビジョンデータを削除してくれました。

サイトスピードスコア結果

デスクトップ版

スコア結果

・モバイル：17
・デスクトップ：63

モバイル版は先程とスコアが変わりませんが、PC版がめっちゃ早くなりましたね。読み込み速度が体感的にも早くなりました！

しかし何回か計測するとPCが40くらいに戻ったりで、何が正しいのやら……。怯まず先に進めます。

3. 画像の負担を軽量化・最適化する

今回一番サイトスピードのネックになっていそうなのが、画像周りでした。ということでまずは画像の軽量化・最適化をしていきましょう。これでどれくらい改善できるか、楽しみなところです。

今回は「EWWW Image Optimizer」を利用していきます。EWWW Image Optimizerは、画像を軽量化・最適化できるWordPressプラグイン。

photo by：wordpress公式サイト

新規で投稿される画像はもちろん、過去に投稿した画像も自動で一括圧縮してくれます。画像に保存されている不要なメタデータを削除したりと便利なプラグインなのです。

設定方法や使い方の詳細についてはこちらから ↓↓

2020.04.20

結果、以下の圧縮・最適化に成功しました。

圧縮：25%
リサイズ：20%
削除結果：54.76 MB

これまで割とこまめに1枚1枚リサイズして圧縮していたのですが、まだまだリサイズできたようですね……。

サイトスピードスコア結果

モバイル版

デスクトップ版

スコア結果

・モバイル：22
・デスクトップ：63

スマフォ版は初めて20台へ！うーむ劇的には変わらないですね。ただ、PC版は安定してスコアが60代になってきました！

gtmetrixでも見て見ると、やや改善が見られました。

・PageSpeed Score (59%) E
・Fully Loaded Time9.0s

ロード時間が9.8s → 9.0sとちょいと早くなっている感があります。

4. PHPのバージョンを最新に

WordPressサイトはPHPという言語で動作しており、PHPのバージョンを最新のものにしておくとサイトスピードが改善できたり、セキュリティ面でもより安全にサイト運営ができます。最新バージョンであるPHP7は、PHP5に比べ2倍以上のパフォーマンス改善を見込めるようです。

ただし、場合によっては不具合が起きるケースもあるので慎重に作業を進めましょう。現状のバージョンがPHP 5.6.40でしたので、これをPHP 7.3へ変更します。

PHPのバージョンアップ方法の詳細はこちらの記事から ↓↓

2020.04.20

各主要サーバーごとのバージョン確認方法は、下記公式サイトをご確認ください。

サイトスピードスコア結果

スコア結果

・モバイル：20
・デスクトップ：53

うーむ、思った以上の効果は見込めなかったですね。むしろ数値が下がっている……。そもそもサーバーが最新のモジュール版ではなく、従来のCGI版なのもありますが、いったんこのまま進めていきましょう。

ただgtmetrix上では、ロードタイムが8.7sと、ようやく9秒を切りましたね。

PageSpeed Score（56%）E
Fully Loaded Time　8.7s

ちなみにPHPのバージョンもそうですが、WordPressも常に最新のバージョンに変更しておきましょう！

5. 最新の画像フォーマット「WebP」に対応する

WebP（ウェッピー）とは、Googleが開発した最新の静止画像フォーマット。WebPは従来の画像フォーマットより圧縮率が高く、導入すれば20〜30%近く軽量化することが可能です。

A new image format for the Web
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

（Web用の新しい画像形式
WebPでロスレス圧縮（可逆圧縮）された画像は、PNGと比較してファイルサイズが26％小さくなります。またWebPで非可逆圧縮された画像は、JPEGの場合、同等のSSIM品質指標の画像よりも25〜34％サイズが小さくなります。）
by：https://developers.google.com/speed/webp

ただしChrome、Edge、Firefox、Operaは対応していますが、AppleのSafariは未対応となっています。ですのでSafariとそれ以外のブラウザで画像フォーマットを切り替える処理をする必要があります。

先ほど紹介した画像圧縮・最適化のプラグイン「EWWW Image Optimizerを使えば、比較的簡単に対応可能です。

Webp対応の詳細はこちらの記事から ↓↓

2020.04.20

サイトスピードスコア結果

スコア結果

・モバイル：25
・デスクトップ：75

合格項目が12と、着実に増えてますね！

モバイルのスコアは微増し、PC版スコアもついに70台に！

それにしても、モバイルはまだまだですね……。

・PageSpeed Score（59%）E
・Fully Loaded Time：4.1s

gtmetrix.comでは、フルロード時間が4秒台に！！最初は9.8sだったので、ここまでで6秒早くなりました！！

6. 画像の遅延読み込み

画像データは重いため、全てを一気に読む込むと表示スピードに影響します。そこで画像を遅延読み込み（Lazy Load）させることで、画像を読み込むタイミングを調整しサイトの表示速度を改善できます。

「BJ Lazy Load」というプラグインを活用することで、簡単に導入できます。ただし遅延読み込みされる画像データが、適切にGoogleのbotにクロールされるように微調整が必要です。

プラグインの設定方法については下記記事をご確認くださいませ。

2020.04.20

ネイティブLazy-loadについて

※先日ネイティブLazy-loadをWordPressで簡単実装するプラグインをGoogleが公開しました。Google提供のプラグインなので、これから導入を検討される方はこちらを実装した方が良さそうです。

Native Lazyload

サイトスピードスコア結果

スコア結果

・モバイル：32
・デスクトップ：64

PCはちょい下がってますが、モバイル版のスコアが上がってますね〜！まだまだではありますが……。

PageSpeed Score（85%）B
Fully Loaded Time：7.1s

gtmetrixではページスコアがこれまでずっとEでしたが、初めてBにまで上がりました！

7. JavaScriptをフッターで読み込む

サイトスピード対策として、JavascriptやCSSなどのリソースの読み込みを遅らせる方法があります。サイトのヘッダーに挿入しているリソースを、フッターで読み込ませることでレンダリング速度を改善できる可能性があります。

PageSpeed Insightsで下記のよう指摘される項目ですね。

「レンダリングを妨げるリソースの除外」
「ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。」

by：PageSpeed Insights

プラグインを使わずソースコードを自分で調整するのが良いのですが、自分でいじれない場合は「Scripts-To-Footer」というプラグインがおすすめです。

レンダリングブロックを排除してくれますが、JSの読み込みを遅らすことで動作エラーや計測エラーが起こる場合があります。jQueryなどが多用されていたり、計測ツールを色々導入している場合には注意してみてください。

プラグインの詳細はこちらから↓

2020.04.20

サイトスピードスコア結果

スコア結果

・モバイル：26
・デスクトップ：70

結果はあまり前後で変わらず……。しかしレンダリングを妨げるリソースの除外が、1.47s → 1.25 sに変わっているので、やや減ってますね。計測ツールも整理と削除を今後検討してみます。

PageSpeed Score（74%）C
Fully Loaded Time：8.6s

gtmetrixでもそこまで変化はありませんでした。

8. CSSやJSなどの軽量化

画像ファイルの最適化の他にも、HTMLやCSS、Javascriptなどのリソースを最適化することで、スピード改善で一定の効果が見込めます。「Autoptimize」というプラグインを使えば、主要なリソースを簡単に軽量化・圧縮してくれるのでとても便利です。

こんな感じで、ぽちぽち設定項目にチェックを入れるだけでOKです。プラグイン使い方は下記記事をご参考ください。

2020.04.20

サイトスピードスコア結果

スコア結果

・モバイル：49
・デスクトップ：80

モバイル版の数値がこれまで見たことない数字に……！なかなか上がらなかった数値なので、まだ50も超えてませんが嬉しい限り。

PC版もスコアがついに80台へ！

モバイル版は「レンダリングを妨げるリソースの除外」が、1.25ss → 0.64ssまで下がっています。

あとは「サーバー応答時間の短縮（TTFB）」を改善していけばいいのですかね。あとモジュール内の画像が悪さをしているようので、ここも調整の必要そうです。

PageSpeed Score (72%）C
Fully Loaded Time：8.0s

ちなみにgtmetrixでは大きな変化がありませんでしたね。

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

ブラウザのキャッシュを活用すると、HTMLやCSS、画像などのリソースをブラウザが一時保存（ブラウザキャッシュ）してくれます。そうすることで、ユーザーが同じページを再訪問した時に表示スピードを上げることができます。

ブラウザキャッシュを有効化するためには、プラグインは不要です。サーバー内にある「.htaccess」というファイルに特定のコードを追記します。FTPソフトを使う必要があるのですが、そこまで難しくはないです。

詳細な設定方法はこちらからご確認ください。 ↓↓

2019.11.30

サイトスピードスコア結果

スコア結果

・モバイル：50
・デスクトップ：75

モバイル版のスコアがようやく50台に！

合格項目も14まで増えていますね。デスクトップ版もスコアが70〜80で安定してきましたね（合格項目11）。

PageSpeed Score（75%）C
YSlow Score（82%）B
Fully Loaded Time：3.9s

gtmetrixで確認してみるとスピードスコアは変わっていませんが、フルロード時間が3秒台になっていました！またYSlow Scoreも初めてBに。

10. サーバーのキャッシュ改善

ブラウザではなく、サーバー上のキャッシュを改善することでも、サイトスピードを改善することが可能です。ややこしいのですが、サーバー上で事前にページを生成しキャッシュとして保存しておくことで、表示速度を改善します。

「WP Fastest Cache」というプラグインが、設定も簡単で動作も比較的安定しているのでおすすめです。

またサーバーキャッシュ周りのプラグインはトラブルが発生する可能性が高いので、事前にバックアップを必ず取るようにしましょう……！

実際に僕もモバイルサイトなのに、PCのコンテンツが表示されるなど不具合がありました。お使いのWordPressテーマによっては、事前にバグやエラーの発生事例がないか、導入前にリサーチをしてみてください。

プラグインの設定方法は以下から ↓↓

2020.04.20

サイトスピードスコア結果

スコア結果

・モバイル：55合格した監査 (13)
・デスクトップ：92 合格した監査 (13)！！

デスクトップサイトは、念願の90台スコアをついに拝めることに……！導入後、PC・SPともに「サーバーの応答時間が遅い（TTFB）」という指摘は解消されたましたね。PCに関してはもう広告の画像が重いくらいしか指摘されない感じです。ほとんどマックス値まで持ってこれました。

モバイル版も改善はしていますが、PCと比較し思ったよりは伸びず……。8割くらいいきたいところですが、なかなか難しいですね……。

PageSpeed Score（75%)）C
YSlow Score（82%）B
Fully Loaded Time：3.1s

gtmetrix.comでは、フルロード時間が、3秒前半台に！かなり早くなりましたね。

11. 余計なウィジットや広告を取り除く

ここからは微調整の施策になります。サイト上で不要なもの、機能していないものは思い切って外すことでスピード改善に繋がる可能性もあります。ですので不要なものは削除してみました。

アドセンスなどでクリック率の低い広告
利用されていないウィジェット
Youtube動画の埋め込み
Google Mapの埋め込み
テーマの不要なアニメーション

PageSpeed Insightsの注意事項を見ると、アドセンスなどで配信されている広告画像がWebpに対応していないので、それが遅くなっている要因のようです。これはコントロールできないので仕方ないですが、効果の薄いアドセンス広告などがある方は削除した方が良さげ。

インプレッションが少ない上に、収益も少ない広告は今回改めて整理し、サイトから削除してアーカイブしました。

僕は使っていませんがその他注意すべきものとしては、

・Facebook いいねBox
・Twitterのタイムライン

などもプラグインで表示しているサイトもありますが、読み込み動作が重くなる要因なので、テストでいったん外してみることをおすすめします。

また僕が使っているテーマ「Stork」のスライダー付き記事一覧（pickup記事）機能や、テキストのフェードインなどアニメーション機能についても今回検討してみました。スライダーはTOPページだけなので悩みましたが、スライドさせていた余分な記事の数を11記事から6個記事へ整理。フェードインアニメーションはオフにしています。

サイトスピードスコア結果

結果、サイトスピードスコアへの影響はほとんど変わらず…… といった結果でした。特に重いウィジットや埋め込みなどは使っていなかったので、もし使っている方は試してみてください！

12. 個別の画像調整

こちらも微調整。「適切なサイズの画像」の指摘を確認してみると、テーマのモジュール内の画像と、サイトロゴ画像、プロフィール画像など、特定の画像が最適化されておらず、スピードへ悪影響しているようでした。

画像最適化プラグインの対象から抜け漏れていたようなので、Th_markersとイメージオプティムを使い、1枚1枚リサイズと圧縮を行い再アップロード。

・モジュール内の画像
328px → 150pxへ
194 KB → 6KB

・プロフィール画像
72kb　→ 9kb

こんな感じまで、画像サイズを落とせました。

同一の画像はすべて差し替えます。差し替えには一括置換ツールの「search regex」を利用しました。

サイトスピードスコア結果

モバイル版については「画像の最適サイズ」については言及されなくなり、合格項目が14に。ただスピードはそこまで変わらず、といった結果となりました。

今回実施しなかったけど、今度検討する施策

今回のスピード改善施策としては実施しませんでしたが、今後検討し随時実施してみようと思っている施策をメモしておきます。検証でき次第、結果をレポートできればと思います！

CDNの利用

Cloud Flareなど、CDNの利用もサイトスピードの改善に繋がりそうです。CDNは簡単に言うと、Webサイトを複数の地域の複数のサーバーで共有するサービス。今回導入しようかと検討しましたが、色々と設定・リサーチなどが必要そうだったのでいったん保留にします。

途中で力尽きたので、また時間ある時にテストしてみます！

サーバーの性能改善・移転

僕が使っているのではさくらのレンタルサーバーなのですが、サーバーの応答時間を削減するために高速サーバーへ変える、高いプランへ切り替えることを検討しました。

さくらサーバーの場合、2018年4月以降に登録したユーザーは処理の早いモジュール版をデフォルトで使えるのですが、それ以前に登録したユーザーは従来のCGI版しか使えないんですよね（プレミアム、ビジネスプランは切り替え可能）。

※参考：さくらのレンタルサーバでWordPressサイトを高速に動かす方法。モジュール版PHPって何!?

ですので、さくらサーバーを同じプランか別のプランで再度契約し直すか、別のサーバーに切り替えるかしないといけません。

この際せっかくなので、別サーバーも使ってみようかなーとは思っています。GMOが提供している高性能レンタルサーバ「ConoHa WING(コノハウィング)」や、安定感のある「エックスサーバー」など。

サーバー移転となるので、ある程度準備した上で随時実施してみようかなと思います。ConoHaは最近よく名前を聞くので、ちょっと使ってみたいですね。

国内最速・高安定の高性能レンタルサーバー【ConoHa WING】
月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

AMP対応する

モバイル版のサイト改善施策として、AMP（Accelerated Mobile Pages）対応することも検討しています。Googleが推奨しているサイトコンテンツを高速で表示できる仕様なので、可能な限り導入すべきではあります。ただし色々と制約があったり調整が必要なので、導入するかどうかは検討中です。

現職で扱っているサービスがAMP対応をしていて、その開発ディレクションなどをしていたのですが、JSが自由に使えなかったり、ファイルサイズなどに制限があって表示したいコンテンツを表示できない、レイアウトが崩れたりなど、色々と悩ましい感じですね……。

AMP用のWordPressプラグインもあるので、テストで使ってみようかな。

「Google developers ブログ」にAMPに関してこんな記事もありました。AMP導入を検討している方は参考にしてみては？
AMP の誤解を払拭する

プラグインの再調整

今回サイトスピード改善で色々なプラグインを入れましたが、できる限りプラグインは入れないほうが処理に負荷がかかりません。その他のプラグインも含めて、自力で設定しプラグインを使わない方法はないか、自分でもできそうか含め改めて検討してみようかなと思います。

速度の早いテーマへ変更

本サイトはStorkを使っていますが、高速なテーマに変更するのも手段としてありかなと検討しています。色々とカスタマイズをしたので、テーマ切替時に色々と設定をし直す必要があり正直面倒くさいのですが……。

参考までに下記のテーマ「Godios」はクソ早いです（笑）。ページ遷移速度0秒というコピーがすごい。有料（4980円）ですが、使ってみる価値はありそう。
「Godios」デモサイト

最近Storkの新テーマ「STORK19」が出たようなので、そちらも使ってみようか検討中です。Storkのデザインの良さはそのままに、機能追加と従来のもっさり感がなくなり、かなり高速になっていると評判ですね。

めっちゃ使ってみたいのですが、またカスタマイズし直さないといけないのか……と思うと腰が重くなります（笑）。1日じっくり時間取れたらやってみよう……。
WordPressテーマ「STORK19」

まとめ

ここまでWordPressのスピード改善について施策と結果をまとめてきましたが、いかがでしたでしょうか？スピード改善周りについて予備知識があまりなかったので、リサーチと施策の洗い出し、施策の実施と計測と結果のまとめなど、諸々1週間近くかかってしまいました。けっこう疲れた（笑）。

基本的に初心者の方でも取り組める施策ばかりです。動作環境によってテスト結果も異なるかと思うので、ぜひ参考にテストしてみてくださいませ。

今回の結果をまとめると、検証前後で下記のように改善できました。

検証前後のサイトスピード

デスクトップ：44 → 92
モバイル：13 → 55

※フルロード時間：9.8s → 3.1s

PC版はスコア90超えを達成！モバイル版はまだまだ改善の余地があるので、今後も追加で実施し、改善に繋がった施策は随時更新していきたいと思います。

最後までお読みいただき、誠にありがとうございました！

The post WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ first appeared on Tekito style.me.

WP Fastest Cacheの使い方・設定方法【キャッシュ改善のおすすめプラグイン】

やすのり — Mon, 21 Oct 2019 15:16:48 +0000

やすのり

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

サイトスピード改善で一定の成果を見込める施策として、キャッシュ改善があります。サーバー上で事前にページを生成し、キャッシュとして保存しておくことで、表示速度を改善することができます。

WordPressサイトの場合は、プラグインで導入することができます。おすすめなプラグインが「WP Fastest Cache」。設定方法がシンプルなので、初心者でも比較的簡単に使うことができます。

キャッシュ系のプラグインはW3 Total CacheやWP Super Cacheなど色々あるのですが、比較的バグ報告が少なく（現状僕が使っているテーマ「Stork」との相性も加味し）、また簡単に使えるということでWP Fastest Cacheを選定しました。

ということで今回はWP Fastest Cacheの使い方や注意点などを解説していくので、キャッシュ改善を検討している方はぜひチェックしてみてください。

WP Fastest Cacheの導入方法

まずはWP Fastest Cacheの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

まずバックアップを必ず取る

キャッシュ系のプラグインは、導入するとデザインが崩れたりPCとSPの切り分けができなくなったりと、様々なトラブルが発生する可能性があります。

環境やテーマなどによって何が起こるか予測しづらいので、設定する前に必ずバックアップを取りましょう！

バックアップには「UpdraftPlus」というプラグインがおすすめです。無料で簡単にバックアップデータを作成することが可能です。

2022.02.22

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「WP Fastest Cache」で検索。「いますぐインストール」をクリックし、有効化します。

画像のチーターは、速くなるからってことでしょうか？（笑）

インストールされてるか確認

インストールを完了すると、管理画面のサイドバーに「WP Fastest Cache」が追加されていればOKです。クリックして詳細を確認しましょう。

基本的にデフォルトで全ての設定項目がアンチェック状態なので、インストールしても設定しないと起動はしません。キャッシュ系のプラグインはトラブルが多いので安心ですね。

WP Fastest Cacheの使い方

WP Fastest Cacheは多機能ですが、必要な項目をチェックするだけなので簡単に設定できます。確認していきましょう。

1. 日本語設定に変更

WP Fastest Cacheデフォルトでは言語が英語になっていますが、日本語表示も可能です。初心者にはありがたいですね！

先に「日本語」へ変更し、「変更を保存」しておきましょう。

2. 詳細設定

必要な項目をチェックするだけでOKです。

キャッシュ

こちらは有効にしないとプラグインそのものが機能しません。必ずチェックをつけましょう。

Preload（プレロード）

指定した項目のキャッシュを、自動で事前に作成してくれる機能です。クリックすると、詳細設定ができます。

よくユーザーが使うであろう下記の項目は、チェックしておくことをおすすめします。

Homepage（TOPページ）
Posts（投稿ページ）
Categories（カテゴリーページ）
Pages（固定ページ）
Tags（タグページ）

ログインユーザー

チェックすると、ログインユーザー（サイト管理者）に対してキャッシュを表示しなくなります。

サイト管理者の場合、キャッシュが残るとテーマなどをカスタマイズしたときに変更内容の確認がしにくくなります。ですのでチェックすることをおすすめします。

モバイル

モバイルの項目はいったんチェックしておきましょう。テーマによってはスマフォ版のデザインが崩れたり、PCとスマフォ版の切り替えができなくなったりと多々エラーが発生するようです。

テーマが僕と同じStorkの場合、不具合が発生する事例を確認しています。実際に僕もこの項目にチェックをつけないでスマフォ版を確認したら、PC版のサイドバーがSP版で表示されるエラーが発生していました。

ですので、この項目にチェックを入れ、モバイルユーザーにはキャッシュを表示しないようにしています。

Googleが提供するサイトスピード計測ツール「PageSpeed Insights」で提案される改善項目で、スマフォ版の「サーバー応答時間の短縮（TTFB）」がもともと未解決でしたが、「モバイル」の項目を外すと合格できました。

しかしエラーが発生するのでこの項目にチェックをつけると、やはり「サーバー応答時間の短縮（TTFB）」の指摘が再度されるように……。スマフォのサイトスピードを改善したいので悩ましいですが、こればかりは仕方ないですね。

もしチェックを外し、モバイルユーザーに対してキャッシュを表示したい場合は、有効後に必ずPC版とスマフォ版それぞれにエラーやバグが発生していないか隈なく確認することとおすすめします。

問題が起きたときは、「モバイル」をチェックして解除できますよ。

新しい投稿

「新しい投稿」はチェックしておきましょう（Clear All CasheでOK）。新規投稿する時に、指定した項目のキャッシュを削除することができます。

記事を投稿する度に古いキャッシュを削除し、新規キャッシュに入れ替えることで、定期的にキャッシュ状況を最新状態に保つことができます（記事更新頻度によりますが）。

Update Post

こちらは「新しい投稿」とは違い、記事を更新した場合にキャッシュを削除できる機能です。合わせてチェックしておきましょう。

ファイル圧縮・最適化

ファイル圧縮・最適化の項目は、他の専用プラグインで管理しているため今回チェックしませんでした。

HTMLの圧縮
CSSの圧縮
CSSの結合
JSの結合

他の圧縮系のプラグインを活用している場合、機能がバッティングするとエラーが発生したり、プラグインが正常に動作しない可能性があります。現状利用しているプラグインについて、事前に確認しておきましょう。

もしファイル圧縮が必要であればチェックしましょう。

参考までに、僕がファイル圧縮・最適化で使っているのは、「Autoptimize」というプラグインです。

2020.04.20

Gzip圧縮

この項目も必要に応じてチェックしておきましょう。サイトリソースをサーバー上で圧縮することで、転送量を減らし高速化してくれます。

他のプラグインで設定している場合はチェックは不要です。

ブラウザキャッシュ

サーバー上ではなく、ブラウザ上でのキャッシュを生成してくれます。僕は.htaccessファイルに直接設定を記述しているので、今回はチェックを外します。

ブラウザキャッシュは、プラグインを利用しなくても比較的簡単に設定できます。キャッシュの設定も細かく指定できるので、以下記事もぜひ参考にしてみてくださいね。

2019.11.30

ファイルを直接いじりたくない、現状他のプラグインでブラウザキャッシュを何も設定していない方は、こちらで簡易的に管理してもいいかなとは思います。

3. キャッシュの削除方法

上記の設定で、記事を投稿・更新した場合に定期的にキャッシュが削除・更新されるようになりましたが、「キャッシュの削除」タブから手動・もしくは自動更新で削除することもできます。

キャッシュを削除

キャッシュファルダ内の全てのキャシュを削除します。

キャッシュと圧縮されたCSS/JSファイルを削除

テーマのコードを変更するなどで、CSS/JSファイルを変更した場合はこちらをチェックしましょう。

Timeout Rules

「Add New Rule」をクリックすると、キャッシュを自動削除する頻度の調整が可能です。必要に応じて設定しておきましょう。

WP Fastest Cacheを有効活用しよう！

ここまでWP Fastest Cacheの使い方を紹介してきましたが、かなり簡単に設定できるのでぜひキャッシュ改善のプラグインとしておすすめしたいところです。

実際にPC版は「サーバーの応答時間が遅い（TTFB）」が解消され、サイトスピードスコアが70後半から90台へ上昇しました！

色々サイトスピード改善で試行錯誤していたのですが、キャッシュ周りで思った以上に改善できましたね。スマフォ版もスコア40前半から50台に改善したので、10前後のスコア改善に。スマフォはまだかなり改善の余地があるので、引き続き調整していきます……。

PCに関しては、広告で表示される画像が重いくらいしかもう指摘されない感じですね。

サイトスピードについては、キャッシュもそうですが画像周りの施策でもサイトスピードをかなり改善できたので、以下の記事もぜひチェックしてみてくださいね。

2020.04.20

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

The post WP Fastest Cacheの使い方・設定方法【キャッシュ改善のおすすめプラグイン】 first appeared on Tekito style.me.

画像の遅延読み込みをするWPプラグインBJ Lazy Loadの使い方・設定方法まとめ

やすのり — Mon, 14 Oct 2019 07:36:29 +0000

やすのり

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

WordPressのサイトスピード改善で対策すべきなのが、画像の遅延読み込み（Lazy Load）。画像データは重く一気に読む込むと表示スピードに影響するので、画像を読み込むタイミングを調整することでサイトスピードを改善できます。

そこで便利なプラグインが「BJ Lazy Load」。導入することで簡単に遅延読み込み機能を実装できます。。

今回はBJ Lazy Loadの使い方や注意点などを解説していくので、遅延読み込み機能を検討している方はぜひチェックしてみてください。

ネイティブLazy-loadについて

※先日ネイティブLazy-loadをWordPressで簡単実装するプラグインをGoogleが公開しました。Google提供のプラグインなので、これから導入を検討される方はこちらを実装した方が良さそうです。ただ僕も別のサイトで使ってみましたが、PageSpeed Insightsの結果に反映されていない場合もあったので、テストしつつ様子を見てみた方が良さそうです。僕も順次こっちのプラグインに移行する予定です。

Native Lazyload

BJ Lazy Loadってどんなプラグイン？

photo by：WordPress公式サイト

BJ Lazy Loadは画像の遅延読み込みを簡単に実装できるWordPressプラグイン。画面に画像を表示するタイミングで画像データを読み込む設定ができます。一気に画像データを読み込む必要がなくなるので、サイトの表示スピード改善が期待できます。

Googleが提供するサイトスピード計測ツール「PageSpeed Insights」で提案される改善項目で、「オフスクリーン画像の遅延読み込み」と出るのがそれです。

また遅延読み込み対策ができるプラグインは、以下のように色々と種類があります。

Lazy Load
BJ Lazy Load
a3 Lazy Load
Lazy Load by WP Rocket
Lazy Load Optimizer

ただしプラグインによっては、利用しているテーマと相性が悪い場合があります。現在僕が使っているテーマ「ストーク」だと正常に動作しないと指摘されているプラグインもあったので、今回は事前にリサーチし問題なさそうな「BJ Lazy Load」を選定しました。

BJ Lazy Loadで遅延読み込み設定できる項目

BJ Lazy Loadでは、以下の要素の遅延読み込み対応が可能です。コンテンツ内の画像データ以外にも、サムネイルや重くなりがちなiframeタグの遅延読み込みも可能です。

コンテンツ
テキストウィジェット
投稿サムネイル
グラバター
画像
iframe

BJ Lazy Load

BJ Lazy Loadの導入方法

BJ Lazy Loadの導入方法を確認していきましょう！他のWordPressプラグインと手順は同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「BJ Lazy Load」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

インストールを完了すると、管理画面の設定欄に「BJ Lazy Load」が追加されていればOKです。クリックして詳細を確認しましょう。

BJ Lazy Loadの使い方・設定方法

BJ Lazy Loadの使い方や設定方法はかなりシンプルです。一つ一つ確認していきましょう。

基本設定

基本的に全ての項目に「YES」で問題ないです。下記の項目にLazy loadが実装されます。

Apply to content（記事内の画像）
Apply to text widgets（ウィジットの画像）
Apply to post thumbnails（サムネイル画像）
Apply to gravatars（アバター画像）
Lazy load images（画像の遅延読み込み）
Lazy load iframes（iframeタグの遅延読み込み）

追加設定

もう少し細かい設定もできるので、確認していきましょう。

Placeholder Image URL

画像が表示されるまで、仮の画像を表示する設定ができます。特に設定しなくてもOKかなと思います。必要であれば、仮画像のURLを設定しておきましょう。

Skip images with classes

特定のクラスが付与されている画像を、遅延読み込みの対象から除外できます。

例えば僕の使っているテーマstorkでは、ファーストビューで表示される画像やロゴ画像の読み込みが遅くなると、体感的に表示される速度が遅くなり微妙な感じになりました。ですのでそこだけ「no-bj-lazy」というクラスを割り当てて、遅延読み込みを解除しています。

遅延解除のために新規でクラスを追加するだけでなく、既存のクラスも指定できるので便利ですね。

メモ：アイキャッチ画像のみ解除する場合

使っているテーマにもよりますが、　Storkでアイキャッチ画像の遅延読み込みを解除した場合は下記のようにソースコードを変更します。

「single.php」ファイルの43行目

→

【参考記事】
・the_post_thumbnail
https://elearn.jp/wpman/function/the_post_thumbnail.html

※まだ未確認ですが、シンプルに「Apply to post thumbnails」の項目のチェックを外すだけでいけるかもです……！

Threshold

画像を読み込ませるタイミングを指定することができます（単位はピクセル）。例えば100とかに設定すると、画像が表示される100px手前で読み込みが開始されるので、かなり直前で読み込まれることになります。

逆に1,000とかだと、画像が表示されるずっと前に読み込まれることになります（あまりLazy Loadの意味がなくなる）。

デフォルトだと200ですが、早く画面をスクロールすると画像表示の挙動が遅く感じるので、僕は500に設定しています。

ある程度ゆとりをもたせて先に読み込ませた方が、自然な挙動でストレスなく画像の表示ができますよ。

Use low-res preview image

実際の画像が完全に読み込まれるまでに、同一画像で画質が低いものを先に表示できる設定。まず低画質の画像を読み込んで、高画質の画像を読み込む感じですね。

僕は特に設定していませんが、必要であれば調整してみてください。またこの設定を有効化する以前アップロードされた画像は、画像サイズを再生成する必要があります。

Google botのクロール対応

遅延読み込みを実装した場合、懸念されるのがSEOへのマイナスな影響が発生する可能性があること。

遅延読み込みの設定をした場合、遅延読み込みされる画像データが適切にGoogleのbotにクロールされない場合があります。つまり画像データがコンテンツ内にあるとGoogleに正しく認識されないということです。

一応サーチコンソールで確認してみましたが、BJ Lazy Load導入後何やらエラーが発生していました。ライブテストで画像のレンダリングも上手くできていませんでした。

ですのでクロールエラーを回避し、遅延読み込みする画像をクロールされるために、プラグインのソースコードを少し調整する必要があります。

BJ Lazy Loadの編集

WordPress管理画面のサイドバー「プラグイン」欄から、「プラグインエディター」を選択します。

今回編集するプラグイン「BJ Lazy Load」を選択し、incフォルダをクリック。

incフォルダ内に「class.bjll.php」というファイルがあるので、45行目にあるコードを下記の用に変更します。

変更前のコード


	/* We do not touch the feeds */
	if ( is_feed() ) {
		return;
	}

変更後のコード


	/* We do not touch the feeds */
	if ( is_feed() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot')) {
		return;
	}

変更できたら「ファイルを更新」ボタンをクリックし保存します。

管理画面で変更できない場合は、FTPソフトで編集

WordPressの管理画面上では、プラグインの変更許可が下りない場合があります。そのときはFTPソフトで同様の変更をすればOKです！

/home/◯◯◯/www/wp/wp-content/plugins/bj-lazy-load/inc

上記のパスにアクセスし、「class.bjll.php」ファイルを同様に発見したらダウンロードします。

テキストエディタで同様にソースコードを編集し保存、その後アップロードして上書き保存すれば完了ですね！

再度サーチコンソールで確認してみると、問題なくクロールできていました！画像のレンダリングもできているようです。良かった〜！

BJ Lazy Loadを有効活用しよう！

BJ Lazy Loadを活用して遅延読み込み機能を実装してきましたが、いかがでしょうか？プラグインの操作・設定自体は難しくないのですが、少しコードの調整が必要ではあります。

実際にPageSpeed Insightsで再度サイトスピードの検証をしてみると、「オフスクリーン画像の遅延読み込み」の項目が合格し、スマフォ版サイトのスコアが20くらい上がりました！体感的にも表示速度が早くなっているので、プラグインを導入した甲斐はありましたね。

それでは！

画像の最適化対策については、以下のWordPressプラグインも参考にしてみてくださいね。

2020.04.20

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

The post 画像の遅延読み込みをするWPプラグインBJ Lazy Loadの使い方・設定方法まとめ first appeared on Tekito style.me.

Autoptimizeの使い方・設定方法を解説【CSSやJSを最適化するWPプラグイン】

やすのり — Sun, 06 Oct 2019 10:54:57 +0000

やすのり

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

WordPressのサイトスピード改善では、画像ファイルの最適化の他にも、HTMLやCSS、Javascriptなどのリソースを最適化することで一定の効果が見込めます。

そこで便利なプラグインが「Autoptimize」。主要なリソースを簡単に軽量化・圧縮してくれるツールです。

今回はAutoptimizeの使い方や注意点などを解説していくので、サイトスピード改善を検討している方はぜひチェックしてみてください。

Autoptimizeってどんなプラグイン？

photo by：公式サイト

Autoptimizeは、CSSやJSなどのリソースを軽量・最適化してくれるプラグイン。

改行やスペースを削除してくれたり、複数のファイルを結合して圧縮してくれたりと、これ1つで便利な機能を備えています。利用は無料です。

実際に僕も使ってみて、Googleが提供するサイトスピード計測ができる「PageSpeed Insight」で計測しました。するとスマフォ版の「レンダリングを妨げるリソースの除外」の項目が、

改修前：1.25ss → 改修度：0.64ss

まで下がったので、導入した効果は結構あったかなと思います。

Autoptimize

Autoptimizeの導入方法

Autoptimizeの導入方法を見ていきましょう！他のWordPressプラグインと同じ導入手順です。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「Autoptimize」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

インストールを完了すると、管理画面の設定欄に「Autoptimize」が追加されています。クリックし詳細の設定欄を確認しましょう。

Autoptimizeの使い方・設定方法

Autoptimizeの使い方、設定方法を確認していきましょう。

JS,CSS & HTMLタブ

まずはメインの設定事項となる、「JS,CSS & HTML」タブから確認します。

JavaScript オプション

ここではJavaScriptの設定が可能です。基本的に以下の2つの項目を選択すればOKです。

JavaScript コードの最適化
Aggregate JS-files?

これでJSコードから改行をなくして圧縮するなど、ファイルサイズを最適化してくれます。

内へ JavaScript を強制
try-catch の折り返しを追加

上記の項目については、もしJSコードを最適化することでJSが動かなくなるなどエラーが発生した場合はチェックしてみましょう。

ただしhead内にJSコードを全て移動すると読み込みが遅くなるので、基本的にはおすすめしません。エラーを起こしているJSファイルに関しては、FTPソフトなどを使って個別にheadに移動するなど調整をしましょう。

CSS オプション

CSSについては下記の項目をチェックするだけでOK。

CSS コードを最適化
Aggregate CSS-files?
インラインの CSS を連結

他の要素を実行する場合は、動作やパファーマンスが実際に改善されるか、環境によっても異なるかと思うので個別に確認してみてください。

HTML オプション

HTMLは下記の1項目をチェック。

HTML コードを最適化

もしコメントをHTMLファイルにそのまま残したい場合は、「HTML コメントを残す」を選択します。

その他オプション

下記の2項目をチェックします。

連結されたスクリプト / CSS を静的ファイルとして保存
Minify excluded CSS and JS files?

サイトにログイン機能があれば、「ログイン中のユーザーも最適化しますか ?」も合わせてチェックしてみてください（特に機能がなければ不要）。

すべての内容に問題なければ、「変更を保存してキャッシュを削除」します。

Imagesタブ

Imagesタブについては特に設定する必要はありません。Lazy-load（画像の遅延読み込み）もAutoptimizeで実装できるみたいですね。

もし他にLazy-load系のプラグインを使っている方は、チェックすると動作に問題が生じる可能性があります。僕は他のプラグインで実装しているので今回はスルー。

追加タブ

追加タブに移り、下記項目にチェックします。

webfont.js で非同期にフォントを結合して読み込む
絵文字を削除

フォントや絵文字のリソースもサイトスピードにやや影響するので、最適化しておくといいでしょう。

ただフォントに関しては、一度ブラウザのデフォルトのフォント > Googleフォントの順で読み込まれる場合、やや切り替える時の動作がぎこちなくなる時があります。気になる方はチェックを外すといいかなと思います。

さらに最適化！タブ

こちらについては有料機能やより硬度な機能になるので、特に設定しなくてOKです。

Autoptimizeでリソースを最適化しよう！

Autoptimizeはリソースの軽量化・最適化するのに、簡単で便利なプラグインです。WordPressのサイトスピード改善を進めている方は、ぜひ試してみてくださいね！

サイトスピード改善で重要な画像の最適化については下記記事も参考にしてみてください ↓↓

2020.04.20

2019.11.30

ブログやサイトのデザインについて悩んでいる方は、Webデザインスクールで学ぶのも選択肢の1つですよ ↓↓

2023.09.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

The post Autoptimizeの使い方・設定方法を解説【CSSやJSを最適化するWPプラグイン】 first appeared on Tekito style.me.

画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

やすのり — Mon, 16 Sep 2019 13:44:56 +0000

やすのり

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

EWWW Image Optimizerは、画像を軽量化・最適化できるWordPressプラグイン。自動で一括圧縮などもしてくれるので、画像が重くてサイトスピードが遅くなっている人におすすめしたいプラグインです。

今回はEWWW Image Optimizerの使い方や注意点などを解説していくので、画像最適化のプラグインを探している方はぜひチェックしてみてください。

EWWW Image Optimizerってどんなプラグイン？

photo by：wordpress公式サイト

EWWW Image Optimizerは画像を最適化して表示速度を改善するプラグインです。画像圧縮はもちろん、画像に保存されている不要なメタデータを削除したり、最新の画像形式であるWebPへ対応する設定も可能です。

細かい設定をすることも可能ですが、基本的に導入後のデフォルト設定で問題ないので簡単。すでにアップロード済みの画像を一括で圧縮でき、新規で登録される画像については自動で圧縮してくれます。

本ブログもサイトスピードがかなり遅かったのですが、一番ネックになっていそうだったのが画像データ周り。Webページの情報で重いのは画像データがメインですからね。サイト閲覧に負荷のかかる重いデータはどんどん軽くしていくべしです！

EWWW Image Optimizer

EWWW Image Optimizerの導入方法

EWWW Image Optimizerの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「EWWW Image Optimizer」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

インストールを完了すると、管理画面の設定欄に「EWWW Image Optimizer」が追加されていればOKです。クリックして詳細を確認しましょう。

EWWW Image Optimizerの使い方

EWWW Image Optimizerの使い方を確認していきましょう。基本的にはデフォルト設定のまま使えます。

1. 設定方法

まずは画像圧縮・最適化に関わる項目の設定をする必要があります。

basicタブ

basicタブでは画像最適化の基本設定を行うことができます。

まず「Remove Metadata」の項目をチェックします。写真にはレンズ焦点距離や露光量、撮影日時・場所などのメタデータが保存されているのですが、そうした余分なデータを削除することができます。画像を軽くする観点でも、個人情報を守る意味でも設定しておくことをおすすめします。

他の項目は基本デフォルトのままでOK！各画像の最適化レベルも「Pixel Perfect」で問題ないです。バックアップ元の設定は有料版のみ設定可能みたいです。

convertタブ

convertタブでは画像の形式を変換するときの設定ができます。画像形式を変換する必要は基本的にないので、特にいじる必要のないです。

ですが「コンバージョンリンクを非表示」の項目だけチェックしておきましょう。画像形式の変換を意図的あるいは間違ってできないようにする設定です。画像を複数人で管理する時にチェックしておくと安心です。

他の項目は基本デフォルトのままでOKです。

WebPタブ

WebP（ウェッピー）は、Googleが提供する最新の静止画フォーマット。既存の画像形式と比較して、約2〜3割サイズを小さくすることが可能です。

WebPタブでは画像をJPGやPNGから、WebPへ変換する設定ができます。WebPはChrome以外のブラウザでは現状対応していないので、設定する場合は色々と調整する必要があります。

WebPのブラウザごとの対応状況

特に設定する予定のない方は、デフォルトのまま放置でOKです。画像のWebP対応については下記の記事で別途解説しています↓

2020.04.20

2. 既に投稿済みの画像を一括圧縮する方法

これからアップロードされる画像に関しては、上記で設定した方法で圧縮されますが、すでにアップロード済みの画像には反映されません。そのため既存の画像は別途圧縮する必要があります。

そこで便利な機能が「一括最適化」機能。既存の画像をまとめて一括で圧縮することが可能です。

管理画面の左メニュー「メディア」欄から「一括最適化」をクリックします。

「最適化されていない画像をスキャンする」を選択。

なんと8,000枚以上画像の圧縮ができそうとのこと。「最適化を開始」をクリックします。

どの画像が最適化されているのか、進行状況を確認できます。

トータルで所要時間3時間もかかりそう。しばし待ちましたが、実際は1時間半くらいで全ての画像のリサイズが完了しました。

最適化済みの項目数を確認すると、全ての最適化が完了したことが分かります。

どれくらい画像が最適化されたのか、結果も確認することができます。画像の25%が圧縮されたようです。

圧縮：25%
リサイズ：20%
削除結果：54.76 MB

これまで画像は細めに1枚1枚リサイズと圧縮をしてからアップロードしていたのですが、それでもまだまだ圧縮できたようですね……。なるほど。

3. 新規投稿する画像を圧縮・最適化する方法

EWWW Image Optimizerを有効化していれば、今後新規で追加した画像は自動で最適化されます。ですので今後は一括圧縮することも不要な感じです！

アップロードされた画像がどれくらい圧縮されているのかは、管理画面の「メディア」>「ライブラリ」の画像一覧から確認することができます。

画像圧縮・最適化ならEWWW Image Optimizer

WordPressサイトの画像の圧縮・最適化なら、EWWW Image Optimizerはおすすめなプラグインです。簡単に設定・導入でき、自動で画像圧縮をしてくれるとても便利なプラグインです。

画像が重くてサイトスピードが低い方などは、ぜひ試してみてはいかがでしょうか？

追加で対策しておきたい、画像のWebP対応については下記記事で解説しています↓

2020.04.20

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

The post 画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ first appeared on Tekito style.me.

リビジョン削除のWordPressプラグインOptimize Database after Deleting Revisionsの使い方まとめ

やすのり — Mon, 16 Sep 2019 09:13:42 +0000

やすのり

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

Optimize Database after Deleting Revisionsは、リビジョンデータの削除・管理でおすすめなWordPressプラグイン。

今回はOptimize Database after Deleting Revisionsの使い方や注意点などを解説していくので、ぜひチェックしてみてください。

Optimize Database after Deleting Revisionsってどんなプラグイン？

Optimize Database after Deleting Revisionsは、WordPressに溜まったリビジョンデータを削除したり、保存件数を指定することができるプラグイン。他にもゴミ箱のデータや、使っていないタグを削除してくれたりと何かと便利なツールです。

リビジョンは投稿の編集画面を開いていると自動的に内容を保存をしてくれる、WordPressでデフォルトで搭載されている機能です。

「記事を更新したけどある特定時点での内容に戻したい！」という時に役立ちます。

しかし下書きデータが溜まるとその分データベースが重くなってしまうので、リビジョンは定期的にメンテナンスをするべきです。余分なリビジョンを減らせばその分データベースが軽くなり、サイトスピードの改善、ひいてはSEO面でもメリットがあります。

記事の下書きデータって、実際そんな何個もいらないですよね？？リビジョンを削除しないと知らないうちにどんどん増えていくので、効率的に管理すべきでしょう。

Optimize Database after Deleting Revisions

プラグインを使わずリビジョンを削除する方法もあるけど……

プラグインを使わなくても「wp-config.php」ファイルに特定の記述をすることで、リビジョンの保存件数や自動更新の間隔を任意の値に設定することが可能です。

しかしその場合は設定以前のリビジョンデータは残ったままとなってしまいます（設定した時点以降のリビジョンデータには反映される）。

リビジョンデータを削除するとなると、直接データベースを操作する必要があります。ですのでデータベースをいじるのに抵抗がある場合や、すでにある程度のコンテンツ数がある場合はプラグインを使って削除する方が安全で簡単な方法ではあります。

ワードプレス導入後すぐに設定するなら、wp-config.phpファイルを編集する方が余計にプラグインを使わないのでおすすめです。
参考：ワードプレスのリビジョンの停止や制限、自動保存の停止や設定の方法

Optimize Database after Deleting Revisionsの導入方法

Optimize Database after Deleting Revisionsの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「Optimize Database after Deleting Revisions」で検索。「いますぐインストール」をクリックし、有効化します。

ツール欄からインストールされてるか確認

インストールを完了すると、管理画面左メニューのツール欄に「Optimize Database」が追加されていればOKです。クリックして詳細を確認しましょう。

Optimize Database after Deleting Revisionsの使い方

Optimize Database after Deleting Revisionsの使い方はかなりシンプルです。確認していきましょう。

1. 必ずバックアップを！

Optimize Database after Deleting Revisionsを使う前に、必ず事前にデータのバックアップを取っておきましょう！もし不具合が起きても前の環境に戻すことが可能です。

バックアップには下記のプラグインがおすすめです ↓

2022.02.22

2. リビジョンの削除設定

「Delete revisions for the following (custom) post type(s):」とあるので、チェックした項目のリビジョンが削除されます。

実際に設定した項目については、上記を参考にしてみてください。

post	記事ページのリビジョン削除
page	固定ページのリビジョン削除
user_request	カスタム投稿のリビジョン削除
wp_block	ブロックのリビジョン削除
amn_mi-lite	カスタム投稿（プラグイン：MonsterInsights）のリビジョン削除
post_lp	カスタム投稿（テーマ：：Stork生成のランディングページ）のリビジョン削除
Delete revisions older than	指定期間前のリビジョン削除
Maximum number of – most recent – revisions to keep per post / page	保存するリビジョンの最大数を指定

保存するリビジョンの最大数もお好みで設定できますが、僕は5に設定しています。リビジョンを全く使わない人は0（つまりリビジョンを保存しない）も設定できますが、万が一の時に備えて数回程度は設定しておくといいかと思います。

また特定のテーマやプラグインを使っていると、それらの項目が生成するカスタム投稿タイプも表示されるようです。ですので上記項目はWordPressの動作環境によっても異なるかなと思います。

3. 不要データの削除とその他の設定

チェックすると不要なデータを削除することができます。僕は下記の項目にチェックを入れています。

Delete trashed items	ゴミ箱のデータ削除
Delete spammed items	スパム項目の削除
Delete unused tags	未使用タグの削除
Clear oEmbed cache	oEmbedキャッシュの削除
Keep a log	ログを保持する
Scheduler	最適化を自動実行する間隔
Time	自動実行のタイミング
Show ‘1-click’ link in Admin Bar*	管理画面（へッダー）に項目追加
Show an icon in the Admin Menu*	管理画面（サイドバー）にアイコン追加

必要な項目にチェックを入れ、「Save Settings」ボタンをクリックし設定を保存。「Go to Optimizer」をクリックし実行するだけです！

4. データベース最適化の実行

するとこちらの画面に移るので、詳細な結果を確認したい場合は「Optimize（detail）」、簡単に結果のサマリーが欲しい場合は「Optimize（Summary）」をクリックします。

最適化された結果が表示されました。57記事のリビジョンが削除されたようです。

【Cleaning Database】
REVISIONS deleted: 57
TRASHED ITEMS deleted: 1
No SPAMMED ITEMS found to delete
OEMBED CACHE ITEMS deleted: 7

【Savings】
BEFORE optimization 34.141 MB
AFTER optimization 34.141 MB
SAVINGS THIS TIME 0 KB
TOTAL SAVINGS SINCE THE FIRST RUN 0 KB

ログも合わせて確認すると、57記事でトータル645ものリビジョンを削除してくれたみたいです。結構溜まっていたようなのでスッキリ。

データベースのサイズはあまり変わっていない？ようです。645ものリビジョンを削除したのに謎ですが……。
とにかく不要なデータは削除してもらえたようです。

リビジョン削除にはプラグインを有効活用しよう！

WordPressのリビジョンや不要データを削除しデータベースを最適化したいのであれば、Optimize Database after Deleting Revisionsは簡単に設定・実行できるおすすめなプラグインです。

ぜひWordPressでサイトを運営している方は参考にいただけると幸いです。
最後までお読みいただきありがとうございます！

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

The post リビジョン削除のWordPressプラグインOptimize Database after Deleting Revisionsの使い方まとめ first appeared on Tekito style.me.

Scripts-To-Footerの使い方・設定方法まとめ！JSをフッターに一括移動できるプラグイン

やすのり — Sun, 15 Sep 2019 08:35:54 +0000

やすのり

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

WordPressのサイトスピード対策として、JavascriptやCSSなどのリソースの読み込みを遅らせる方法があります。

そこで便利なプラグインが「Scripts-To-Footer」。JavaScriptをフッターで読み込ませることで、サイトの表示速度を改善できます。

今回はScripts-To-Footerの使い方や注意点などを解説していくので、WordPressのサイトスピード改善を検討している方はチェックしてみてください。

Scripts-To-Footerってどんなプラグイン？

Scripts-To-Footerは名前の通り、Javascriptを一括でサイトフッター（bodyタグの直前）で読み込ませることができるWordPressプラグイン。レンダリングで重要度の高いソースコードを先に表示し、クリティカルでないJSを後で読み込むことでサイトの表示速度を改善できます。

レンダリングをブロックしているリソースの記述箇所を、プラグインを導入するだけでコードを修正せずにまとめて簡単に移動できます。

最近のワードプレステーマはデフォルトで上記対策をしていることも多いですが、プラグインや計測ツールなど色々導入していると、知らず知らずのうちにレンダリングの妨げになっていることも多いです。

利用するプラグインが多くなればそれだけサイトが重くなるので、できればScripts-To-Footerを利用せずに自分でソースコードを調整した方が良い感じではあります。ですが自分でソースコードをいじれない方や、プラグインを入れ変えるたびに管理するのが手間な方にとってはとても便利なプラグインでしょう。

Scripts To Footer

実際にPageSpeed Insightで確認してみると

Googleが提供するサイトスピード計測ができる「PageSpeed Insight」で確認してみると、下記の改善アドバイスを確認できました。

「レンダリングを妨げるリソースの除外」
ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。
PageSpeed Insight

指摘されたのは上記のようなファイルですね。JSを使っているプラグインや計測ツールの他に、子テーマのCSS、font-awesomeなど。

Googleさんから重要度の低いリソースは後で読み込め、と言われればそれに従うまでです……！

Scripts-To-Footerの導入方法

Scripts-To-Footerの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「Scripts-To-Footer」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

インストールを完了すると、管理画面の設定欄に「Scripts-To-Footer」が追加されていればOKです。クリックして詳細を確認しましょう。

Scripts-To-Footerの使い方

Scripts-To-Footerの使い方はかなりシンプルです。基本的にプラグインを導入したら、すぐにスクリプトをフッターに移動してくれます。

「Select which templates should not have scripts moved to the footer:」とあるので、JSをフッターに移動したくないページの場合はチェックを入れる感じですね。

Blog Page（記事ページ）
Search Results（検索結果ページ）
404 pages（404ページ）
Post Type Archives（記事アーカイブページ）
Taxonomy Archives（分類ページ ex タグ、カテゴリ）
Author Archives（投稿者アーカイブページ）
Other Archive Pages（その他アーカイブ）

ただし基本的にチェックをつけず、全てのページを対象にして良いかと思います。

ちなみに記事投稿・編集ページから、個別の記事ごとにプラグインのオン・オフも指定することが可能です。あまり利用機会はなさそうですが、固定ページをゴリゴリJSでいじる場合などでは使えるかも。

Scripts-To-Footerの注意事項

Scripts-To-FooterでJSを全てフッターに移動すると、予期しないエラーが起こるケースがあります。Javascriptをゴリゴリ使っているページで、JSの読み込みを遅らせるとサイトの挙動に影響でそうなページがあれば、上記した除外項目に個別にチェックをつけましょう！

またWordPressはjQueryが使われているプラグインやテーマが多いので、全てのスクリプトを後回しで読み込むとプログラムが動作しなくなることもあります。アニメーションが動かなくなったり、スクロールができなくなったり、ボタンが機能しなくなったり。

そうしたエラーが発生した場合は「Keep jQuery in the Header」にチェックをすれば、jQueryのみを移動対象から除外することができます。

実際に現在僕が使っているWordPressテーマ「stork」と相性が悪いようで、調べたところデザインが崩れたり、コンテンツが非表示になるブロガーさんもいたようです。

僕もプラグインを起動したら、TOPページの記事スライダーが消失しました（汗）。ですが「Keep jQuery in the Header」にチェックをつけたら正常に動作しましたよ！

Scripts-To-Footerを導入した後は、サイトのどこかでエラーが発生していないか、動作に問題ないかを必ずチェックしておくことをおすすめします。

Scripts-To-Footerを有効活用しよう！

サイトスピード対策で、さくっとJSをフッターに移動してレンダリング速度を上げたいのであれば、Scripts-To-Footerは簡単に導入できておすすめなプラグインです。

ただし導入後はサイト上でエラーが起きていないか、必ず確認しましょう。できればデータのバックアップも取っておくとより安心です。

バックアップについては下記のプラグイン「UpdraftPlus」がおすすめです↓

2022.02.22

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

The post Scripts-To-Footerの使い方・設定方法まとめ！JSをフッターに一括移動できるプラグイン first appeared on Tekito style.me.

WordPressプラグイン | Tekito style.me

記事リストの抽出に便利！WPプラグイン「Export All URLs」の使い方・設定方法まとめ

WordPressプラグイン「Export All URLs」とは？

Export All URLsの導入方法

インストールと有効化

設定欄からインストールされてるか確認

Export All URLsの基本的な使い方

（1）取得するデータ項目の設定

Select a Post Type to Extract Data:

Additional Data:

Post Status:

（2）データのエクスポート

Export All URLsの注意点

Export All URLsの詳細な設定方法

Show Filter Options

Show Advanced Options

CSVファイルの設定について

記事リストを作るならExport All URLsを活用しよう

WPプラグインShow Current Templateの使い方・設定方法【閲覧中のテンプレートが分かる】

Show Current Templateってどんなプラグイン？

Show Current Templateの導入方法

インストールと有効化

Show Current Templateの使い方

FTPソフトでソースコードを実際に修正する方法

大きな修正や重要ファイルをいじる場合は要注意

Show Current Templateを有効活用しよう！

おすすめ＆定番のWordPressプラグイン12選まとめ

セキュリティ対策・データ保守でおすすめのプラグイン

1. セキュリティ対策でおすすめ「SiteGuard WP Plugin」

2. データのバックアップなら「UpdraftPlus」

SEO対策・CTR改善でおすすめのプラグイン

3. SEO対策はこれでOK「All In One SEO Pack」

4. サイトマップを手軽に作成「Google XML Sitemaps」

5. 広告挿入を最適化するプラグイン「Ad Inserter」

6. Aurora Heatmap

ユーザビリティ・サイトスピード改善でおすすめのプラグイン

7. 目次を自動生成するプラグイン「Table of Contents Plus」

8. リビジョン削除でおすすめ！「Optimize Database after Deleting Revisions」

9. 画像圧縮・最適化プラグイン「EWWW Image Optimizer」

10. CSSやJSを最適化する「Autoptimize」

11. 画像の遅延読み込みができる「BJ Lazy Load」

12. キャッシュ改善の定番「WP Fastest Cache」

補足：その他サイト運営で便利なプラグイン

HTMLタグをハイライト！「HTML Editor Syntax Highlighter」

SNSのシェアカウントがわかる「SNS Count Cache」

テキストやリンクを一括で置換「Search Regex」

リダイレクトするなら「Redirection」

PHPバージョン管理に便利「PHP Compatibility Checker」

カスタマイズで便利「Show Current Template」

記事リストの抽出に便利「Export All URLs」

おすすめなWordPressプラグインまとめ

WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

そもそもサイトスピードが遅いと何が問題なのか？

そもそもどれくらいのスピードであればいいのか？

サイトスピード改善の背景と改善前のデータ

実際にスピード改善をやってみた！施策とその結果をまとめていきます

1. 余計なWordpressプラグインを削除する

サイトスピード スコア結果

2. WordPressに溜まったゴミデータの削除

サイトスピード スコア結果

3. 画像の負担を軽量化・最適化する

サイトスピード スコア結果

4. PHPのバージョンを最新に

サイトスピード スコア結果

5. 最新の画像フォーマット「WebP」に対応する

サイトスピード スコア結果

6. 画像の遅延読み込み

サイトスピード スコア結果

7. JavaScriptをフッターで読み込む

サイトスピード スコア結果

8. CSSやJSなどの軽量化

サイトスピード スコア結果

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

サイトスピード スコア結果

10. サーバーのキャッシュ改善

サイトスピード スコア結果

11. 余計なウィジットや広告を取り除く

サイトスピード スコア結果

12. 個別の画像調整

サイトスピード スコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果

サイトスピードスコア結果