GooglePageSpeed Insightsのユーザー エクスペリエンスを改善する;FC2ブログ・プチカスタマイズ   

GooglePageSpeed Insightsのユーザー エクスペリエンスを改善する|FC2ブログ・プチカスタマイズ

  このページはFC2ブログ・プチカスタマイズの GooglePageSpeed Insightsのユーザー エクスペリエンスを改善する に関する情報を紹介しています。
  FC2ブログ・プチカスタマイズは、FC2ブログをちょっとだけ改造して、使い易くします。  FC2ブログの魅力は、初心者は初心者なりに、上級者は上級者なりにテンプレートやスタイルシートを改造して色々と変えることができるところ。 このブログでは、初心者から中級者向けのFC2ブログカスタマイズ法をあれこれご紹介。  FC2ブログを楽しみましょう。

 


 
 
Top Page > スポンサー広告 > GooglePageSpeed Insightsのユーザー エクスペリエンスを改善する・FC2ブログでスマートフォン用サイトを作ろう > GooglePageSpeed Insightsのユーザー エクスペリエンスを改善する


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking

このエントリーをはてなブックマークに追加

 GooglePageSpeed Insightsでサイトの表示速度を測定すると、同時に出てくるのがユーザー エクスペリエンスというもの。

 PCサイトの分析結果には表示されないこのユーザー エクスペリエンスというものいったい何?

 

ユーザー エクスペリエンスの評価

 ユーザー エクスペリエンスというのは、満点が100。

 内容を見てみると、タップの大きさや横スクロールしないで見れるか?、末端の大きさによって画面の大きさが変わるように設定されているか?なんてのが評価されている。

 要するに、ユーザー エクスペリエンスはスマートフォン・タブレット閲覧時の閲覧者が使いやすいサイトになっているか?

 ということらしい。

 

 ちなみに、このサイトのユーザー エクスペリエンスは99/100.

 なかなか優秀なのだ。

 

 マイナス1になっているのは、タップターゲット1箇所。

 タップする部分の大きさ1箇所だけが、「小さくて押しにくいよ」とGooglePageSpeed Insightsに指摘されている。

 が、このタップターゲット部分、FC2ブログに責任の無いGoogleアドセンスのタップ部分だったりする。

 これは、改善するにはアドセンスコードを変えるしかない。

 

viewport の設定

 末端の大きさによって画面の大きさが変わるように設定されているか?というのが「viewport の設定」。

 このviewport の設定いじったかどうか覚えていないのだが、もし、スマートフォン用のテンプレートに入っていなかったら、入れておいたほうがいい。

 ものすごく簡単に、設定できる。

 単に、スマートフォン用のテンプレートのHTMLにmeta タグを付け加えるだけだ。

<meta name=viewport content="width=device-width, initial-scale=1">

 これだけ付け加えて、テンプレートを保存すればそれですむ。

 

横スクロールしないで見れるサイトにする方法

 サイトに横スクロールが出てしまう原因はいろいろある。

1、画像が大きすぎる。
 表示する画像を320PX以下にすれば、画面の狭いスマートフォンでも横スクロールが発生してしまう可能性がなくなる。
 他にも方法はあるのかもしれないが、今のところそれ以外思い浮かばない。

 

2、サイズの合わない広告タグなどが入っている。
 スマートフォンの最小サイズ320px以上の幅の広告などが入っていると横スクロールが発生する。
 320px以下のコードに張り替えるか、レスポンシブ広告(ただし、ベータ版。広告ユニットはレスポンシブ デザインを導入したサイトでのみ利用できる。)に切り替える。
 以前、記事の投稿時に広告のタグを入れないで、テンプレートに入れたほうがいいという話を書いたのは主にこのため。

 

3、幅の値に絶対値が使われている。
 width:400px;とか、数字が320px以上に設定されている部分がある場合が考えられる。
 幅の指定は%で指定したほうが無難。

 

 ユーザー エクスペリエンスを改善するのもなかなか大変である。



サイト内の同タグへのリンク: FC2  ブログ  テンプレート  カスタマイズ  HTML 
他のサイトへのタグリンク : FC2 ブログ テンプレート カスタマイズ HTML

web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking
このエントリーをはてなブックマークに追加
関連記事リスト
  カテゴリ名:[・FC2ブログでスマートフォン用サイトを作ろう]
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://tadameru2.blog91.fc2.com/tb.php/166-2bc98a4f
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。