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

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

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

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

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

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

美山走希
美山走希

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

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

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

スポンサーリンク

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

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

レンタルサーバーはカラフルボックスを使っているので、キャッシュ系プラグイン「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>
(function(window, document) {
function main() {

var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.dataset.adClient = 'ca-pub-6850760426325117';
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
}

// Adsense遅延読込み
var lazyLoad = false;
function onLazyLoad() {
if (lazyLoad === false) {

lazyLoad = true;
window.removeEventListener('scroll', onLazyLoad);
window.removeEventListener('mousemove', onLazyLoad);
window.removeEventListener('mousedown', onLazyLoad);
window.removeEventListener('touchstart', onLazyLoad);
window.removeEventListener('keydown', onLazyLoad);

main();
}
}
window.addEventListener('scroll', onLazyLoad);
window.addEventListener('mousemove', onLazyLoad);
window.addEventListener('mousedown', onLazyLoad);
window.addEventListener('touchstart', onLazyLoad);
window.addEventListener('keydown', onLazyLoad);
window.addEventListener('load', function() {

if (window.pageYOffset) {
onLazyLoad();
}
//何もアクションがないときは指定秒数後に読み込み開始(ミリ秒)
window.setTimeout(onLazyLoad,3000)
});
})(window, document);
</script>

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

美山走希
美山走希

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

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

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

LiteSpeed CacheでQUIC.cloud CDNを簡単設定!WordPressブログを高速化。
LiteSpeed CacheでQUIC.cloud CDNを設定したので、その流れを紹介。使ったレンタルサーバーはだ。 細かい部分まで説明するとかえってわかりにくくなるので、ざっくり要点のみを解説。 CDNとは物理的な距離を短...

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

楽天証券の口座開設に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からレンダリングを妨げるリソースの除外は消えた。

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

美山走希
美山走希

ブログカードのファビコンよりモバイル速度の高速化を選んだ。

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

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

参考:寝ログ

スポンサーリンク

モバイル速度の表示速度を高速化!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・ツイッターとフェイスブックのタイムラインがあると、表示がかなり遅くなるね。

モバイル速度の表示速度を高速化!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が明示的に指定されていない」かぁ。改善点が山積みだね(笑)

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

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; }
0から1万PVへ!ブログを見てもらうには?収益化しても儲からない?
無料ブログからワードプレスに移行して9年経過。「ブログを始めたら100記事まで毎日書け」と教えがあるが、3日に1度の頻度でブログを更新していた。 最近、アクセス数(ページビュー)を増やそうと思ったので、途中から毎日書いたらどうなるか?...
美山走希
美山走希

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

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

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

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

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

「第三者コードの影響を抑えてください」はグーグル系の影響が大きい。アドセンス・フォント・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の高速化設定にコピペするだけだから簡単だね。

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

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

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

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

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

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

美山走希
美山走希

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

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

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

スポンサーリンク

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

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

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

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

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

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

美山走希
美山走希

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

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

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

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

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

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

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