wordpressの高速化

前提・実現したいこと

wordpressの速度を改善したい

発生している問題・エラーメッセージ

Pagespeed Insightの計測でモバイル9、パソコン48と極めて遅いことが判明しました。

エラーメッセージ
<link rel=preload> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。

該当のソースコード

ソースコード

試したこと

header/phpの<head>と</head>の間に

補足情報（FW/ツールのバージョンなど）

使用しているテーマはgalway liteです。
モバイルの診断では他の改善項目として以下が挙げられています。
使用していないCSSの削除、レンダリングを妨げるリソースの除外、テキスト圧縮の有効化、CSSの最小化

miyabi_pudding

2020/03/13 14:06 編集

ぼ、膨大な量の内容になるため、回答しようがありません・・・。また、ソースコードの掲示なしに（記載されてるコードだけでは情報が少なすぎる）解決は絶対無理です。そして、掲示していただいても、teratailで質問する、回答を受ける範疇を遥かに凌駕しています。 SEO会社に作業依頼してもおかしくない内容です。それくらい、PageSpeed Insightsで高得点を取るには、膨大な量の研究と執念と時間を要します。その、レンダリングブロックリソースの削除の時点でかなり技がいります。 WordPressなら尚更です。それでも、回答を得たいと言うなら、方法の模索だけの回答になりますが、それなら可能ですが・・・。

kojitintin

2020/03/14 01:17

miyabi_takatsuk様お返事ありがとうございます。どうやらとんでもない依頼をしてしまったようですね。まったくの素人とはいえルール違反なんでしょうね。ごめんなさいね。 “方法の模索だけの回答”をしていただけるならとても助かります。とにかくどう調べていいやらわからないものですから。お手すきのときでけっこうですのでよろしくお願いいたします。他のユーザーの皆様ご指摘ありがとうございます。質問の立て方から自分なりに勉強してみますね。

行動規範の内容に同意します

回答3件

サイトの重さの原因ランキングと対処

1 日本語フォントのWEBフォント
日本語フォントのWEBフォントを３書体ぐらい使うとそれだけで50点ぐらい落ちる
WEBフォントのサービスは無駄な文字のデータを読まないように
サブセットの生成をしてくれてるのだけどこれがコスト
あらかじめ標準文字のみのサブセットのwoffを作ってそれを読み込むようにし
尚且つ書体は１書体まで絞ってしまおう

2 画像
Optimizerを使って画像の容量を抑えたりLazyLoadしたりで対処しよう
あとsrcsetを使ってデバイスの解像度に応じて無駄に高解像度な画像を読み込まないようにする
透過がないのに無駄にpngな画像はjpgに、
svgでもいけそうなアイコンとかロゴとかはsvgにしていこう

3 css
box-shadow text-shadow opacity filter flex transform
などといったものは結構レンダリングコストが高い
シングルページサイトなんかで多用してると30点は落ちる
LazyLoadみたいな感じにスクロールが到達するまでdisplay:noneにするとかすると
とりあえずページ読み込み時のレンダリングコストは下げられる
visibility:hiddenでは見えなくてもレンダリングされてるのでダメ

投稿2020/03/14 01:55

KazuhiroHatano

総合スコア7804

kojitintin

2020/03/15 05:04

KazuhiroHatano様回答ありがとうございます。フォントについては全く考えていませんでした。早速調べてみます。画像関係は一応LazyLoadで対処しているのですが、「pngをjpgに」これはやっていませんでした。見直してみることにします。 css。これは不勉強で本当にわかりません。頂いたキーワードで検索しながら気長にやってみることにします。お返事遅くなってゴメンナサイ。ありがとうございます。

行動規範の内容に同意します

WordPress の高速化の華と言ったら、キャッシュ戦略だと思います！

。。。Pagespeed Insight のスコアが評価基準だと、あんまり効果見えないかもしれないですけどね＾＾；

投稿2020/03/15 08:09

退会済みユーザー

総合スコア0

miyabi_pudding

2020/03/15 09:40

キャッシュ、まぁまぁ打点高いですよーキャッシュ処理しっかりしたら、10点くらい上がった記憶が。

退会済みユーザー

2020/03/15 12:54

10 点かぁ。。。まぁまぁだね。

行動規範の内容に同意します

ベストアンサー

以下、以前私がレンダリングブロックリソースの削除に関して行った施策です。

外部（HTML外の意）CSS、JavaScriptを、サーバーサイドでファイル読み込みし、HTMLのインラインに挿入するように修正
ファーストビュー外のCSSは、JSにより遅延読み込み
ファーストビュー外画像はスクロールで読み込み遅延するよう、JS処理

下二点は、ライブラリなどはありますので、見つけれればそこまで難しくはないかと思います。

上記で、20〜30点以上は稼いだ記憶があります。

WordPressだと、どこまでできるかは、使ってるテーマなどにより、変わってくるかと思いますが、なんやかんやでやる方法はあります。

投稿2020/03/15 09:53

miyabi_pudding

総合スコア9528

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！