再MF-Test20181029

２０１８年１０月２９日

1：はじめに

otosan pageは2015年以降作成した全てのWebページを、スマホ・タブレット・PCと全てのデバイスで見れるように対応（RWD化）しています。

各ページでの確認は公開の都度、一部は保有している実機で行ったがiフォン等はできず、Google提供の「モバイルフレンドリーテスト」^（※１）（以降MF-Testと略す）で行い不都合があれば対策してきた。

これはインターネット検索サービスの大手はGoogleですから、先ずWebページを存続させる上でも、最低限この評価試験に合格させ、検索結果として上位に表示させる努力が必要であると考えた為です。

従来必ず合格してきたページの一部で、今回簡単には合格しなかったものが出てきて、従来からの製作手法が通用しなくなったわけですから、ここで対策の必要性を痛感した。その為「備忘録として記録」することにしました。

2：状況詳細

MF-Testで一部のページが不合格になってしまったのは、「AlbumやSlide-Show」の様に、沢山の画像表示を扱ったページに限定されている。

MF-Testの評価方法は日進月歩で進化している様であり、従来と同じ手法で作成していたページが、今年になり評価試験中インジケーターの動きが、いつもと違った動きをしている（時々小刻みに止まるような）ことに気付き、判定ができず評価時間が長引いているのかと感じてきた。

それでもMF-Testは合格していたことから、余裕が全然無く合・否ギリギリのラインで、かろうじてOK状態が続いてきたと思った。

今迄は一度NGになっても、しばらくたってからの再試験で殆どが合格していた（Wi-Fi通信環境の影響等？）。しかし、今回はアルバムページは評価画面中のスクリーンショット画像に、サムネール画像の一部で読み込みに遅延があったにも拘わらずギリギリにOKになっていた。一方スライドショーページ^（※２）は再度NGになってしまい、いよいよ本格的な対策の必要性に迫られきた。

3：対策方法

MF-Testで評価試験後、「NGになれば」赤い「X」マークの指摘項目を最優先で修正する必要があった。下記図1の赤枠内参照。指摘は2項目あり、
・コンテンツ幅が画面の幅を超えています。
・クリック可能な要素同士が近すぎます。
これらの指摘の多くは、CSSの修正のみで直ぐ解決できた。

判定OKの時はスクリーンショット画像が表示されますが、赤い「X」マークの指摘項目は出ませんから今迄は安心していました。

しかし、判定の合否に関係なく、重要なヒントが図1,2の緑枠内リンクにも沢山あります。
特にOKになった時は、今迄余裕がなかったこともありますが、殆ど見たことはなかった。
慣れている人なら、どこをどの様に修正すれば良いのかヒントになると思われる為、今後は十分目を通そうと思う。
　但し、内容は難易度の高い専門的（英文や英語の動画等もある）記述もあり、今後大きなハードルになりそうです… (＠_＠;) 。

今回の様にMF-TestでNGになった場合、沢山の修正情報が出ますが、多かったのは「画像が部分的に読み込まれました」だった。
これは規定時間内に、リクエストされたhtml・画像・CSS・Java Script等の全てのファイルが、読み込まれなかった為起きた現象であると解釈している。

ここに表示されている全ての要因を、解決すれば合格は間違いなしと思われる。
写真等の画像を減らすか無くせば良くなるはずであるが、アルバムやスライドショーページは作れなくなりますから、ネガティブな方法は止めました。

今回は、直ぐ出来ることとして実際にやったことは、アプリ^（※３）で全ての画像を適正化し、全部入れ変えただけで効果が表れて解決出来た。

但し、英文ページですが、ブラウザーにGoogle chromeを使用すると自動的に翻訳して貰えます。

【具体的には】

otosan pageで使う写真幅は、デジカメの4320pxから750pxへ縮小（縮専、ペイント等のアプリ使用）して、これを標準のサイズとして全てのページで使用している。
1枚当たりの容量は3～4MBのものでも、30～160KBに縮小されていた。

「Shrink your images」で16枚の写真を最適化した結果、下記画像8の様に、「you saved2.0MB(-59％)成功！」と表示され、Zipファイルとして保存でき全ての画像を入れ替えた結果、他に何も修正しない状態だったのにMF-TestがOKになった。図2参照。

又、図5は以前合格していて今回NGになっていたページ^（※４）（10枚の画像使用）の改善では、「You saved 1.3 MB (-61%) 成功！」の表示で高い圧縮率になっていて、画像全ての入れ替えのみでMF-TestはOKになった。

4：画像による説明

画像はクリックするとLightboxで拡大表示します。

図1 NG例：赤枠の赤X項目は最優先で修正する。

図2 OK例：赤X印が無くても、緑枠リンクに沢山の修正情報がある。

図3 アルバムページのOK例。

図4 アルバムページOK例。但し、読み込みの遅延が起きていて修正を要す。

図5 過去のスライドショーページのNG例。

図6 過去のスライドショーページ、画像の適正化後OKになった例。

図7 過去のスライドショーページ、再試験でOK時のスクリーンショット。

図8 画像の適正化で16枚の縮小画像を保存した時の例。

図9 参考：Googleのスピード試験結果：「Mobile」では「Good91/100」のスコア値。

図10 参考：Googleのスピード試験結果：「PC」では「Medium79/100」のスコア値。