30代後半でもOKの転職方法

「オフスクリーン画像の遅延読み込み」を導入してブログ表示スピードを改善する方法。実はAutoptimizeで解決する。

「オフスクリーン画像の遅延読み込み」を導入するプラグインを紹介します。

どうも、現在ブログを318記事ほど書いてますダリーウメモです。

今回は、過去に何回も記事にしてますが、ワードプレスブログのページ読み込み、表示の高速化の方法の続きです。

MEMO
すみません、a3 lazy loadというプラグインの紹介記事ですが、そのプラグイン入れなくてもAutoptimizeという有名なプラグインに画像の遅延読み込み機能が追加されてましたのでそちらを使えばOKだと思います・・・。プラグインはできるだけ少ないほうがいいので。

関連:ワードプレスプラグインは極力減らしましょう。28個も使ってた情弱より。

関連:ページスピード高速化作業、疲れたのでいったんやめます。

STORK(ストーク)のページスピードを高速化する方法を説明。スピード改善のためにやるべき事【2019最新版】

要はとにかくウェブサイトのページは速い方がいいんですよ。

MEMO
目安として、モバイルで70点くらい取れれば合格だと思います。100点とか目指さなくてもOKです。40点以下でも収益めちゃめちゃ出してるブロガーもいますので。

ブログの表示速度計測にはグーグルが提供するページスピードインサイトを使うのはブロガーのみなさんは知ってると思いますが、そこでどうしてもぼくが解決できずにいた「オフスクリーン画像の遅延読み込み」の改善が解決したので記事にしたいと思います。

参考にしたのはこちらのブログ記事です。ありがとうございます。

ブログの高速化にはLazy Loadが必須。当ブログのスピードアップはどこまで可能だったのか。

今回もワードプレスでブログやってる人向けの記事です。

そして細かいプログラミングはちょっとわからないなという人向け。

前置きとして、グーグルのページスピードインサイトは年々、サイトの査定基準が厳しくなってきている印象。

細かいことに口出しするようになってきていると思います。

これも全て、グーグルはユーザーのことを1番に考えているからなんですが。

少し前までは60点取れていたサイトがある日測ると40点なんてことが起こり得ます。
というわけで神経質になりすぎてもいけないのですが、ページの高速化には多少、気を使って行きましょう。

一つの有効な方法として、ぼくはキャッシュを強めに設定しています。

関連:【ブログページスピード高速化】ブラウザのキャッシュを活用する方法(マナブログより)

結論をいうと、今回紹介する方法を使ってモバイルの計測結果は43点から60点くらいになりました。

90点とかには中々、なりませんのでご注意ください。

今の所、モバイル60点で満足しております(とりあえず及第点)。

90点を目指すには外注に頼むとかプログラミングを勉強するとかが必要になってくると思います。
ぼくの場合、テーマはストークを使ってますがなぜかパソコン表示は90点と高得点を取れています。

MEMO
追記:いろいろブログの表示スピード改善対策をした結果、ページスピードインサイトのモバイルでも80点以上取れるように後日なりました。

ページスピードインサイトでhttps://dallyumemo.comの結果。83点のスコアです(モバイル)。

関連:遅いと言われるワードプレステーマストーク(STORK)だけど2年使ってみた感想としてはやはりいい感じ。ページスピードも高速化できた!



いきなり「オフスクリーン画像の遅延読み込み」を改善しろとグーグルに言われても、普通の人はわからないと思うのですが…ぼくはプログラミングできないので、とりあえずプラグインa3 Lazy Loadで解決させました(AutoptimizeでもOK)。

そりゃ、プログラミングができたら、サイトを爆速にすることなんて簡単だと思いますが…。

MEMO
冒頭にも書きましたが「画像の遅延読み込み」機能ってAutoptimizeというプラグインにも実装されてます(2019年8月現在)。

というわけで実はぼくは現在a3 Lazy Loadは削除しました・・・。記事書いててアレなんですが。

ま、Autoptimizeでもa3でもお好きな方でお願いします。

ぼくはプラグインの数を減らしたかったのでAutoptimizeのみにしてます。

ぶっちゃけ、AutoptimizeはCSSのインライン化やHTMLの最適化なんかもやってくれるので外せないプラグインです。

外注にページスピード高速化を頼むとかもありだと思いますが、高いと思うのでやめておきましょう。

ぼくはコミュ力もお金も微妙なのでとりあえずできることを自分でやってみました。

その方法はa3 Lazy Loadというプラグインを有効化して、上記のブログ記事に沿って調整するだけです。

a3 Lazy Loadプラグインの説明

なぜかおなじみのプラグインよく似た名前のLazy Loadでは「オフスクリーン画像の遅延読み込み」の解決には至りませんでした。

結論書くと、このa3 Lazy Loadというプラグインの効果はかなり素晴らしいものでした。

業者にお金を払って対策してもらう・・・なんていうのは、ばからしいので、さっさと解決させましょう。

そもそも「オフスクリーン画像の遅延読み込み」って何なのか?要は「見えてないところは後から表示させろ」ってことです。ページスピードインサイトにヒントは書いてあっても、具体的な方法は書いてない…。

この画像をみてください。ページスピード計測、モバイル43点で焦ってた時のスクリーンショットです。

オフスクリーン画像の遅延読み込みを実行しなさいというグーグルからのアドバイス画像

これを解決すれば6秒くらいは速くなりまっせ!と、書いてありますが、具体的な方法は、何も書いてないので、自分で調べるしかありません。

1番目の「次世代フォーマットでの画像配信」はJPEG2を導入しろとか無茶ぶり的な内容だったので今回はとりあえず、無視。

