新サイトで改善している点まとめ

こんにちは。仕事そっちのけで Blogのリニューアルに夢中な岩崎です。
色々と細かい施策を実施しているので、その内容も含めて、リストアップしておこうと思います。何事もアウトプット大事ですね。

まだまだリニューアルを続けている段階なので、日々更新していく予定です。

全体コンセプト

表示速度は速く
特に個人サイトで待たされるというのは耐え難い為、以前から踏襲しているコンセプト。極力 表示に時間がかからないように、HTMLやCSS、JavaScript等を最適化。
再構築しやすく
コンテンツを汎用的なものに分離し、サイト構造そのものを再構築しやすく。以前は記事内でもclassを利用しすぎたので、再利用やリデザインが容易に出来るようなシンプルなコーディングを心がける。カテゴリやサイト構造なども同様。あとから柔軟に変えられるようにする。

コーディング関連

HTML5を採用
よーやく対応。古いブラウザには一切対応なしで行く予定。2015/5/6
reset.cssから normalize.cssに変更
reset.cssは、CSSが何度も上書きされるのが気になっていたので normalize.cssは良い感じ。sanitize.cssは、まだ出始めという事もあって辞めておきました。2015/5/06
CSSや JavaScriptの Minify
まずは無駄なスペースやコメントの削除のみですが、Minifierプラグインで実現。PageSpeed Insightsでエラーになったので、ファイルも1つにまとめました。2015/5/7
Google Universal Analyticsに変更
Google Analyticsも Universal Analyticsに変更。合わせて Tag Managerの導入も悩んだものの そんなにタグを埋め込む予定がないので直書きで。2015/5/6
游ゴシック体をデフォルトフォントに設定
Windowsも Macも共通で標準インストールだそうなので変更してみた。2015/5/10
jQuery未使用
そこまでインタラクションのあるサイトではないので jQueryは未使用で構築。基本はCSSにして、JavaScriptは必要最低限。平行して JavaScriptを 1から勉強し直し。2015/6/22
サイト内検索はMTにて実施
これまで Google Site Searchにて実現していたサイト内検索ですが、もう少し検索結果の表現を改善すべく mt-search.cgiに切り替え中。2015/8/6
schema.orgの実装
これまでなんとなく実装していたschema.orgを勉強しなおして再実装。入れ子の処理やパンくずにも対応完了。2015/8/16
その流れで AMPに仮対応。2015/12/25
microdataで対応していた schema.orgを JSON-LDに切り替え。2016/2/14
Tableは overflowを利用してレスポンシブ対応(トライアル中)
幅が小さくなった場合は、見出しを固定して横にスクロールできるようにした。2015/5/13
★。2015/5/--

画像関連

srcsetにて Retina対応
レスポンシブイメージのネイティブ対応を目指し srcsetを活用。 画像は可能な限り SVGにて対応。2015/5/8
左上のサイトロゴや外部リンクアイコンをSVG形式に変更
画像じゃなくてSVGに変更する事で高速化を狙う。2015/5/11
外部リンクのアイコン表示はCSS
専用のclassを用意せず CSSセレクタ(a[target="_blank"])にて実装。2015/5/13
リクエスト数は極力減らす
サーバへのリクエスト数は最低限にする。SNSの画像などは Data URI schemeにて CSSに埋め込み。2015/5/13
★。2015/5/--

サーバ関連

常時SSL化
さくらサーバが SNI SSLに対応したので、本格的に常時SSLを導入してみた。過去ページの崩れは順次対応。2015/10/11
2ヶ月後、一通り安定してきたところで HSTS導入。2015/12/21
HSTS Preload Listへの登録が完了。2016/1/9
HTMLやCSS等のテキストデータは gzipにて圧縮
いつの間にか さくらサーバが対応してた! 2015/5/7
CDNの利用は断念
CloudFlare等で CDNや SPDYの利用を試みるものの、思っていたほどのパフォーマンス向上が見受けられなかったため利用を断念。契約している さくらサーバ(プレミアム)が、それなりのパフォーマンスを出してくれている事に加え、そもそも多重のリクエストを求めるようなサイトではないので劇的な効果が出ない様子。2015/7/4
mskb.jpドメインを短縮URLとして活用(トライアル中)
4年前(2011年)に取得したものの ずっと活用していなかったので、短縮URLとして活用してみた。記事IDから 個別記事に直接 301リダイレクト。2015/8/28
★。2015/5/--

コンテンツ関連

記事のURLを短縮した
本当は「ドメイン/記事ファイル名」にしたかったが MTだとえらい事になりそうなので、年を1つ挟みました。カテゴリだとカテゴリ名を変更したときにリンク切れをおこしてしまうので、しぶしぶ年。2015/5/12
記事カテゴリの再整理
今までのカテゴリを一新して、もう一度記事の分類方法を見直し。2015/5/6
ソーシャル連係を強化
これまで積極的に連係していなかったソーシャル周りですが、Blog記事のバイラル用に(今さらながら)Faceook PageGoogle+を作成。Google+は意味があるのか悩んだものの、とりあえず半年くらい運用してみてどうするか検討する事にしました。2015/8/21
TOPページに記事のレコメンド
直前に見ていたカテゴリの記事を TOPページにてレコメンドするよう、独自レコメンド処理を実装。2015/12/28
Push通知を実装してみた(トライアル中)
Organic Searchによる流入が大半でリピーターが少ない為、Push通知を導入してみた。サブドメインでテスト中。2016/6/30
★。2015/5/--

関連記事:

schema.org ファイルサイズを考慮しても 選択すべきは JSON-LD

schema.org ファイルサイズを考慮しても 選択すべきは JSON-LDのメインビジュアル
引き続き Blogのリニューアル中(module)
Webサイトを立ち上げて 17周年を迎えました!!