WordPress5 プレビュー表示がおそいとき

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
wordpress image
イラストACの画像をもとに加工しています。

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

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

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

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

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

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

もうひとつは

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

です。

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

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

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

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

犯人はCSSです。

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

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

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

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

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

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

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のサイズが小さいことは良いことです。ページの表示速度にも影響するのでやって損はないです。

-> WordPressの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プログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

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

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


WordPressの本7選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!