グーグルがここで言いたいのは「ページに表示されてない画像は後で読み込むように設定すれば最初に出てくるページが早めに出てくるからそういう風に設定してみるといいと思うよ!」ということです。

その際、オススメのプラグインとかも案内してくれればいいのですが、そこまではやってくれません笑。

で、実際a3 Lazy Loadプラグインを入れてみた結果・・・。

a3 Lazy Loadを導入するとグーグルからの警告が消えた!場面

おおっ!「オフスクリーン画像の遅延読み込み」を導入しろ!という文言が改善策からなくなっているではないか!

ページスピード改善作業において、ここまでサクッとクリーンヒット的に改善できるのは割と珍しいのでぼくは喜んだ次第ですはい。


a3 Lazy Load導入でページスピードインサイトの点数はどれくらい上がったのか?43点が60点になりました(モバイル)。

まずは導入前画像。

オフスクリーン画像の遅延読み込みを導入する前のページスピードインサイトのモバイルの点数は43点でしたという図

43点。死亡寸前です。流石にテンション下がり、何か対策しなくては・・・となる点数です。

a3 Lazy Load導入後の点数は60点に!

オフスクリーン画像の遅延読み込み導入後の点数は60点になりましたの図。

まあ60点あればギリギリオーケーでしょう。元々、弱小ブログですしね・・・。

でもグーグルのページスピード基準の改定によってはまた40点台に戻ったりするかもしれませんので油断できませんね。

定期的にチェックした方がいいと思います。

後日、遅いと言われるテーマのストークですが、ページスピードをモバイルで80点超えまで改善させることに成功しました。記事にもしております。

ひらめき、電球遅いと言われるワードプレステーマストーク(STORK)だけど2年使ってみた感想としてはやはりいい感じ。ページスピードも高速化できた!

まとめ:ページスピードインサイトで「オフスクリーン画像の遅延読み込み」と言われたら、とりあえずa3 Lazy Loadプラグインを入れておこう!効果はかなり感じております。設定も簡単です(Autoptimize)もおすすめ。

神経質になりすぎるのもよくないですが、ワードプレスでブログ運営している人は、たまにページスピードのことも意識してみてください。
傾向としては、モバイル計測の方が点数が割と厳しめ、採点が辛口です。

というのもモバイル(すなわちスマホ)の場合、パソコンでネットするよりも、回線や機能面でシビアな環境に置かれているからです。

それなのに、現在、スマホでネットしている人が全体の70%くらいになっているので、グーグルもモバイル速度にはかなり敏感なのです。そういう背景があります。

というわけで「オフスクリーン画像の遅延読み込みって何!?意味わからん!」という人は参考にしてみてください。

ちなみにページスピードインサイトで「次世代フォーマットで画像の配信」もやりなさい、みたいな事を言ってきますが、プラグインで解決させようとしたところ、見事に死にました。下記記事参照。

悲しいお知らせです。画像がアップロードできなくなりました→解決した。。。

原因はWebP Expressというプラグインが大暴れしたことなんですが・・・。対処に苦労しました。

WebPとは「ウェッピー」と読みまして、グーグルが推奨する新しい画像フォーマットです。

結論、まだウェッピーはやめといた方がいいです。とにかくややこしい。また記事にします。

こちらはあまり鵜呑みにせず、とりあえず画像の大きさを小さくする、画像の遅延などで対処で当面OKだと思います。

というわけでこの辺りで終わります。

別記事でワードプレスのブログでプログラミングがわからなくてもできるページスピード改善の対策をまとめました。

また参考にしてみてください。

関連:STORK(ストーク)のページスピードを高速化する方法を説明。スピード改善のためにやるべき事【2019最新版】

ブログ運営関連記事はこちら

最後に、全然関係無いですけど、スマホやiPadの充電に便利な大容量のモバイルバッテリーをご紹介します。

緊急用、災害用のバッテリーとして非常に重宝してます。iPhone7も2年くらい使ってると毎日充電しなくてはならず、コンセントの争奪戦でイライラしてましたが、これを買ったら家庭も平和になりました。

お手頃価格でいいものが多いAnker社製です。

       

iphoneの方は、ライトニングケーブルもAnkerで揃いますのでまたどうぞ。カラーバリエーションも豊富。

       

こちらも人気

仕事を辞めたい会社員朗報:転職は無理ゲーじゃなかった!37歳でも転職ってできることが判明。30代後半でも内定した転職方法を解説。転職支援サービスのミイダスのトップページ【適正年収】ミイダス【MIIDAS】実際に使ってみた感想。30代関大既卒低収入会社員、驚きの結果は。まだ自己犠牲で仕事してるの?体調崩しますよ?【仕事しんどい】自分を犠牲にしないと仕事が回らない会社はヤバいので転職すべきです。SEOの基本を理解しよう。読者第一主義がブログ成功の鍵です。解説します。【ブログ初心者向け】自分語りはウザい!読まれない!SEOにも悪影響です。タイトル、見出しの書き方も解説。MacBook Proのキーボードを買ってみたダリーウメモ絶対必要!MacBook Proのキーボードカバー(US配列)を買って実際使ってみた感想。UQの Speed Wi-Fi NEXT W05が快適だった話YouTubeのアップロード時間が異常に長い!通信速度の速いモバイルルーターはSpeed Wi-Fi NEXT W 05がおすすめフリーランスエンジニア現在、最高の働き方で羨ましいです。35歳以上なら普通に転職活動しましょうね。【高収入】フリーランスエンジニアが正直、うらやましい。実は未経験でも20代なら派遣エンジニアとしてスタートできるので解説。