どうも COMPACT-Cの大窪です。
今回はWixで制作したホームページのモバイルフレンドリーに関する話題です。
COMPACT-Cのホームページは最近Wixを使って立ち上げましたが、何故かトップページだけGoogleの検索結果一覧に「このサイトはモバイルフレンドリーではありません」と表示され続けていました。
丁度前日にモバイルページの修正を行い、すぐにクローラーがサイトを訪れてくれたみたいで、ようやくモバイルフレンドリーに対応しているとGoogleが認めてくれました。
なので、今回私がモバイルフレンドリーに対応するために行なった内容をブログで共有したいと思います。
ただ、私が行なった対策がすべてのサイトにあてはまる訳ではないと思うので、Wixで作ったサイトがこのサイトはモバイルフレンドリーではありません。と表示されている方で、解決策を求めている方は参考程度にご覧いただければと思います。
Mobile Website Speed Testing Tool（モバイル ウェブサイト スピード テスティング ツール）を参考にモバイル表示速度を改善
まず、前回Googleのモバイルウェブサイトスピードテスティング ツールでサイトの表示速度・モバイルフレンドリーをチェックしてみたでご紹介したGoogleのツールを参考に、モバイル表示速度の改善を行いました。
具体的には「最初に表示されるページを軽くする」ために画像のサイズを小さくしました。
ご存知かもしれませんが、WixはPCサイトのデザインや内容を変更したらモバイルサイトにも反映する仕様になっています。
COMPACT-CのPC版サイトのTOPには動画背景を使用しており、動画背景の上にテキストや画像を組み合わせてデザインしていました。
モバイル版にも背景動画(モバイルでは動画は静止画になります)の上に画像とテキストが表示されている形になります。
ここで重要なのが、WixはAjaxを使用しているので、モバイルページを表示させるのにjavascriptなどが動きます。
単純に画像一枚をモバイル表示に最適化するなら処理はそんなに重くならないと思いますが、画像に画像を重ねたり、テキストを重ねたりすると、その分CSSが増えるので処理が重くなります。
私が検証した結果、これがWixで作ったホームページのモバイル表示速度を遅くしている原因の一部なのではないかと思います。
なので私が行なった対策内容は、「画像を一枚のみに変更し、ついでに画像に重ねているテキスト量を少なく」しました。
それと、画像のサイズも「縦500pxくらいあったのを180pxくらいのサイズ」に変更しました。
どこかのプログを拝見した時(URLは忘れました)モバイルフレンドリーに対応するには画像のサイズも評価要素になるのでは？と言う記事を見たので、私個人の考えでも画像のサイズは重要なのではないかと思います。
他にも色々と試しましたが、上記の内容が1番効果があったのかなと思います。
はっきりとモバイルフレンドリー対応と表示されなかった原因は分かりませんが、とにかく同じ状況の方がおられましたら参考にされてください。