IE6-8 is Not Supported

ブログをリニューアルしました

年末から年明けにかけてブログをリニューアルしました。 …とは言ってもそこまでデザインは変わってないので、どこを変えたのか説明していきたいと思います。

1. コードの書き直し

マークアップの再確認

学生時代に作ったものなので、当然コードも2013年仕様でした。
まだ hgroup とかが存在した時代です。
なのでとりあえずマークアップし直しました。(CSS のクラス書き換えはまだ終わってない)

友達に教えてもらった Firefox のアドオン、『HeadingsMap』で見た時もエラーを吐かないように修正。(Chrome 版も多分あります)
未だに nav タグがセクショニングコンテンツで h タグを含まなくてないけないってのは理解できないけど、なんとかごまかした。section と article に関してはちゃんと修正できてるはず。

アニメーションの再設定

このブログは遷移や hover のアニメーションにこだわっているのですが、これも一から作り直し。
使っていた jQuery easing とかが時代遅れな感じだったので、全て CSS3 と JS のアニメーションライブラリに変更しました。 イントロ部分も前より少しは滑らかでかっこよくなったと思います。

2. サイトの高速化

今回のリニューアル最大の変更点、高速化 (スコア上)。
結構重そうに見えるサイトだけどサーバが重いのを除けばそこそこ早くなりました。
GTmetrix ではA:93% / B:89% のスコア (今見たら A:94% / C:73% ) 、PageSpeed Insights のほうは 76/100 (SP), 84/100 (PC) のスコアを出しています。
どっちも A にするのはサーバの仕様上厳しいので諦めました。

blog-renewal-2015_1

高速化の際のポイント

  1. htaccess でキャッシュや gzip の設定をする
  2. jpeg や png は圧縮してから使用する
  3. CSS と JS ファイルも圧縮する
  4. CDN を活用する
  5. JS は非同期で読み込む
  6. WP の場合プラグインを多様せず、無駄なファイル読み込みは全て消す

簡単にまとめるとこんな感じになります。これを全部やれば GTmetrix は A になるはず…!
JS の非同期化は今回 RequieJS で全てを1つにまとめて管理してるけど、
結構大変だったから JS の async 属性でもいいかもしれない。

と、まあそんなわけで、ちまちま変更したり放置したりと申し訳ないですが、2015年も引き続き宜しくお願い致します!

ads by google