ねほり.com

何もないから何かみつかる

Bootswatchによる2rowデザイン&軽量化の検討

      2015/07/27

この2ヶ月間で「ランキング出力のOAuth 2.0対応」「Yahooコメントランキングのユーザ要求対応」「モバイルサイト対応」「税金・年収のシミュレータ」など3年間ぐらい更新したかった内容を更新することができた。

そして大詰めを迎え「Bootswatchを使った2rowデザイン」と「サイトの軽量化」に手をつけた。

新デザイン対応&軽量化検討

私が学生時代から作成しているサイトは未だに、テキストパットを利用してデザイン・構成を自作している。

サイトを作成開始したのは1999年。

2009_05_14_1

今は2015年。スマートフォンでサイトを見ることがパソコンのシェアを超え、レスポンシブデザインやマテリアルデザインが流行し始めました。

  • モバイルファースト
  • レスポンシブデザインの進化
  • フラットデザインの継続
  • マテリアル・デザインの増加

こうなってくると、自作でデザインを作成し続けるのは大変すぎる。

そして、いつの間にか色々なデザインが流行し「CSSフレームワーク」などを利用してサイト作成するのが当たり前になっている。

Twitter社は、数年前に「Twitter Bootstrap」をリリースしており、現在は3.1。

Google社も今月、マテリアルデザイン仕様のWebサイトを構築するためのツールキット「Material Design Lite」を公開したとのこと。

先月より「Bootstrap」を使ってのマテリアルデザイン/レスポンシブデザインの検討中に「Material Design Lite」が出てきたのは想定外だが、まずは今年は「Bootstrap」を使ってのサイト最適化を検討することに決めました。

Bootswatch

「Bootstrap」を使えば、次の機能をまとめて導入できる。

  • HTML5
  • CSS3
  • 12カラムグリッドシステム
  • フラットデザイン
  • タッチパネル操作への配慮
  • カルーセルスライダー等
  • UIパーツライブラリー
  • jQuery
  • LESS
  • JavaScriptライブラリ
  • 便利なLESSのMixinライブラリ
  • clearfixなど

デザイナー目線では既に色々と揃ってるものをカスタマイズするだけで,サイトが1つできあがるのがメリット。

でも、ここ最近は「Bootstrap臭」という言葉とともに「似たようなサイトになる」など disりが増えている。

bootstrap

なので「Bootswatch」を利用することで出来る限り、それを回避する。

「Bootswatch」はbootstrapのテンプレートのギャラリーのサービス。そして、それを使って「2row画面」を作成した。

Zepto

「Bootswatch」「Bootstrap」を使うと、阿呆みたいにロードファイルのサイズが増えてしまう。

そこに加えて「jQuery」をロードすることになり、サイトの表示速度が恐ろしく遅くなってしまった・・・。

なので「jQuery」より軽いJSライブラリを探したところ「jQuery」と互換性がある「zepto」を見つけた。

  • 「jquery-1.10.2.min.js」のファイルサイズは「32.4 kB」
  • 「zepto.min.js」のファイルサイズは「9.6 kB」

ただし、bootstrap.jsはjQueryありきで書かれている箇所があるので、次のようにグローバルのjQueryをZeptoで上書きする。

if(!window.jQuery) {
Zepto.browser = {webkit: true};
window.jQuery = Zepto;
}

その他

Google のウェブ パフォーマンス ツール「PageSpeed Insights」を使えば、スクロールせずに見えるコンテンツのレンダリングを優先して設計することができる。

PageSpeed_Insights

Gzip圧縮を有効化したり、CCS/JSの読み込みタイミングを変更したり、動的な読み込みを静的に変更したりして、スコア「74/100」。

パソコンで見た場合のスコアは「82/100」。

キャッシュを有効にすれば、さらに上位は目指せるけどJS/CSSを頻繁に変更中なので、これで十分。

Pingdom Website Speed Test」のサイトの結果は次のとおり。

pingdom

他の人が呟いたtwitter表示も静的なものに変換した。これで少し軽くなった。

でも回線が遅いと、まだ広告表示が遅すぎる・・・。

「bootstrap.min.css」が19.5Kあるし、CSSの最適化(不要な部分の削除)が必要かもしれないなぁ・・・。

 - 2015年(社会人11年), テクノロジー, Web技術

  関連記事

助けて「クラシアン!」、しまった!ここはアメリカだ・・・

今月は土日は部屋からほとんど出てないです。 なので日記を書くことがありません。 …

学科オセロプログラム大会優勝するも自慢が過ぎて非難を浴びました・・

最近どうも体調がすぐれません。  間違い無く体力不足です。パソコンの前 …

マトリックス・ウイルスに感染するも三ヶ月放置

CGIにも飽きてきた…。IPルーティングのプログラム分からん…。  & …

Webサイト上でCGIを使って自作してログを取得する

Webサイトで実はかじったCGIで自作して「ログ」を取得している。  …

ネクスト and ポストソーシャルは何か?

2011年12月31日(土) よいお年を。 父親「遊んでばかりいるんじゃない!リ …

KerasのFunctional API Modelの構造を理解する(ディープラーニング)

Kerasには2通りのModelの書き方があります。 Sequencial Mo …

17,220人/日 のアクセス数を達成しました(晒され記念日)

中間発表終ったぁ~ 先生の顔が、非常にパッとしませんでしたが、気にしな~い。 と …

NAVERまとめに記事を盗まれた場合の対処方法

男の子「ねーねーお父さん。赤ちゃんはどこからくるの?」 父「赤ちゃんはね。コウノ …

人工知能は神となり、人々の信仰対象となる

日記を書くことを最低月2回と決めて続けてきましたが、最近は辛いです・・・。 本業 …

curlと1024バイトとExpect: 100-continue

GWも出社して動作確認の手使いと、今月末リリース予定の実装を進め中。 山手線も会 …