phone-380008_640

先日記事アップ後のスマホでのサイトチェックをしていたところ、
なんとなくサイトの応答性が悪い感じがしたので、
急遽色々と調べてみました。

今まで、ブログを形にするのに精一杯だったので、
ユーザビリティの面などあまり対策していませんでしたが、
サイトに来ていただく読者さんを思えばユーザビリティの追究も
当然必要ですね。

スマートフォンで見てみたらこんな感じだった

このサイトは、ワードプレスで賢威6.2というテンプレートを使って
作成していますがスマートフォン(Android)で見てみると

 sumrt1

こんな感じです。
メインカラムだけ表示されて、サイドバーは隠れています。

 PCで見ると、このようにメインカラムを挟むように
左右の両サイドバーがレイアウトされています。

saidoba-

 

スマホ表示の場合は下にスクロールさせると、

sumrt2

ここにあります。
サブコンテンツというのが左のサイドバーで
サイドバーが右のサイドバーです。

 それでここをそれぞれタップすると

sumrt3

サブコンテンツ(右サイドバー)

 

sumrt4

サイドバー(右サイドバー)

と通常ならば開きます。
しかしここで気が付きました。

リンクをタップしても全く反応がない・・・・・・

強く押しても、優しく押しても、百烈拳でも
全く応答ありません。

何回かサイトを開きなおして試してみましたが
反応が悪いのは変わらず、ページを表示する
スピードも遅いという感じを受けました。

自分のサイトなんで我慢しますが、赤の他人のサイトを見に来て
こんなに待たされたり、使いづらくては読む方に
好印象を残すことなど出来るはずがありません。

何時間も待たされた挙句、壊れて動かないアトラクションだらけ。
そんなテーマパークにリピーターなど付くわけ無いですよね。

人ごとではない危機感を覚えたので、何か手を打たねば
ということでまずはサイトの表示速度について調べてみることに
してみました。

こんなサービスで計測してみました

今まで使ったことも見たこともはありませんでしたが、
検索してみるとサイトの表示速度を計測するサービスを見つけました。

まず一つが、GTmetrix というサービスです。
英語表記なんですが、Googleのブラウザchrome で表示させて翻訳しましょう。
(しなくても全然使えますが)

 

GTmetrix 

 

 

2つ目は、GoogleのサービスでPageSpeed Insights  というもので、
サイトの読み込み時間の評価や対策方法などを教えてくれます。

 

pagespeed insight

どちらも使い方は簡単で、解析したいサイトのURLを入力してワンクリックするだけです。
これらを使って色々と検証していきたいと思います。

 

さて、武田のサイトトップページの結果は・・・・・・

 

GTmetrix
kaizennmaeGT

 

PageSpeed Insights
kaizennmaegoogle

 

予想通りあまりよろしくないようです;;

時間帯によってwebアクセス数自体が変わるので、ここでの数値も
当然変わってくるらしいのですが、基準となる数字がないと
検証できませんので、この結果を元に色々と手立てを施してみようと思います。

PageSpeed Insights では、ページ表示の高速化のための
改善点を提示してくれます。

 

kaizennmae

各項目に修正方法の詳細がそれぞれ記されておりますが、
元来こういったテクニカルな分野が苦手な私にしてみたら
なんのことやらさっぱりで、何かの暗号分を読んでいるようです。

それでも、タップしても反応しないサイトではせっかく見に来てくれた方に
申し訳ないので、諦めずに色々検索しまくりました。

分からないなりに色々とやってみた

調べて見ると私でもなんとなく出来そうな事がいくつか見えてきたので、
『できることをとりあえずやってみる』の精神で、下記の点に取り組んでみました。

・画像を最適化する
・不要なプラグインの停止
・Xサーバーの『mod_pagespeed設定』をONにする

それぞれの作業について簡単に説明します。

画像を最適化する

画像のファイルサイズは、ページの表示速度に大きく関わります。
画像を最適化するとは、画像サイズを縮小させることですね。

今まで、このサイトに画像をたくさん貼り付けて来ましたが、
その画像サイズというものに正直あまり気を使ってしませんでした。

何も考えずにPNGファイルをバシバシ貼り付けたり、
高画質素材を使ってみたりお構いなしでした。

ですが、いまさらこれまで貼り付けた画像サイズを修正するのも面倒なんで
何かいい方法が無いかとまた検索してみたら、ありました。

EWWW Image Optimizer  というワードプレスプラグインです。

過去にアップした画像も全て自動で簡単に圧縮できます。

新規アップ時にもその都度、画像を圧縮してくれます。
圧縮率は高いそうなのですが、それほど劣化は感じません。
実際の画像もほとんど区別がつきませんね。

まだ導入されていない方は、おすすめです。
設定の仕方については、「EWWW Image Optimizer  設定」
で検索するとたくさん出てきますのでそちらを参照してください。

不要なプラグインの停止

”スクロールせずに見えるコンテンツのレンダリングをブロックしている
JavaScript/CSS を排除する”の項目で、いくつか使っていないプラグインが
修正項目に含まれていました。

全く使っておらず、何の為に導入したかも思い出せないプラグインでしたので、
とりあえず停止しました。

プラグインは何かと便利なものが多いですが、必要のないものまで
導入してたり入れ過ぎると、サイトに悪影響を及ぼすので気を付けましょう。

Xサーバーの『mod_pagespeed設定』をONにする

検索しまくって疲れたので息抜きにメールチェックした際、
Xサーバーからこんなメールが来ていたのを見つけました。

【国内初!Webサイトのコンテンツを最適化し、表示速度を向上させる
「mod_pagespeed設定」機能追加のお知らせ】

うほっ まさにタイムリー。
普段あまりサーバー会社からの情報って見ていなかったのですが、
色々試行錯誤していた時に『速度表示を向上』ってフレーズに
私の脳みそがうまい具合に反応して見つけてくれました。

mod_pagespeed とは、サーバー側で無駄な通信を削減するなどの
最適化処理をしてくれる機能案だそうです。
利用できるものは何でも利用してみたいと思います。

mod pagespeed

機能の設定は、ログインしてmod_pagespeed設定に進みワンクリック。
非常に簡単でした。

 この設定をした場合、ブラウザによってはサイト表示が崩れるなどの不具合が
生じる可能性があるそうなので、設定後はよくチェックしたほうが良いですね。
このサイトはとりあえず大丈夫そうです。

サーバーをXサーバーでレンタルされている方は、設定も簡単なので
試してみる事をおすすめします。

色々とやった結果

色々と試しながらやってみましたが所詮CSSとかJavaScriptとか
あんまり理解出来ていない人間なので、この程度のことしかできませし
これ以上の事をやろうとも思いません。

それ以外にも、学ぶ必要があることは山ほど有りますからね。

で、結果は・・というと

GTmetrix
nobana-GT

PageSpeed Insights
nobana-mova

数字上では、そこそこ改善されたように思います。
実際のスマホ画面でのレスポンスも改善されて
サブコンテンツ、サイドバーも問題なくサクッと開くようになりました。

テクニカルなスキルが無い分、時間をかけてしまいましたが
いつまでやっていても、きりがないのでこの辺りで満足しておきます。

とりあえず、当初の目的であるスマホサイトの応答性改善は
達成できたので良かったです。

今は、スマートフォンからのアクセスも馬鹿にならない時代に
突入したので、ある程度サイトのコンテンツが充実してきた段階
ユーザビリティ追究の観点からもでこうしたチェックを
やってみるといいと思います。