PR

【WordPress】font-displayの警告は、ページ表示速度が原因だった。

PageSpeedInsightで、初めて見る警告が表示される様になりました。「警告」なのでほっておくこともできず、色々と調べてみましたが、この警告がどうしても消せずにいました。

WordPress PageSpeedInsightsの警告

使っているテーマはCocoonですので、フォーラムを検索すると同じような現象があり、その原因がfontwesome4の読み込み記述の問題ということで、色々とやってみましたが、原因が異なる様で、警告を消すことはできませんでした。
警告を消せないまま、毎日同じページをPageSpeedInsightで計測していると、同じページなのに警告が表示される時と表示されない時があることに気づき、これはページの表示速度が遅い場合に表示されているのではないかと思い、遅い原因であるyoutubeの動画を埋め込みからリンクに切り替えてみました。すると、警告がでなくなり、パフォーマンスも向上しました。安易に動画をあちこちに埋め込んでいましたので、読み込みスピードが遅くなり、タイムアウトのような状況だったのでしょう。
動画の埋め込みは要注意です。

スポンサーリンク

ブログ記事①

現象

PageSpeedInsightで、次の警告が表示された。

WordPress PageSpeedInsightsの警告

携帯

WordPress PageSpeedInsightsの携帯の計測値

デスクトップ

WordPress PageSpeedInsightsのデスクトップの計測値

原因

youtubeの動画を埋め込んでいた為、ページ表示速度が遅かったことが原因と考えられます。

対策

動画の埋め込みを止め、リンクに変えます。

動画の削除

記事の中に埋め込んだ動画を削除します。

WordPress cocoon 記事内の動画の削除

動画のリンク

動画の埋め込みに変えて、リンクを貼ります。

クラッシックブロックの選択
WordPress Cocoon ブログでクラシックブロックの選択
リンクの貼り付け
WordPress Cocoon ブログでリンクの貼り付け

「こちら」の文字列を選択して、「リンク」をクリックすると、URL入力欄が表示されますので、そこにyoutubeのURLを入力します。

WordPress Cocoon ブログでリンクURLの貼り付け

URLの入力が終われば、「適用」をクリックします。

WordPress Cocoon ブログでリンクURLの貼り付け完了
リンクの確認

記事を更新して、プレビューを確認すると、リンクが貼られているのが確認できます。

WordPress Cocoon ブログのリンク貼り付けの確認

結果

pageSpeedInsightsで計測すると、警告は消え、パフォーマンスも大きく改善されました。

携帯

WordPress PageSpeedInsightsの携帯の計測値

デスクトップ

WordPress PageSpeedInsightsのデスクトップの計測値
スポンサーリンク

ブログ記事②

もうひとつ別のページも見ておきます。

現象

PageSpeedInsightで、次の警告が表示された。

WordPress PageSpeedInsightsの警告

携帯

WordPress PageSpeedInsightsの携帯の計測値

デスクトップ

WordPress PageSpeedInsightsのデスクトップの計測値

原因

youtubeの動画を埋め込んでいた為、ページ表示速度が遅かったことが原因と考えられます。

対策

動画の埋め込みを止め、リンクに変えます。

動画の削除

記事の中に埋め込んだ動画を削除します。

WordPress cocoon 記事内の動画の削除

動画のリンク

動画の埋め込みに変えて、リンクを貼ります。

クラッシックブロックの選択
WordPress Cocoon ブログでクラシックブロックの選択
リンクの貼り付け
WordPress Cocoon ブログでリンクの貼り付け

「こちら」の文字列を選択して、「リンク」をクリックすると、URL入力欄が表示されますので、そこにyoutubeのURLを入力します。

WordPress Cocoon ブログでリンクURLの貼り付け

URLの入力が終われば、「適用」をクリックします。

WordPress Cocoon ブログでリンクURLの貼り付け完了
リンクの確認

記事を更新して、プレビューを確認すると、リンクが貼られているのが確認できます。

WordPress Cocoon ブログのリンク貼り付けの確認

結果

pageSpeedInsightsで計測すると、警告は消え、パフォーマンスも大きく改善されました。

携帯

WordPress PageSpeedInsightsの携帯の計測値

デスクトップ

WordPress PageSpeedInsightsのデスクトップの計測値

その他の記事

さらに、その他のページとして、記事の中で3つの動画を埋め込んでいたページです。

対応前

携帯

WordPress PageSpeedInsightsの携帯の計測値

デスクトップ

WordPress PageSpeedInsightsのデスクトップの計測値

対応後

携帯

WordPress PageSpeedInsightsの対応後の携帯の計測値

デスクトップ

WordPress PageSpeedInsightsの対応後のデスクトップの計測値