未経験から事務職で働くならこちら

モバイル速度が遅いので、表示速度を高速化!PageSpeed Insights設定。

モバイル速度が遅いので、表示速度を高速化!PageSpeed Insights設定。パソコン・スマホ設定
この記事は約20分で読めます。
スポンサーリンク
社労士・FP2級技能士
美山走希

キャリアアドバイザーとして資格と転職について助言している。労働者の不安や悩みを解消し、元気に働いてもらえるようサポートしたい。

美山走希をフォローしよう!

ブログの表示速度が遅いので、改善に動いた。PageSpeed Insightsによるとモバイル速度が25、パソコンの表示速度が80になっている。

パソコンの表示速度に不満はないが、モバイル速度が遅すぎる。モバイルの表示速度がグーグルの検索順位に影響があるのに、このままではいけない。

最終的にモバイルの表示速度89点、パソコン100点になった。

美山走希
美山走希

テーマはCOCOONで、レンタルサーバーはカラフルボックス。これでモバイル速度をアップさせる。(私の備忘録)

桜(販売職)
桜(販売職)

スマートフォンで表示速度が遅いとすぐに離脱するよ。いつ表示されるかわからないのを待ってられないもん。

スポンサーリンク

モバイル速度が遅いので、表示速度を高速化!PageSpeed Insights設定。

レンタルサーバーはカラフルボックスを使っているので、キャッシュ系プラグイン「LiteSpeed Cache」(ライトスピードキャッシュ)を使っている。

今まではLiteSpeed Cacheさえ使ってれば問題ないと思ってたが、高速するにはプラグイン以外の遅延要素も改善しなきゃならない。

なので、LiteSpeed Cache以外での設定や改善点を探した。まずはグーグル・アドセンスがあるとかなり表示速度が遅くなるので対策をねった。

美山走希
美山走希

COCOONの高速化設定は全てにチェックを入れておく。あとは(重複しないよう)LiteSpeed Cacheで設定した。

桜(販売職)
桜(販売職)

COCOON(コクーン)とLiteSpeed Cacheの組み合わせでどれだけ高速化できるかな?

無職休職中にブログ収入を得る方法!暇な時間をお金に変える。
無職になってする事がない。休職中は何をすればいいんだろう?時間はあるけど、お金はない。そんな貴女にブログ収入を得る方法を教える。ブログは文章を作成して他人に読んでもらう事を目標にする。ブログの閲覧数(訪問者)が多ければ多いほど、収入も大きくなる。

モバイル速度の表示速度を高速化!使用していないJavaScriptの削除。

副業はスマホとパソコンで在宅ワーク!無料で稼げるアフィリエイト。

改善できる項目「使用していないJavaScriptの削除」これを改善するにはグーグル・アドセンスを遅延読み込みさせるしかない。

あらかじめCOCOON設定の広告から以下のアドセンスコードを削除する。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

その後、以下のコードをアクセス解析に追加する。

