レターを軽くする

昨日だいぽんちゃんから相談を受けて、新しい商品のレターの見直しをしてた。
外注されたものだけど、とにかく重い。
GoogleChromeだと「ん?遅いな」ぐらいなんだけどSafariになると1分近く表示されなかったりする。
情報量が多い、画像が多い、というビローンレターの特徴故に発生しているとも言える。
 
だけど根本的には「過剰なアニメーション」によるものというのが正しい。
スクロールすると立体感を出すためにズレながらスクロールする背景や、サブヘッドが真ん中に集まったり、その逆だったり。
量が多い。だからこそ遅くなる。

ということでjavascriptで作られたアニメーション部分を切り離し。しかし全部切り離すと他に影響をうけるのでひとつひとつ、担当している部分を切り離していく。そうするとhtml部分にも問題ができるので修正。例えば、中央に集まった文字が普通の状態になる。というアニメーションの場合は、最初から普通の状態にしないといけない。この辺りも修正。
 
さらにエラーが発生してそもそも動作していなかったプログラムもあったのでこれも削除。だいぶスッキリしてきた。
 
youtubeの埋め込みが4箇所あったのだが、これも表示遅延の原因となる。そこでプログラムを作成してして、動画のコードを指定しておくと、自動的にサムネイル画像を表示をして、クリックされたらhtmlを再生用のiframeに切り替えるという仕組みにした。これはなかなか良いプログラムが出来たので、今後も流用しよう。
 
ということで相当さくさく表示されるようになった。safariはまだもたつくことがあるけど1分間という異常事態は無くなった。後はスマートフォンからどういうふうに見えるかだな。
 
こういうカスタマイズも面白いね。