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

パーソナルコンピューターとスマートフォンについて書いたカテゴリ。

2021.05.142023.11.14

この記事は約20分で読めます。

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

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

最終的にモバイルの表示速度８９点、パソコン１００点になった。

宇野左風

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

桜（販売職）

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

モバイル速度が遅いので、表示速度を高速化！PageSpeed Insights設定。
1. モバイル速度の表示速度を高速化！使用していないJavaScriptの削除。
2. モバイル速度の表示速度を高速化！レンダリングを妨げるリソースの除外。
モバイル速度の表示速度を高速化！Contact Form 7とreCAPTCHA。
モバイル速度が遅いので、表示速度を高速化！COCOON設定。
LiteSpeed Cacheでモバイルの表示速度８９点、パソコン１００点。

Sponsored Link

モバイル速度が遅いので、表示速度を高速化！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の削除」としての対策は終わってない。次は本格的に動く。

桜（販売職）

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

ブログ月間４万５千PVの収益は？アフィリエイトで稼げる目安。

ブロガー歴９年、この転職副業生活の運営は５年目。ようやく月間４万５千PVを突破した。ブログで月間４万５千PVだとどれくらい稼げるのか？どうやったら月間４万５千PVになるのかを解説する。結論、月間４万５千PVでは稼げない。渋沢栄一１枚から１.５枚程度のブログ収入。

沈黙のWebライティング —Webマーケッターボーンの激闘—〈SEOのためのライティング教本〉

エムディエヌコーポレーション

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

結局、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（ライトスピードキャッシュ）のバージョンを４.４.２にしたらこのコードがなくても速く表示できた。

桜（販売職）

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

ブログ月間５万５千PV突破！記事が増えても読まれない状態を脱出。

ブログを書き始めて９年が経過。このブログ（転職副業生活）の運営期間は５年目に突入！そして、５万５千PVに到達した。どうやってこのPVを叩き出したのか？それは「結論から書く・アフィリエイト広告を減らす・記事の表示を高速化」したから。あとはキーワードの選び方も大事。

10年稼ぎ続けるブログを創るアフィリエイト成功の仕組み

ソシム

Sponsored Link

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

読者からのメールを受け取るプラグイン「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が明示的に指定されていない」かぁ。改善点が山積みだね（笑）

無職が６ヶ月間ブログに専念した結果！毎月１５記事書いた収益とPV数。

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

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

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

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

.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; }