WordPressを高速化Autoptimizeとは?Autoptimizeは、HTML、JavaScript(js)、CSSファイルを圧縮し、WordPressの画面表示の高速化に役立ちます。HTMLのソースコードですが、こんな感じで余計なスペースや改行、HTMLのコメントなどを削除することで表示スピードを改善します。空行やコメントなどは、我々が見やすくなるために必要なものですが、ブラウザが解釈するためには必要ないだけではなく、処理スピードを遅くする無駄なものですので、それを削除して画面表示を高速化しましょう、というものですね。「高速化するために、記事内の改行をなるべく減らすようにしています」ということを書いていた方もいましたが、記事の読みやすさにつながる適度な改行や段落間の行間などをなくしてしまっては本末転倒です。Autoptimizeを使ってブラウザが理解しやすいように圧縮しましょう、というものです。CSSなども圧縮されます。Insightsにおけるスコアの向上が見込まれます。Autoptimizeを使う上での注意点Autoptimizeは、基本設定だけでは十分な結果が得られない場合があります。表示が崩れる場合もあります。基本設定に加えて、拡張設定についても含めてよく読んでいただいて、設定を変えながらベストな設定を見つけてください。思いどおりのホームページを作ろう!Autoptimizeのインストール方法WordPressのプラグインのインストール方法は、「WordPressプラグインの3つのインストール方法解説」に記事を書いていますので、そちらを参考にしてください。「設定」-「Autoptimize」で設定画面に遷移します。デフォルトでは全てチェックが外れていますので、何も圧縮されていない状態になっています。書いていますので、続けて確認をしてください。Autoptimizeの処理対象にするかの設定です。Code?HTMLを対象にする場合にチェックを入れます。HTMLのコメントを残す場合はチェックを入れます。テキスト量を減らすためにチェックを外しておく方がいいのですが、AdSenseの処理を正しく動かすためにはチェックを入れてコメントを残す必要があるようです。Autoptimizeの処理対象にするかの設定です。Code?JavaScriptを対象にする場合にチェックを入れます。Autoptimizeの処理対象にするかの設定です。Code?CSSを対象にする場合にチェックを入れます。schemeを利用するか否かの設定です。httpリクエストが減るので処理スピードが速くなる可能性があります。そのため、不具合がなければチェックを入れておくといいでしょう。OptionsCDNを利用する場合の設定です。Autoptimizeの拡張設定Autoptimizeには基本設定に加え、拡張設定を行うことでより効果を発揮する、もしくは、不具合が起こらないようにすることができます。settings」をクリックすると設定項目が表示されます。基本設定の項目に加えて拡張設定が表示されるようになっていますが、ここでは「拡張設定」で追加になった項目だけ説明します。<head>の中に含めるか否かの設定です。JavaScriptを編集しますが、不具合が起こる場合もあります。jQueryベースで作られたテーマの場合は。<head>に編集することで不具合を解消しようと試みるということですね。このエス技研ブログの環境では、Amazonのウィジェット、ヴァリューコマースのアフィリエイトのバナーが、フッターに表示されたり、二重に表示されたり、表示されなかったりしましたので、ここにチェックを入れて不具合を解消させました。下記のオプションにも含めてチェックを入れると不具合が解消する場合が多いようです。JavaScriptのみ圧縮処理をするか否かの設定です。説明では「前のオプション設定との組み合わせで、jQueryベースのテンプレートでも有効に機能する可能性が高いでしょう。」ということですので、デフォルトの設定で不具合が起こっている場合は、ひとつ前のオプションを含めて切り替えながら試してみるといいでしょう。Autoptimize不具合が起こっているプラグインなど、Autoptimizeの処理を実行したくないスクリプトがある場合は、ここで具体的に設定します。不具合がない場合は特に変更する必要はありません。try-catch処理を追加するか否かの設定です。スクリプトのエラーが発生している場合などはここにチェックを入れて試してみましょう。CSSだけに限る場合はチェックを入れます。通常はチェックを入れる必要はありませんが、不具合が起こる場合やカスタマイズをする場合にチェックを入れるといいでしょう。CSS」をする場合にチェックを入れます。CSSを入力していきます。CSSで、それ以外はページを表示させながら読み込むようにします。FAQ」をチェックしてくださいとありまして、そこには下記のように書いてあります。CSSはドキュメントの先頭に置く必要があります。CSSはインライン化し、本質的でない(装飾的な)CSSは後から読み込むことを推奨するようになりました。これは、モバイルデバイス上で可能な限り迅速にページを表示することが重要だからです。1.9.0からこれに簡単に対応できるようになりました。CSSを入力ボックスに入力するだけであなたの希望通りに設定できます。CSSを選んで編集していくといいでしょう。Googleの解説も参考になるでしょう。CSSをインライン化する場合はチェックを入れます。CSS」の項目とは排他制御になっています。CSS」にチェックを入れます。CSSまでインライン化してしまうと遅くなる場合がありますので、表示スピードのチェックをしながら設定を確認するといいでしょう。Autoptimizeで最適化から除外する場合に設定します。Infoキャッシュに関する情報が編集されています。folderAutoptimizeが利用するキャッシュ情報が保存されているフォルダが記載されています。write?書き込み可能になっているかが記載されています。CSS、JavaScriptの数が記載されています。CSSを静的ファイルとして保存するかどうかの設定です。チェックが入っていない場合は、キャッシュは「****.php」という動的な形式で処理され、チェックを入れると「****.js」「****.css」のような静的な形式で処理されます。チェックを入れる、外すで表示の崩れの有無と表示スピードを確認し、よりいい状態を選択するといいでしょう。ここのチェックの状態を変更するとキャッシュがクリアされますので、キャッシュをクリアしたい場合に使うのもいいかも知れません。Insightsでの結果は、微増という感じで、誤差範囲とも言えるレベルの変化でした。「HTMLを縮小する」「CSSを縮小する」の指摘はなくなりましたので、スピードは速くはなっていないものの、効果はあると思われます。排除する」「JavaScriptを縮小する」には効果がありませんでした。JavaScript、CSSを切り分け、細かく設定していく必要がありそうです。CSSの記述の内容を変更しますので、利用しているテーマ、プラグインの設定に影響を与える場合があります。headタグの中に編集したり、bodyタグの最後の方に編集したりしながら高速化を図るようになっていますので、プラグインやテーマ、AdSenseやアフィリエイトのタグなどに影響を与えてしまいます。そのため、基本設定だけで終わらせるのではなく、拡張設定も含めて調整を行い、不具合なく表示される状態、および、より高速になる設定を見つける必要があります。使用しているテーマやプラグイン、アフィリエイトによって環境が異なりますので、これがおススメの設定です!と言えないのが残念ですが、掛けた手間の分だけスピードも速くなると思いますので、チャレンジしていきましょう。Stinger5を使っていますが、Stinger5でも全く不具合はありません。Stinger5+Autoptimizeで不具合があるとの報告をしている方もいましたが、Stinger5との相性の問題ではなく、利用している何かしらのプラグインとの問題だと思われ、拡張設定を行うことでほとんどの問題は対応できると思います。Autoptimizeのおまけ最後に、設定画面の右側にある下記のエリアは、Autoptimizeを作った方の他のプラグインも試してみませんか、というアピールのエリアですね。興味を持つプラグインがあれば試してみるのもよさそうですね。WordPressの高速化施策として「WordPressの高速化でSEO対策!広告費も削減!高速化の施策のまとめ」にまとめ記事を書いていますので、あわせて参考にしてみてください。WordPressGoogleAdwordsGoogleAdwords最後までお読みいただきましてありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト下記の空欄を埋めてください。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)※入力いただいたコメントは管理者の承認後に掲載されます。関連記事DuplicatorでWordPressを簡単引越し!インストーラー付のバックアップにもWordPressの引越しや開発環境から本番環境への移行など他の環境に移す作業を簡単にしてくれるプラグインの紹介。インストーラー付のバックアップツールとしても使る。WordPressグローバルナビ・メニューの編集の方法解説グローバルナビであるメニューの編集方法の解説です。メニューの管理画面の使い方の解説と設定のポイント、テーマによって設定する項目が違う点などを解説します。BackWPupでバックアップ・全体バックアップ具体的設定例BackWPupその7。ファイル、DB全体をバックアップする具体的事例での説明です。WP-DBMANAGERデータベースを管理するための強い見方のプラグイン「WP-DBMANAGER」の使い方の説明です。基本設定の一つであるパーマリンクの設定について解説。パーマリンクはURLを決定づける重要な項目ですので、設定の意味を理解して希望するURLになるよう設定しましょう。BackWPupでWordPress以外のファイル、データベースをバックアップBackWPupその10。BackWPupはWordPressのバックアップ用のプラグインですが、WordPress以外のテーブルやファイルをバックアップする方法の解説です。Manager」を使って設定します。その使い方の解説です。WordPressのコメントスパム対策をするコメントスパム対策として入力させない対策の一つとしてCAPTCHAという方法がありそれを簡単に実装できるプラグインCaptchaの解説です。WordPressのカテゴリの編集の解説WordPressのカテゴリって何?というところから説明し、カテゴリを登録、編集する方法を解説します。カテゴリの順番を自由に変える方法も解説します。小学校でプログラミングの授業が始まる。プログラムを組むことを覚えることが本質ではなく理論的な手順の組み立てのトレーニングをする授業という理解が必要だと思う。Parserを使ってスクレイピングをする方法を解説。インストール方法、読み込み方法。具体的なスクレイピングを実行するサンプルソースも。Parser」の使い方を解説。要素を取得する方法、そこから属性を取得する方法を解説。マニュアルにはない注意点なども解説。2020.01.27PHPでスクレイピング。スクレイピング」で検索すると「phpQuery」ばかりヒットするが、10年以上も放置されている。Parser」をオススメする。2020.01.26PHPのcURLでAPIやWebサイトへのアクセス方法。file_get_contentsとの比較PHPからWebサイトにアクセスしてHTMLを取得、APIにアクセスして情報を取得する場合は、cURLがオススメ。file_get_contentsでも可能だがエラー制御に難がありトラブルのもとになる。add_shortcode関数を使ったショートコードという機能を利用します。不正なコピーコンテンツからの直リンクを拒否する.htaccessの設定方法。拒否するサイトを指定、許可するサイトを指定する方法、単純な拒否と画像の差し替えを解説。口コミサイトを作るために必要な評価点、レビューを投稿できるプラグインを探して評価。10プラグインをチェックし、8プラグインは詳細解説付き。2014.07.17BackWPupでバックアップ・リストア(復元)の具体的手順BackWPupその9。バックアップファイルからのリストア(復元)の手順です。109キーボード)は日本人サイズのキーボード。ショートカットも押しやすく女性や子供にも優しいサイズ。Web開発・運用に役立つ記事を中心に紹介しています。