haruharujaneのブックマーク / 2016年2月2日

http://fbrank.main.jp/

haruharujane 2016/02/02

リンク

【HTML/CSS/JavaScript】リソースを圧縮して速度改善。概要と便利なツールの使用手順 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ

ソースの中の不要な部分を除いてコードを圧縮圧縮することでページスピードが上がる CSS、JavaScriptは変数名を変更することで更にファイルサイズを削減できるリソース（HTML、CSS、JavaScript）を圧縮する – PageSpeed Insights — Google Developers 至極単純です。とにかく無駄な部分を省き、速度改善を目指します。リソースの圧縮に関して、下記で紹介されているツールを使用することが推奨されています。 HTMLの圧縮 PageSpeed Insights の Chrome 拡張機能を使って、HTMLコードの最適化されたバージョンを生成できます。 CSSの圧縮 YUI Compressorとcss.min.jsを使用できます。 JavaScriptの圧縮 Closure Compiler、JSMin、YUI Compressorを使用でき

haruharujane 2016/02/02

リンク

Compressor.io - optimize and compress JPEG photos and PNG images

Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP

haruharujane 2016/02/02

画像圧縮

リンク

もう逃げない。HTMLのviewportをちゃんと理解する

と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。いろいろ調査した結果、以下の考え方で理解できると思う。まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。次にviewportを実際の液晶画面に表示する。この時、view

haruharujane 2016/02/02

“<meta name="viewport" content="width=480">”

viewport

リンク

Kraken.io Image Optimizer

Go PRO and unlock all the awesome features of Kraken.io PRO. Already a PRO member? Log in here. Kraken.io PRO comes with: Full API Access, Web Interface PRO, WordPress and Magento Plugins and Kraken.io Cloud Storage.