ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5, プレビュー表示が遅いのを直す。無駄をなくす作業。

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPressのバージョン5の編集エディタgutenbergには『プレビュー』ボタンがあります。

ページの確認(正式なページではない)ができるのですが、『プレビューを生成中...』で止まってなかなか表示されません。

これまで我慢してきたのですが、やっと解決方法が見つかりました。

光など屋内のふつうのネットワーク環境では起きません。スマホで作業するなど環境が悪いときの話です。

gutenbergにはプレビューを表示する方法が二つあります。ひとつは、

『公開する』『更新する』ボタンのとなり。

もうひとつは、

右のオプション設定の『文書タブ』->『パーマリンク』のプレビューURLリンク。

ただし、URLリンクは公開済みのとき公開しているページがそのまま表示されます。

これを繰り返すと、GoogleアナリティクスなどのPV数が自分の操作で増えます。正確な数字ではなくなります。あまり使うものではありません。

そのためにgutenbergでは『プレビュー』ボタンが追加されたのですが、ボタンを押しても『プレビューを生成中...』のままです。ずーっと。

あまりに表示がおそいので、しょうがなくURLリンクで我慢していたのですが、やっと解決方法が見つかりました。

犯人はCSSです。

プレビューボタンで表示するページは、期間限定の非公開ページです。Google アナリティクスなどには影響しません。

プレビューボタンの機能はすぐれものです。

プレビューページを開いたまま、編集画面で『下書きとして保存』『更新する』で保存すると、プレビューページが自動的にリロードされます。

編集画面とは別ウィンドウでプレビューを開いて内容を確認しながら作業することができます。

URLリンクのプレビューではできません。自動保存でもプレビューはリロードされます。

(追記)

WP5.5では自動リロードは廃止されました。ブラウザでの更新が必要です。

プレビューって処理の負荷が高い?

CSSの話へいく前にひとつ。

gutenbergではページを作成するのに、

  • ブロックの集合で編集。
  • 保存するときに各ブロックのJavaScriptが処理をしてHTMLを作成・保存。
  • 保存されたHTMLを使ってページを表示。

という流れがありますが、プレビューボタンを押したときはこのように動きます。

  • とりあえずプレビューページを表示。
  • 『プレビューを生成中...』にしとく。
  • 編集画面の内容をHTMLに変換して保存。(JavaScript)
  • プレビューページを保存したHTMLでリロード。

ブロックのJavaScriptのHTML作成が終わるまで、『プレビューを生成中』で止まります。

プレビューは、編集内容の量(=ブロックの量)が多ければ表示が遅くなります。

300字くらいならすぐに出ますが、5000字くらいになると十数秒ほどかかることもあります。

CSSのサイズを小さくする

ぼくは子テーマを使っています。親テーマのCSS設定を子テーマのCSSで上書きしています。

もちろん上書きなので二つのstyle.cssのサイズで大きくなります。120Kバイトくらい。

これを84Kバイトまで小さくしました。別件で気になることがあったので、CSSの内容を見直したからです。

子テーマstyle.cssの上書きをやめ、親テーマのstyle.cssの設定を全部消して、スタイルの設定は子テーマでする作業。

そうしたらプレビューの表示速度が一気に上がりました。

理由は分かりません。『JavaScriptとどういう関係が?』と思いますが、何かあるのでしょう。

とりあえず、プレビューが遅いときはためしてみてください。

CSSのサイズが小さいことは良いことです。ページの表示速度にも影響するのでやって損はないです。

親テーマの先頭のコメントは消してはいけません。

親テーマのstyle.css
/*   
Theme Name: Sample Theme
Theme URI: http://sample.jp/
Description: Sample Theme 
Author: sample
Author URI: http://sample.com/
Version: 0.1.0
*/

この部分はWordPressがテーマを読み込むときに使います。

親テーマの読み込みに失敗すると、子テーマも読み込めないのでページが正常に表示できません。

もちろん、子テーマのコメントも同じです。

前の投稿
WordPress5, 再利用ブロックが表示されない!なんで?
WordPress5, 記事をサクサク書くならMarkdown記法とショートカットを使う
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す

*