※この記事は以前Tumblrで書いた記事を再編集して掲載しています。
ども。どもども。ぐっさんです。間もなく鬱陶しい梅雨が明けサマーがやってきますねサマーが。ボク個人的に夏になると、『夏をあきらめて（サザンと研ナオコ）』と『熱帯夜（リップ・スライム）』の2曲が聴きたくなるとです。
今年もいつも以上に体調に気をつけて夏を過ごす所存です。
さて本題。
最近は、ネット、携帯共に回線環境が充実し安定した高速回線が供給されるようになりましたが、まだまだ100%という訳ではないですね。
そんな中Web制作者はユーザーにストレス無くWebページを閲覧してもらう様に日夜努力しています。Twitterでこのような面白い記事を見つけました。
Webページの読み込み時間、3秒が限界か – 5秒になると直帰率激増 | マイナビニュース https://news.mynavi.jp/article/20180122-573640/
マイナビニュース https://news.mynavi.jp/article/20180122-573640/
最初読んだ時は「意外と皆さん待つなぁー」という感想でしたが、よくよく考えると「3秒」て長いようで短いな…と思ったのです。
Webサイトの質も上がってインタラクティブになってる昨今で、この3秒という長さはどうなんだろう？と思い今回コラムの様な記事を書いてます。
短いと捉えるか長いと捉えるかはその人の体感で違うと思いますが。
では、制作者としてどんな所に気を付けていけば良いか？という点でいくつか項目を挙げます。以下の事を考えて制作して行くと良いと思います。
1：画像のファイルサイズを小さくする。
いくら光回線だ4G LTEだといってやたらと高画質の画像を使うのはどうかと。アイキャッチ画像でそれなりのサイズだとファイルサイズ大きくなりますよね。なので見たはそのままでファイルサイズを極力小さくしておく。これ大事だと思います。Photoshopでも出来るし今ではググるとネット上で圧縮できるサービスなんかもあるのでご自身のやり方を見つけると良いと思います。
2：1回のリクエストで読みこむ画像ファイルの数を減らす。
アイコンなんかを画像で作った場合、1つ1つのファイルサイズは小さいけど、それを何度もリクエストすると言うのも速度の問題になります。ですので、アイコン画像を1つにまとめcssで設定する『css sprite（スプライト）』と言う手法が役立ちます。
3：Webフォント（アイコンフォント）を利用する
最近ではアイコンを画像では無くアイコンフォントを使ってる人も多いはずです。ボクもつかってますが意外と便利です。アイコンの数も種類も豊富にあります。そこから抜粋して使うってのもアリかなと思います。アイコン1つにもクライアント側のこだわりがあれば話は別ですが…
4：JavaScriptを最後に読み込ませる。
最近のコーディングの手法？流行り？として動きを付けるscript系の読み込みをhead内に書くのではなく</body>の直前に書くという事があります。先にページの装いであるcss ファイルを読ませる。ブラウザ（レンダリングエンジン）は上からコードを読み込む訳ですからまず体感的にページ全体が綺麗に閲覧出来る様にして動きは後から付ける…とボクは解釈してます。
5：コードを圧縮させる。
ここまで行くとたまにやりすぎ感が出てるとボクは思う時もあるのですが…最終的に出来たコードをインデントも改行も取っ払うやり方です。
ただ、これをやる時に圧縮前のファイルは必ず残しておくべきです。更新やメンテナンスの時に非常にわかりづらい。なので圧縮させる前のファイルは残しておきましょう。圧縮させるにはWebサービスもあると思いますが、
gulpなどのタスクランナーを使った方が便利です。
以上に気を付けて0.1秒でも早くページを表示するWeb制作を行って行くと良いと思います。まだ他に有効な手段があるかも知れません。良かったら教えてください！ユーザー、制作者共に良きWebライフを！
