プリロードとは?調整はどうしたらいいの?【ブログ】 | Tac LIFE academy

プリロードとは?調整はどうしたらいいの?【ブログ】

ブログ

 

以下過去記事

スポンサーリンク

キーリクエストのプリロード

プリロードとは?

<link> 要素の rel 属性で preload を指定すると、 HTML の <head> 要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。

https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

PageSpeed Insightsへ戻り、問題のあるURLを右クリック➡リンクのアドレスをコピー

キー リクエストのプリロードの改善設定

header.phpに追記

 

どこに追記していいかよくわかりませんでしたが、真ん中あたりに追記。

⑤header.phpに追記

 

ソースコードはこんな感じ。私はwebフォントの設定なのでこんな感じですが、人によってここは違うかも。

<!-- 編集部分 -->
<link rel="preload" as="font" type="font/woff" href="(問題のあったURLを貼り付けます。 https://syopur・・・)" crossorigin>

 

以上で設定は完了です。

a3 Lazy Loadとは?

a3 Lazy Loadというプラグインは、画像の表示を遅らせるプラグインになります。

通常は、読者がページにランディングしたら、その瞬間にテキストや画像などを同時に表示しようとします。

でも、a3 Lazy Loadは読者が画像のある手前に来た瞬間に読み込みを開始して、表示してくれるので最初にランディングした際はテキストだけを表示すればよくなるわけですね。

だから、表示スピードがアップします。

画像を遅延読み込みできるa3 Lazy Loadの設定と使い方 | KClubマーケティング
WordPress記事の画像を遅延で表示させると記事全体の表示スピードが改善されるということを聞いて、a3 Lazy Loadプラグインのインストールを検討していると思います。この記事では、そんなa3 Lazy Loadの設定の仕方をご紹介していきます。

サムネイルの再生成

Cocoonを利用する際に是非行って欲しい画像設定5つ
Cocoonを利用する上で、忘れがちな画像の設定をまとめてみました。これらを設定することで、少しでもサイトを綺麗に見せることができて、覚えてもらいやすくなると思います。

Regenerate Thumbnailsプラグインを用いたサムネイルの再生成方法の説明です。

プラグインのインストール

サムネイルの再生成を行うには、Regenerate Thumbnailsプラグインが必要になります。

WordPress管理画面から「プラグインを追加」画面を開いて「Regenerate Thumbnails」で検索し、出来たプラグインをインストールし有効化してください。

「Cocoonを利用する上で細かな画像設定を最適化する方法」を紹介したいと思います。

テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える)
Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。

過去の流れ

 

サイト高速化のための基本設定【Cocoon】
こんにちはTac^^です。 無料で使える超ハイクオリティーのワードプレスのテーマ、Cocoon。 余分な要素を取り除き、高速表示を実現した同テーマですが、環境によっては遅くなることがあ...

 

WebP変換。次世代フォーマットで高速化EWWW Image Optimizerプラグイン
こんにちはTac^^です。 前回 で紹介しましたがモバイルの表示が極端に遅く改善をしようとしました。 色々調べてみると画像の最適化が不足していたことと細かいことで多少ですが改善したの...

 

表示速度遅いモバイルの改善方法。サイト高速化設定【Cocoon】
こんにちはTac^^です。 PageSpeed Insightsが新しくなってモバイルの評価が著しく低下 30台までになりました。 といことで改善策をまとめました。 ちなみに無料最...

コメント

タイトルとURLをコピーしました