イラストも作らずサイトリニューアルに120%の力を注いでしまった、Linustock（ライナストック）編集部です。
こんにちは。
先に謝っておきます。
本記事はイラストとは関係のない記事です。
ごめんなさい。
でも、Webサイトを作る方でサイトの表示速度が遅くて困っている方の参考になればと記事にしました。
なぜ急にイラストも作らずサイトをリニューアルしたかって？
もうこれは、Google先生のモバイルサイトテストがいけないんです。
私もできれば、当サービスを開始してたったの3ヵ月でリニューアル作業なんてしたくなかったんです。
おみくじにも、焦るなって書いてあったのに。
少し寝不足です。。。
- 読了時間／ 5 min
※あくまでほとんどがWebディレクターとしての個人的な持論です、悪しからず。
モバイルサイトテストとは
さて、Googleのモバイルサイトテストとは何？と思った方。
こちらのサイトです。
https://testmysite.withgoogle.com/intl/ja-jp
読んで字のごとくモバイルでアクセスした場合、さらにいえば3G回線の環境下でアクセスした場合の読み込み時間を調べるためのサイトになります。
2020年までは全世界の70%の方が3G回線下でモバイルでWebサイトにアクセスするらしいです。
日本においてはそこまで気にしなくてもいい数字に思います。
ただ、ここでの結果を改善することで少なからず4G以上の回線速度でも体感は変わるはずだと考えます。
結論から言いますと
リニューアル前が12秒。
リニューアル後が2〜3秒です。
（ちなみにPageSpeed Insightsにおいてもリニューアル後はスマホ・PC共に点数が改善されました。微々たるものですが）おまけとしては「Googleのモバイルサイトテスト」自体のサイトを測ったら5秒でした。
今まで当サイトにお越しいただいていた方はお気づきかと思いますが、サイトの見た目以外にスピード感やページの遷移の仕方が変わったとお気づきでしょうか？
使いやすくなったと感じていただけたのであれば幸いです。
スピード改善の必要があるサイト、ないサイト
会社のブランディング戦略上において、色々な表現手法が必要なためどうしてもサイトが重くなるという場合は私は、そのままで良いと思います。（少しの改善が必要な場合もあるかもしれませんが）
下記のような例はブランディングを優先しているためかなり時間がかかります。
http://www.elle.co.jp/ （13秒）
https://www.vogue.co.jp/ （15秒）
でも、理由があって遅いことは決して悪いことではないと思うんです。
そのブランドや雑誌が好きな方は微々たるスピード差は関係がないと思います。
その分、表現できることがたくさんあります。
ブランド力を魅せることができます。
感動させることができるかもしれません。
イメージの向上に繋がるはずです。
むしろそういうサイトが私は大好きです。
これはきっと、職業病です。
あー遅いから、とにかく改善だは間違いです。
そのWebサイトの本質によると思います。
（素材を探すという目的上、当サイトは本質上スピードが必要ですね。）
10年間で数百社のサイトの制作や運用をしてきた私はそのように思います。
焦るな、自信を持てです。
うん、でもスピード命だよ。って方は次へ
スピード改善のためにしたこと
Webフォントを見直そう
結論から言います。
サーバーに関わることをのぞいてたったの3点です。
- 1日本語Webフォントを使っていないか。
- 2動きにこだわり過ぎて、Javascriptを多用していないか。
- 3画像をたくさん使用していないか。
②と③に関して言えば
画像は圧縮。lazyload.jsとか使って画像の読み込みを遅らせる。
動きは見直して、削除か圧縮。ぐらいしかないです。
でも待って、そんなことする前に。
上記の①がとにかく重要です。
結論から言ってしまえば全て日本語Webフォントがいけないんだ。
日本語Webフォントが軽くなったなんて言ったの誰さ。
全然ダイエットできてないじゃないか、キミー。
◯イザップでも通ってもっと絞ってきなさいよー。
ってくらい重い。
デザイン上必須としてましたが、消しましたよ。
それくらい重い。
長々書きましたが、Webフォント見直しましょう。
それとType Kitを使って日本語Webフォントも英語Webフォントも読み込んでいたのですが、英語のWebフォントも2秒程度影響を及ぼしていました。
なのでGoogle fontで似たフォントを探し、webfont.jsを使って読み込みさせています。
閉じbodyタグの前あたりに下記のgoogle apiのwebfont.jsと、フォントの読み込みスクリプト。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'></script>
<script type='text/javascript'>
WebFont.load({google:{families:['フォント名']}});
</script>あとはCSS(スタイルシート)にfont-familyでフォント名を指定するのみです。
font-family : "フォント名";このようにしてWebフォントを読み込ませるだけでWebサイトの読み込みスピードが改善されます。
むすび
私は、サイトスピードを上げるために2週間かけて作った動き（javascript）も見せ方も全て消しました。
デザイン上のこだわりであったWebフォントも消しました。
反重力爆弾でも爆発したのかというくらい、ごっそり消しました。
あの頑張りが水の泡に。無駄な開発期間が。。。
サイトスピードを上げるためには捨てるべき、こだわりもあると言うことです。
使う側が使いづらいなーと思ってしまう原因となるこだわりは、私たち作る側の怠慢だと思います。
当サイトでいえば、素材を見つけるのはスピードが命。（品質も！（ウィスパーボイス））
でも、こういう情報社会だからこそ、少しの遊び心は大切だとも思う今日この頃です。
今後も弛まぬ努力で良きサイトになるよう皆様の行動や声に耳を澄ませていきたいと思います。
長文おつきあいただきありがとうございました。
