ページの最後で非同期に読み込むできあがったjsファイルをbody閉じタグの手前に入れます。scriptには一応ですがasyncを入れて非同期で実行されるようにします。付けて非同期読み込みで問題ありません。scriptタグのasyncについてMozillaが詳しく説明しています。asyncを付けた時の挙動が気になる方はこちらを参照して下さい。developer.mozilla.orgHTMLの軽量化html-minifierを使ってHTMLを最小化します。createErrorHandler('gulp.dest'));});HTML等のリソースを圧縮すると転送速度が速くなります。リソース(HTML、CSS、JavaScript)を圧縮するを参考にして下さい。サーバーサイドでリソースの圧縮とキャッシュお約束のmod_deflateとmod_expiresです。days"</ifModule>読み込むリソースを減らすFontAwesomeのフォントファイルをインラインSVGに置き換えるFontAwesomeはCSSの中からフォントファイルを読み込みます。使うアイコンが限られている場合はインラインSVGに置き換えてしまうとFontAwesomeのCSSファイルとフォントファイル、2つのファイルの読み込みを削減できます。FontAwesomeを使うにはclassにfaとfa-xxxxを指定します。fa-cogs"></i>これを以下のようにSVGをインライン展開します。797z"/></svg></i>展開しているSVGのスタイルをCSSで定義します。#fff;}FontAwesomeを個別にSVGにする説明は以下を参照して下さい。github.comまとめページ表示が速くなると気持ちいいですね。FontAwesomeのようにクロスオリジンの影響でCSS内でリソースを追加取得しているものはCDN経由を止めて自前でウェブサーバーに設置するか、この記事のようにSVGに置き換えてしまうと良いかも知れません。CloudFront等のCDNに設置するとさらに速くなります。ディスプレイ広告やアクセス解析タグが複数入ってくるとPageSpeedで100点を取るのがさらに手間で難しくなりますが、速いサイトは永遠のテーマですので頑張って追及して下さい。この記事はレコーディングダイエットができるウェブアプリを開発した中で「Twitterで共有する」機能を実装している中で色々調べた内容をまとめたものです。tkosuga.jpインストール必要なしブラウザで動作するのでよかったら試して見て下さいね。おまけWordPressを高速化するには?自前で色々な労力を割くよりもKUSAMAGIを使った方が確実に速くて堅牢です。kusanagi.tokyo高速化したWordPressの保守で苦労しないためには?保守で色々と苦労するなら最初からWordPress.comを使った方が確実で堅牢です。全ドメインがHTTPS対応しています。トラフィックの急増におびえる必要もありません。wordpress.comSEOのためにページ速度を上げるためには?まず以下の記事に目を通して下さい。Developersのパフォーマンスの最適化を読んで下さい。developers.google.comこれらページ速度最適化を行うにはCSS/JS/HTMLの知識の他に、サイトで利用しているフレームワークやプログラミング言語の知識が必須です。RubyOnRailsで作られているサイトであれば以下のようなスライドを読んで理解できる必要があります。Deck多くのサイトではネットワークよりもデータベースの性能がページ表示速度に大きく影響します。MySQLとPostgreSQLが遅いならば以下のようなスライドを参考にしてDBAやプログラマに相談する必要があります。yoku0825www.slideshare.netデータベースのボトルネックが解消されれば次にネットワークのボトルネックを解消します。具体的にはロードバランサーやリバースプロキシ、CDNの活用、リクエストを捌くウェブサーバーとアプリケーションサーバーの構成等の問題を発見し的確なアプローチを出来なければ速くなりません。クラウドコンピューティングやベアメタルサーバーの導入検討もここに分類されます。aws.amazon.comazure.microsoft.comcloud.google.com長くなってきたので話を折ります。SEOを目的としたページ速度向上はサイトのトップページだけ速くしてPageSpeedで良い点を取っても効果が薄いです。極端に遅いページが多数存在している、アクセスが集中したらすぐに遅くなる、アクセスエラーが頻発するようなサイトではなく、どのページに誰がアクセスしても速くて快適な状態を作るのがSEOでのページ速度向上です。そのためにはサイトを構成する一番上から下までに存在するボトルネックを1つづつ見つけて解消する必要があり、それを通して行うには相応の知識が必要です。SEOのためサイト速くする、という話は決して軽い話ではありません。サイトを開発・運用している現場と相談の上で進めるのをおススメします。ダイエット写真はうちのみーこ。今年も夏がやってきました。毎年この季節になると思うことはなんでしょうか?そう、ダイエットですよね。海にプールにフェスにビアガーデンと夏特有のイベントがあるたびに痩せなきゃ!と気を引き締めるのですが3日後にはすっかり忘れているものです。摂取にすれば自然と痩せられると頭では分かっていても実現するのが難しい。そんな自分のために、毎日のカロリーバランスを記録して摂取カロリーが消費カロリーを上回らないようにするウェブアプリを開発しました。tkosuga.jp使い方はかんたん、摂取カロリーを毎日入力するだけです。使うと使い方説明のツアーが始まるので、説明を見て進めるだけで利用開始できます。このカロリーを記録するダイエット方法をレコーディングダイエットと呼びます。数年前に流行りましたよね。基礎代謝量と生活強度から日常生活で自然消費されるカロリーを計算するので、摂取カロリーが消費カロリーを上回らないよう生活に気を付けて暮らせば自然と痩せて行く皮算用です。このウェブアプリではダイエットの成果をはちみつ・鮭・りんご・どんぐり・おにぎり換算で共有する機能もあるので、痩せてきたら友達に鮭x匹分も痩せたよ!と自慢しましょう。※キャプチャ2「鮭4匹相当のダイエットに成功だね!すごいね!」データ保持についてデータは全てブラウザ内に保存しています。ダイエットレポートを共有する場合を除き、データを外部に転送・保存など通信していません。複数ユーザーでPC/スマホを共有していてブラウザも共有している場合、共有している他ユーザーに見られてしまう可能性がありますのでご注意下さい。※プライバシーに関する情報(基礎代謝計算のための体重・年齢・性別)はダイエットレポートの共有および移行データに含まれません。個人的なダイエット成果と開発の動機ぼくはレコーディングダイエットのくまスリムの開発を始めた=個人で使い始めた6月~7カ月末の2カ月で80kgから74kgの6kgのダイエットに成功しました。ダイエット開始初日はスマホのメモアプリで摂取カロリーと消費カロリーを記録して、電卓アプリで合算してカロリーコントロールしていたのですが、2日目には早くも辛くなってきたので以下の3つ要件を満たしたアプリを自作する事にしました。スマホでお手軽に使える。ボタンを押すだけでカロリーコントロールできる。モチベーションを維持できる。要件を満たしていく中で幾つかの課題を抽出できました。以下解決した課題とその解決方法です。解決方法ブラウザだけで使えるウェブアプリにする。外部リソースをとにかく減らす。動作をとにかく高速化する。AdBlock/コンテンツブロッカー環境で動作するようにする。痩せたら褒められたい解決方法はちみつ・鮭などの謎単位で何だか凄い感を演出。SNS共有機能を付ける(LINE/Facebook/Twitter)。目標値やノルマを表示しない。現在の体重とか見える所に表示しない。メンテナンスに苦労したくない解決方法サーバーサイドを使わずHTMLで完結する形にする。gulpでビルドを自動化。お金かけたくない解決方法HTTPSには無料のStartSSLを利用。いま使っているさくらのレンタルサーバー(月額数百円)で動かす。セキュリティ/プライバシーで苦労したくない解決方法HTTPSの導入ウェブストレージの利用。サーバーサイドで保存しない。生年月日にニックネーム入力等をしない。技術的な情報ここからツール紹介からがらっと変わって技術的な情報です。StartSSL本アプリのドメイン(tkosuga.jp)には無料で使えるStartSSLを利用しています。Infrastructure1アカウントで上限5つのサーバー証明書を無料で発行できます。企業情報や個人事業主の情報を入力する必要がありません。クラス1の証明書です。Test)を試して見ます。※上記キャプチャはhttps://www.ssllabs.com/ssltest/の結果SSLハンドシェイクの欄を見るとStartSSLは昔のブラウザに対応していないんですね。本アプリはさくらレンタルサーバーで動作しているのですが、SSLを有効にするとサーバーにはHTTPSが解除された状態で転送されます。リバースプロキシを経由してレンタルサーバーに辿りついているようです。そのため.htaccess等で「httpならhttpsに転送する設定」をするとリダイレクトループが起こります。これを回避するにはさくらレンタルサーバー特有のカスタムHTTPヘッダに付与されているX-Sakura-Forwarded-Forを利用します。[R=301,L]</IfModule>SVG本アプリはPNG/JPEG画像等(ラスター画像)を使わずにインラインSVG(ベクター画像)を利用しています。以下のアイコンは全てインラインSVGです。Awesomeアイコン)SVGアニメーションロゴアイコンのアニメーションにhttp://maxwellito.github.io/vivus/を利用しています。CodePenにロゴアイコンとVivusを使ったデモを設置しました。codepen.ioVivusを使うと下のコードだけでSVGアウトラインのアニメーションができます。100msecでポーリングしながら開始と終了を延々とループさせています。fa-icon-name」とします。お馴染みの形式ですね。Awesomeのアイコンを表示しています。%></i>CSSでは以下のように文字幅に合わせてSVGの横幅を指定し、横幅に合わせてSVGの高さ上限を指定しています。em)についてはMozillaの説明が分かり易いです。developer.mozilla.orgremは2016年現在の主要ブラウザでサポートされているので利用して問題ないと思います。http://caniuse.com/#feat=remFont-AwesomeアイコンのSVG化には以下を利用しています。APIを利用しています。developer.mozilla.orgウェブストレージは便利な反面、もしブラウザに脆弱性が見つかりその範囲にウェブストレージが含まれていればウェブストレージに保管されている重要な情報が漏えいする可能性があります。そのためダイエットアプリでお約束になっている生年月日の入力・保存といった個人の特定に繋がる情報(他には姓名やニックネーム)を保存しないようにしています。ウェブストレージ利用のサンプルコード以下のコードはウェブストレージAPIを使ってハッシュマップをsave/loadするサンプルです。JSON#parseとJSON#stringifyでシリアライズを実現しています。saveToStorage(options);共有するデータのシリアライズ+圧縮データ共有の仕組みにはウェブストレージに保存しているデータをシリアライズしURLに付与して、他ブラウザで開いた時のそのURLからデータを復元する方法を取っています。ものすごく便利なライブラリです。利用をしたサンプルコードです。文字列をURIセーフな形に圧縮して復元しています。APIを利用しています。developers.google.comここだけサーバーサイドでrubyのCGIを利用しています。hash['id']endshorten(URI.unescape(cgi.params['u'].first))毎日のカロリー変動を見るラインチャートMetricsGraphics.jsを利用しています。metricsgraphicsjs.orgCodePenにデモを準備しました。見やすくするため線と文字を太く大きくしています。codepen.io四方の余白と高さを指定して2本の線で描画するデータを渡すとキレイなラインチャートが表示されます。http://benpickles.github.io/peity/CodePenのデモを準備しました。codepen.ioこのチャートライブラリはとても分かり易くて便利で、使い方は以下の通りです。直感的でシンプルですよね。$("span.pie").peity("pie"));スマホのクリックを速くするfastclickgithub.comfastclickを利用してスマホでボタンを押したときの反応速度を向上させています。何をしているのかなと思ってこのライブラリの実装を見てみるとclickやtouchstartのEventListenerを入れ替えたりイベントの伝播に変更を加えたりしています。長くなってきたのでアプリ内で利用していて説明していないライブラリを列挙します。みんな大好きなintro.jsがMITライセンスからAGPLv3と商用ライセンスのデュアルライセンスに変更されたのでこっちにチャレンジ。ファビコン一式を作ってくれる便利なウェブサービス。まとめお手軽に使えるダイエットアプリ作ったので使って見てね!tkosuga.jpぼくはこのウェブアプリでダイエットに成功、さらにフロントエンドとNode.js/gulpと今風のサイト高速化にSVGの勉強もできたので万々歳です。意見要望があれば気軽にブログのコメントやTwitter宛てにコメントをください。Google写真はうちのみーこ。2016/7/21日時点。スペイン語、日本語テキスト量1リクエストで1Mバイトまで。1Mバイトを超えるとAPIErrorを返す。トークン量1リクエストで10万まで。10万を超えるとIgnoredを返す。※プロジェクト・アプリケーション(IP)で制限を共有100秒で1,000回まで。1日で80万回まで(ただしフリーβ期間の2016/8/1日までは1日5万回まで)。records)単位です。API呼び出し回数ではありません。5,000テキストレコードまで無料。料金計算は1,000テキストレコード単位。以下、テキストレコード数を軸にした料金テーブルを作りました。$26月に20万テキストレコードを分析して$50(6,000円程)を安いと見るか高いと見るか。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。