<script>
//<![CDATA[
//lazy load ads
var lazyloadads = false;
window.addEventListener("scroll", function() {
if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
(function() {
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();
lazyloadads = true;
}
}, true)
//]]>
</script>

このソースコードをCOCOON設定→アクセス解析→フッター用コードに入力保存。これでアドセンス広告への対策は終わり。

美山走希
美山走希

それでも「使用していないJavaScriptの削除」としての対策は終わってない。次は本格的に動く。

桜(販売職)
桜(販売職)

ソースコードをコピペできて楽。あらかじめアドセンスの自動広告はオフにしないとね。

ブログ月間4万5千PVの収益は?アフィリエイトで稼げる目安。
ブロガー歴9年、この転職副業生活の運営は5年目。ようやく月間4万5千PVを突破した。ブログで月間4万5千PVだとどれくらい稼げるのか?どうやったら月間4万5千PVになるのかを解説する。結論、月間4万5千PVでは稼げない。渋沢栄一1枚から1.5枚程度のブログ収入。

モバイル速度の表示速度を高速化!レンダリングを妨げるリソースの除外。

楽天証券の口座開設に1ヶ月?郵送不要のマイナンバーカードなら1週間?

結局、PageSpeed Insightsでの点数を下げるのは重要ではない要素が先に読み込まれるから。※この設定は後日削除した。

例えば画像が表示されなくてもテキスト(文章)が先に表示されれば読者は読み進められる。重要じゃない要素は最後(フッター)で読み込ませる。

//レンダリングブロックしているJavascriptの読み込みを遅らせる
function move_scripts_head_to_footer_ex(){
//ヘッダーのスクリプトを取り除く
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);

//フッターにスクリプトを移動する
add_action('wp_footer', 'wp_print_head_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );

add_filter( 'the_content', '_image_dimensioning_filter_content_tags' );
add_filter( 'the_excerpt', '_image_dimensioning_filter_content_tags' );
add_filter( 'the_category_content', '_image_dimensioning_filter_content_tags' );
add_filter( 'the_category_tag_content', '_image_dimensioning_filter_content_tags' );
//add_filter( 'widget_text_content', '_image_dimensioning_filter_content_tags' );

/**
* Filters specific tags in post content and modifies their markup.
*
* @param string $content The HTML content to be filtered.
* @param string $context Optional. Additional context to pass to the filters. Defaults to `current_filter()` when not set.
* @return string Converted content with images modified.
*/
function _image_dimensioning_filter_content_tags( $content, $context = null ) {
if ( null === $context ) {
$context = current_filter();
}

if ( false === strpos( $content, '<img' ) ) {
return $content;
}

if ( ! preg_match_all( '/<img\s[^>]+>/', $content, $matches ) ) {
return $content;
}

$images = array();

foreach ( $matches[0] as $image ) {
if ( preg_match( '/speech-icon-image/i', $image) ) {
$images[ $image ] = 1;
continue;
}

$images[ $image ] = 0;
}

foreach ( $images as $image => $attachment_id ) {
if ( $attachment_id ) {
$size = array();
$filtered_image = $image;

if ( false === strpos( $filtered_image, ' width=' ) && false === strpos( $filtered_image, ' height=' ) ) {

if ( preg_match( '/src\s*=\s*[\"|\'].*?-([0-9]{2,4})x([0-9]{2,4})\.(jpe?g|png|gif)[\"|\']/i', $image, $s ) ) {
$size = array( $s[1], $s[2] );
} else {
$size = array( 100, 100 );
}

if ( $size ) {
$filtered_image = str_replace( '<img', '<img width="' . $size[0] . '" height="' . $size[1] . '"', $filtered_image );
$content = str_replace( $image, $filtered_image, $content );
}
}
}
}

return $content;
}

このソースコードをCOCOON子テーマのfunctions.phpに追記する。これでPageSpeed Insightsからレンダリングを妨げるリソースの除外は消えた。

※上記コードを入力すると「レンダリングを妨げるリソースの除外」は消えるが、ブログカードのファビコンは非表示になる。

ブログカードのファビコンよりモバイル速度の高速化を選んだが、後日削除。このコードがなくても表示速をを速くできたからだ。

美山走希
美山走希

LiteSpeed Cache(ライトスピードキャッシュ)のバージョンを4.4.2にしたらこのコードがなくても速く表示できた。

桜(販売職)
桜(販売職)

ブログカードのファビコンなんて読者は見てないから大丈夫。それよりスマホでの表示速度を上げなくちゃ。

ブログ月間5万5千PV突破!記事が増えても読まれない状態を脱出。
ブログを書き始めて9年が経過。このブログ(転職副業生活)の運営期間は5年目に突入!そして、5万5千PVに到達した。どうやってこのPVを叩き出したのか?それは「結論から書く・アフィリエイト広告を減らす・記事の表示を高速化」したから。あとはキーワードの選び方も大事。
スポンサーリンク

モバイル速度の表示速度を高速化!Contact Form 7とreCAPTCHA。

最新スマホお勧め機種紹介!アンドロイドの格安SIM対応(ZenFone Live L1)

読者からのメールを受け取るプラグイン「Contact Form 7」これにreCAPTCHA(リキャプチャ)を導入してると画面表示が遅くなる

reCAPTCHAがブログの全ページで動いて遅くなる。なので、お問い合わせページだけreCAPTCHAが動くよう設定する。

add_action( 'wp_enqueue_scripts', function() {
if( !is_page('mail') ){
wp_dequeue_style( 'contact-form-7' );
}
});
add_action( 'wp_footer', function() {
if( !is_page('mail') ){
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'google-recaptcha' );
}
});

このソースコードもCOCOON子テーマのfunctions.phpに追記する。間違っても親テーマに記載しちゃいけない。事前のバックアップも必要。

美山走希
美山走希

reCAPTCHAを使ってるとブログ表示がかなり遅くなる。だが、お問い合わせページだけ遅くなるのは問題ない。

桜(販売職)
桜(販売職)

アドセンス広告・reCAPTCHA・ツイッターとフェイスブックのタイムラインがあると、表示がかなり遅くなるね。

アフィリエイトで稼げない理由と今から副業ブログで稼ぐ方法。
アフィリエイト広告を貼ってるけど、成果が発生しない。お金を稼ぎたいのに、全然稼げない。どうしたらブログで収入を得られるのか?そんな貴女にアフィリエイトのアドバイスをする。結論、全ASPに登録し、広告の説明をするのが大事。広告を貼ってるだけでは誰も買わない。

モバイル速度の表示速度を高速化!reCAPTCHAのプラグイン対策。

お問い合わせフォームの必要性!相互リンクや、広告、仕事依頼が来る。

ブログのロゴマークに縦横のサイズが設定してないと「画像要素で width と height が明示的に指定されていない」と表示される。

「画像要素でwidthとheightが明示的に指定されていない」についてはカスタマイズの追加CSSに以下のコードを追加した。

追加CSSに記載しても表示される事はあるが、気にしない事にした。

.header-container-in.hlt-top-menu .logo-header img {
  width: 200px;
  height: 60px;
}

あと、COCOONの会話してる表示(吹き出し)画像もサイズ指定せよ!とPageSpeed Insightsで出る。

この記事にある設定をしてたらいつの間にか改善された。どの設定が影響したかは今となっては不明。

美山走希
美山走希

COCOONの吹き出し画像はサイズが指定されてないからPageSpeed Insightsで忠告される。

桜(販売職)
桜(販売職)

「画像要素でwidthとheightが明示的に指定されていない」かぁ。改善点が山積みだね(笑)

無職が6ヶ月間ブログに専念した結果!毎月15記事書いた収益とPV数。
これまで5年間ブログを書いてきて成果が出ない。PVも収益も伸びない。むしろ記事数が増えてるのにPVと収益は下がっている。何が悪いのか?その原因は内部リンクの少なさと表示速度の遅さにあった。それとグーグルコアアップリズムアップデートの影響も大きかった。それについて書く。

モバイル速度の表示速度を高速化!ブログカードに「続きを読む」と表示。

WEBライターになるには?未経験でも在宅副業で10万円の収入源確保!

ブログの高速化とは関係ないが、ブログカードに「続きを読む」と表示されるようにした。

ブログカードは画像と文章で記事を紹介してくれるが、実際にはスルーされてるから目立つよう「続きを読む」と表示した。

.internal-blogcard::after{
content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
position: absolute;
bottom: .5rem;
right: 1rem;
font-size: 70%;
background-color: #ff00ff; /* 内部リンク右下枠の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff; /* 内部リンク右下枠の文字色 */
border-radius: 2px;
}

.grecaptcha-badge { visibility: hidden; }
ブログのアクセスと収入が伸びない?アフィリエイトで稼ぐコツ紹介。
ブログを初めて半年たったけど、アクセス数が伸びない。アフィリエイト広告を掲載しているが、全く利益がでない。そんな貴女にブログ運営について助言する。結論、ブログは試行錯誤しながら書くのが大事。毎回、同じように書いてたら100記事書いてもアクセスは増えない。
美山走希
美山走希

ブロガーはモバイル速度を上げたいが、PV数も増やしたい。あれこれやってると時間だけがなくなってゆく。

桜(販売職)
桜(販売職)

テキストリンクとブログカードどっちの方が効果あるんだろうね?まれに両方を表示してるブログがあるけど…。

ブログで挫折しそうなら!訪問者ゼロから増やすおすすめ本10冊紹介。
ブログを書いても書いても誰も来ないし、誰も読まない。ブログ初心者ならそんな経験があるはず。訪問者がいなければブログを書いても無駄だと絶望を感じる。ブログのアクセス数やアナリティクスを見ても訪問者がいなくて虚しくなるばかり。そんな状況を打開するブログについて学べる本を紹介する。

モバイル速度の表示速度を高速化!第三者コードの影響を抑えてください。

ネットが遅くて切断される!無線LANルーターと子機を変えた結果。

「第三者コードの影響を抑えてください」はグーグル系の影響が大きい。アドセンス・フォント・CDN・Amazon・その他アフィリエイト広告

「第三者コードの影響を抑えてください」の対処法はPageSpeed Insightsで指摘されたURLをCOCOONに貼り付けるだけ。高速化→事前読み込み設定。

デフォルトで入ってたのに追加したら以下のようになった。

  1. www.googletagmanager.com
  2. www.google-analytics.com
  3. ajax.googleapis.com
  4. cdnjs.cloudflare.com
  5. pagead2.googlesyndication.com
  6. googleads.g.doubleclick.net
  7. tpc.googlesyndication.com
  8. ad.doubleclick.net
  9. www.gstatic.com
  10. cse.google.com
  11. fonts.gstatic.com
  12. fonts.googleapis.com
  13. cms.quantserve.com
  14. secure.gravatar.com
  15. cdn.syndication.twimg.com
  16. cdn.jsdelivr.net
  17. images-fe.ssl-images-amazon.com
  18. completion.amazon.com
  19. m.media-amazon.com
  20. i.moshimo.com
  21. aml.valuecommerce.com
  22. dalc.valuecommerce.com
  23. dalb.valuecommerce.com
  24. doubleclickbygoogle.com
  25. fonts.google.com
  26. www.jsdelivr.com
  27. developers.google.com
  28. cdnjs.com
  29. www.googletagservices.com
  30. tpc.googlesyndication.com
  31. www.googletagservices.com
  32. www.doubleclickbygoogle.com
  33. googleads.g.doubleclick.net
  34. vimeo.com
  35. f.vimeocdn.com
  36. i.vimeocdn.com
  37. i.ytimg.com
  38. i.imgvc.com
  39. use.fontawesome.com
  40. www.image-rentracks.com
  41. www21.a8.net
  42. www22.a8.net
  43. www26.a8.net
  44. www27.a8.net
  45. www28.a8.net
  46. www29.a8.net
  47. www.afi-b.com
  48. img.felmat.net
  49. ad.jp.ap.valuecommerce.com
  50. blogparts.blogmura.com
  51. hbb.afl.rakuten.co.jp

これでパソコンでの「第三者コードの影響を抑えてください」は出なくなった。モバイルに関しては高速化されないようだ。

まぁパソコンだけでも「第三者コードの影響を抑えてください」は出なくなるので、そのままにした。

美山走希
美山走希

プラグインを使う手もあるかも知れないが、できるだけ使いたくない。プラグインは必要最小限にする。

桜(販売職)
桜(販売職)

グーグル・Amazon・アフィリエイト広告が遅さの原因。COCOONの高速化設定にコピペするだけだから簡単だね。

アフィリエイトは儲からない?収入を増やすなら複数のASPに登録。
ブログを書いてるけど収入にならない。アフィリエイト広告を貼っても収益が出ない。そんな貴女にアフィリエイトでの稼ぎ方を助言する。結論、同じような記事、同じような広告ばかり貼ってても意味ない。色んな記事で様々な内容の広告を貼るからアフィリエイト成果が出る。

ワードプレスを高速化!最初のサーバー応答時間を速くしてください。

現代最速の無線LANルーターTP-Link Archer A10を購入!T3Uもお勧め。

ここまでJava Script等を事前に読み込ませたり、遅延させたりして表示速度アップさせてきた。だが、レンタルサーバーが遅いとどんだけ頑張っても限界がある。

このブログではカラフルボックスを3年契約で使っている。3年契約だと月額528円と格安。BOX1のプランだと10万PVまでなら充分な速度が出る

キャッシュ系プラグイン「LiteSpeed Cache」(ライトスピードキャッシュ)を使えるのも嬉しい。これがあると他のプラグインをだいぶ削減できる。

もし、他社のサーバーを使っててPageSpeed Insightsで「最初のサーバー応答時間を速くしてください」と出たならカラフルボックスに乗り換えよう

美山走希
美山走希

安さと速さを両立したのがカラフルボックス。30日間は無料だから試してみよう。

桜(販売職)
桜(販売職)

1ヶ月あたり528円って安いね!独自ドメインとレンタルサーバーを一緒に管理できるのは楽だね。

在宅勤務・テレワークで机と椅子を購入!パソコンとスピーカーも紹介。
I-O DATA モニター 31.5型在宅勤務やテレワークをする事になり、机と椅子が必要になった。でもどれを買えばいいのかわからない。なので、Amazonで丸一日探して見つけ出した。机と椅子があれば事務職(デスクワーク)だけでなく、副業(ブログ・ユーチューブ)でも役立つ。しかも一度買えば数年は使える。
スポンサーリンク

モバイル速度が遅いので、表示速度を高速化!COCOON設定。

Office Premiumプレインストール版を最新の2019にアップグレードした。

COCOONにこれまでの設定をしたらモバイル速度が25から50になった。他人のブログ速度を計測すると25前後が多かったので、50以上出れば満足

グーグル・アドセンスとアナリティクスを外せばより速くなるが、これは外せない。あとタグマネージャーを使ってると表示速度が遅くなるので辞めた。

ちなみにパソコンでの表示速度は90~99になっている。広告が多い記事だと80まで下がるが、これで充分。速度より記事を書いてPVを集める方が重要

もちろん、スマートフォンもパソコン表示もPageSpeed Insights
で「ウェブに関する主な指標テストに合格しています」と出る。

美山走希
美山走希

PageSpeed Insights(スマートフォン)の表示速度を追求すると終わりがない。それならブログ記事を書くべき。

桜(販売職)
桜(販売職)

ある程度、表示速度が上がったら記事を書かなきゃね。ブロガーは記事を書くのが仕事。

無職が毎日ブログ更新したら稼げるか?アフィリエイト成果報酬増加!
ブログを書いても稼げない。アフィリエイト広告を掲載してもお金にならない。そんな状況を打破する為、毎日ブログを書く(更新)する事にした。無職であっても毎日記事を書くのは楽じゃない。それでもどんな結果になるのか試したかった。60日、毎日記事を更新したてどんな結果が出たのか?
スポンサーリンク

LiteSpeed Cacheでモバイルの表示速度89点、パソコン100点。

ラクマの売上金は楽天銀行で受け取り、楽天市場で支払うと手数料が。

この記事を公開した4ヶ月後、LiteSpeed Cacheのバージョンを4.4.2にしたらモバイルの表示速度89点、パソコン100点になった。

LiteSpeed Cacheの一般設定でゲストモードとゲストの最適化を「オン」にする。すると文字表示が最優先となり、全ての画像は遅く読み込まれる。

以下、PageSpeed Insightsで合格した監査 (33)

  1. レンダリングを妨げるリソースの除外
  2. 適切なサイズの画像
  3. オフスクリーン画像の遅延読み込み
  4. CSS の最小化
  5. JavaScript の最小化
  6. 使用していない CSS の削減
  7. 使用していない JavaScript の削減
  8. 効率的な画像フォーマット
  9. 次世代フォーマットでの画像の配信
  10. テキスト圧縮の有効化
  11. 必須のドメインへの事前接続
  12. 最初のサーバー応答時間は問題ない速さです
  13. 複数のページ リダイレクトの回避
  14. キー リクエストのプリロード
  15. アニメーション コンテンツでの動画フォーマットの使用
  16. JavaScript バンドル内の重複モジュールを削除する
  17. 最新ブラウザに従来の JavaScript を配信しないようにしてください
  18. Largest Contentful Paint の画像のプリロード
  19. 過大なネットワーク ペイロードの回避
  20. 静的なアセットでの効率的なキャッシュポリシーの使用
  21. クリティカル リクエスト チェーンを回避してください
  22. カスタム速度の記録と計測
  23. JavaScript の実行にかかる時間
  24. メインスレッド処理の最小化
  25. ウェブフォント読み込み中の全テキストの表示
  26. 第三者の使用の最小化
  27. ファサードでのサードパーティ リソースの遅延読み込み
  28. スクロール パフォーマンスを高める受動的なリスナーが使用されています
  29. document.write() は使用されていません
  30. メインスレッドでタスクが長時間実行されないようにしてください
  31. 合成されていないアニメーションは使用しないでください
  32. 画像要素で width と height が明示的に指定されている
  33. width または initial-scale を指定した <meta name=”viewport”> タグがあります

ワードプレスの表示速度は満足したが、ウェブフォント読み込みで以下の注意が出る。

  • 警告:オリジンの https://cdn.jsdelivr.net の `font-display` の値を Lighthouse で確認できませんでした。
  • オリジンの https://utmf.info の `font-display` の値を Lighthouse で確認できませんでした。

これらを改善させるのが今後の課題だ。

美山走希
美山走希

アドセンスやアフィリエイト広告を掲載してこれだけワードプレスの表示速度が早くなるとは思わなかった!設定してみるもんだ。

桜(販売職)
桜(販売職)

ワードプレスの表示速度を上げるならカラフルボックスで、「LiteSpeed Cache」(ライトスピードキャッシュ)を使おう!

ワードプレス(ブログ)関連記事。

コメント

社労士・FP2級技能士
美山走希

キャリアアドバイザーとして資格と転職について助言している。労働者の不安や悩みを解消し、元気に働いてもらえるようサポートしたい。

美山走希をフォローしよう!
タイトルとURLをコピーしました