はてなブックマーク

リニューアルした日経電子版が高速すぎてヤバイ件 皆さんお読みになりましたか？ 社内では**Fastlyすごーい！！！**って話が大きく感じましたが フロントに関係しそうな最後の方に出てくるWebPについてちょっとまとめてみました。 WebPについて 【WebP画像形式とは】 米Googleが開発している静止画フォーマット。 ウェッピーって読むらしいですよ。可愛いですよね。 ファイルの拡張子は .webp 採用することでWebサイトの表示速度短縮やトラフィック量の節約が期待できます。 PNG/GIF/JPEG画像形式と比べてのメリット JPEGと比較してファイルサイズが25-34％小さくなる（非可逆圧縮モード） PNGと比較してファイルサイズが28％小さくなる（可逆圧縮モード） JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える エンコードは PNG よりも時間がかかるけど、デコー

体感しよう HTTP vs HTTPS Test このサイトでは、360個の画像ファイルを TSLなしの HTTP/1.1で読み込んだときと、 HTTP/2 で読み込んだ時のパフォーマンスの違いを試すことが出来ます。 HTTP/1.1 では読み込みが同時接続の制限によってブロックされ、全ての画像ファイルを読み込むのに時間がかかっているのが分かります。 一方、HTTP/2 では同時接続の制限がないため、多数の画像ファイルを高速で読み込むことが出来ます。 何でもかんでも変えればいいって話じゃない HTTP/2 は HTTP/1.1 に比べ利点が多く見えるので 「全部 HTTP/2 化しちゃえばいいじゃん！！」ヽ(｀▽´)/ と思われるかもしれません。 ですが、全てのサイトでただ導入すればサイトスピードが上がるのかと言われるとそうではないです。 効力が期待できないサイトというのもあります。 例え

初投稿です。よろしくお願いします(/･ω･)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング　-久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソースを節約させることであり、その節約した分ユーザを豊かにしているわけです。 ウェブページ遷移時の初期ロード時のパフォーマンスだけでなく ウェブページ内でのインタラクション(ユーザが起こした操作に対しての応答)の描画のパフォーマンスが重要になってきます。 読み込み