Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール
スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。 既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介します。 ※秒数は目安です クリティカル レンダリング パス(Critical Rendering Path)とは、ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になり、この時にブラウザがページの最初のペイントを実行するために必要とするシーケンスのことです。 クリティカル レンダリング パスについて詳しくは、下記を
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
インターネット回線速度やPing値・パケットロスをまとめて一気に測定できるHTML5で作られた通信速度測定サイト「SourceForge Speed Test」
ユーザーのインターネット通信環境を、Ping値(応答速度)や上り下りの通信速度、パケットロスなどの複数の項目に分けて表示してくれるのが「SourceForge Speed Test」です。サイトはHTML5で作成されており、FlashやJavaなどを使用していないので、PCの他、スマートフォンやタブレットからでも利用できるサイトになっています。 Internet Speed Test - HTML5 Speed Test https://sourceforge.net/speedtest/ 「SourceForge Speed Test」で計測できる各項目がどういった数値なのかは以下の通りです。 ・Latency/Ping(レイテンシ/Ping値) コンピューターから別のコンピューターにデータ転送などを要求し、その結果が送信されるまでにかかる時間が「レイテンシ」で、これを示すのがPing値
無料で自分のインターネット接続速度を簡単に測定できる「Fast.com」
PC・スマートフォン・タブレットのインターネット接続速度を簡単に測定できるサービス「Fast.com」を、動画配信サービスのNetflixが無料で提供開始しています。 インターネット回線の速度テスト | Fast.com https://fast.com/ja/ 上記ページにアクセスするだけで、自動的にインターネットの回線速度の計測が始まります。 10秒ほどで、ダウンロード速度の計測結果を表示。Netflixサーバーから複数回ダウンロードを行うことで、ダウンロード速度を推定しているとのこと。右側のリロードボタンをクリックすると、再度計測が始まります。 何度か測ってみたところ、最高速度は91Mbpsでした。結果画面には速度測定サービスのSPEEDTEST.NETへのリンクが表示されており、速度を比較できるようになっているので、試しにクリックしてみます。 SPEEDTEST.NETのページが開
ウェブページの重さを計測して高速化に向けたアドバイスをくれる「imgix Page Weight Tool」
ウェブサイト上に画像をアップロードする際、複数サイズの画像を用意したりファイルフォーマットを変換したりすることで、少しでもファイルサイズを小さくしてサーバーに負荷がかからないようにしますが、こういった地味な作業は取り扱う画像の数が多くなれば多くなるほど面倒になっていくものです。そんな画像加工関連の処理を自動かつリアルタイムで行ってくれるサービスが「imgix」で、ウェブページを表示する際に重要な「ページの重さ」を計測してくれるサービス「imgix Page Weight Tool」を提供しているので実際に計測してみました。 imgix Page Weight Tool • Learn how to improve your site or app’s speed. https://pageweight.imgix.com/ 「imgix Page Weight Tool」の使用方法はとても
GIF画像・アニメーションを最適化してサイズを削減する「GIFmicro」
GIF画像・GIFアニメーションを最適化してファイルサイズを縮小し、トラフィック量の削減に貢献してくれるソフトが「GIFmicro」です。動画から簡単に好きなサイズや長さのGIFアニメを作れる「Movie To GIF」を使えばいろいろなGIFアニメーションを誰でも簡単に作れますが、できたGIFアニメーションをこのGIFmicroで最適化すれば、よりファイルサイズが小さい状態で人に見せることができます。 GIFmicro | GIFファイル最適化アプリ | Romeolight http://www.romeolight.com/ja/products/gifmicro/ ◆ダウンロードからインストールまで 上記ページの中ほど、右カラム「Download」の下にある「Download Now」をクリック。 ダウンロードした「GIFmicroSetup.exe」を実行します。 「実行」をクリ
無料で簡単にサイト全体の表示速度を劇的にアップさせる「CloudFlare HTTP/2」
Web負荷分散システムを提供するCloudFlareが2015年6月に発表された通信プロトコルHTTPの新バージョン「HTTP/2」のサポートを開始しました。HTTP/2はSPDYを改良しパフォーマンスを上げたものですが、CloudFlareを利用すればさらに高速でウェブサイトの表示が可能になります。 CloudFlare HTTP/2 | CloudFlare | The web performance & security company https://www.cloudflare.com/http2/ 各地に分散されたキャッシュサーバーを介してアクセスすることでウェブサーバーの負担を軽減させるCloudFlareは、サービスが無料であることと、「CloudFlareアカウント作成」「DNSレコード入力」「CloudFlareのネームサーバー名をウェブサーバーに登録」というステップで
jQueryの必要としない機能を削除して軽量化できるオンラインサービス -jQueryConfig
jQueryを使用する時、毎回全部の機能を使用していますか？ 必要としない機能を削除して、あなたが使用する機能だけのjQueryを作ることができるオンラインサービスを紹介します。 jQueryConfig jQueryConfig -GitHub jQueryのバージョンは、2.1.4, 1.11.3, 1.8.3 の3つに対応（2015年11月現在）しており、チェックボックスを操作するだけで簡単に自分が必要としない機能を削除して、軽量化されたjQueryをダウンロードできます。 jQuery 2.1.4 フル版 上のバーはjQueryの各機能とファイルサイズで、下のチェックボックスで必要としない機能のチェックをはずします。 最適化の助言 各モジュールには、下記の機能が含まれています。 Eventモジュール .on()と.off()メソッド、すべてのイベント機能、.click()や.mou
無料の通信速度測定サービス「RBB SPEED TEST」にキャリア別ランキングや前日の最速値TOP10機能などが追加されリニューアルオープン、PCやスマホで使ってみたレビュー
ブロードバンド情報サイトRBB TODAYの提供する無料の通信速度測定サービスが「RBB SPEED TEST」です。PCとスマートフォンで回線速度を計測することが可能で、1カ月に150万回以上の速度計測を行っており、専用の計測サーバをIX直下に置くことで同時計測できる人数を制限するなどして精度を保っているとのことで、実際にPC用サイトとスマートフォンアプリを使って、さまざまな条件下で回線速度を計測してみました。 RBB SPEED TEST | 回線速度・通信速度測定サイト http://speed.rbbtoday.com/ 通信速度測定サイト「RBB SPEED TEST」（スピードテスト）をリニューアルオープン | 株式会社イード http://www.iid.co.jp/news/press/2015/081901.html ◆PC版 PC版「RBB SPEED TEST」のトッ
JPEGファイルのサイズを最大で1/12ほどに縮められる「JPEGmini」と「JPEGmini Pro」を使ってみた
写真をSNSやオンラインストレージにアップロードするときやメールに添付して誰かに送りたいというとき、ファイルサイズはできるだけ小さくしておきたいものですが、一方で画質の劣化も避けたいところ。そんな要望に応えてくれるのが、JPEGファイルのサイズを縮小してくれるWindows・Mac向けソフトウェア「JPEGmini」です。機能制限付きのトライアル版、機能制限が外れた有料版、さらに機能を拡充したプロ版といくつかバージョンがあるので、どれぐらい差があるのか、プロ版を購入してトライアル版と比べてみました。 JPEGmini - Your Photos on a Diet! http://www.jpegmini.com/ JPEGminiはインストールして使うソフトウェアなのですが、公式サイトでもそのファイルサイズ削減の威力を確かめられるようになっています。トップページに表示されている画像の左下
jQueryのカスタムビルドが簡単にできるサービス「jQuery Builder」
jQueryのカスタムビルドが簡単にできるサービス「jQuery Builder」の紹介です。 １．はじめに jQueryではカスタムビルドという、動作に必要な機能だけを組み込むツールがgithubで提供されています。 カスタムビルドのreadme ただし、このツールを実行するにはnpmやgruntなどのコマンドを実行できる環境を整える必要があります。 本エントリーで紹介する「jQuery Builder」を利用すれば、前述のコマンドを自分で実行する代わりに、ブラウザ上でカスタムビルドを実行することができます。 ２．使い方 Optionsの部分で利用したいバージョンと圧縮有無（Minify）を選択します。 Modulesの部分で、組み込みたいモジュールを選択します。右上の「All」「None」でチェックのON/OFF、右下にファイルサイズを表示します。 Buiidをクリック。 新しいウィン
没有找到站点
您的请求在Web服务器中没有找到对应的站点！ 可能原因： 您没有将此域名或IP绑定到对应站点! 配置文件未生效! 如何解决： 检查是否已经绑定到对应站点，若确认已绑定，请尝试重载Web服务； 检查端口是否正确； 若您使用了CDN产品，请尝试清除CDN缓存； 普通网站访客，请联系网站管理员；
ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」
SVGO は SVG ファイルから不要なデータを取り除いたりして最適化してくれる便利なソフトウェアですが、これをブラウザの画面から使えるようにしたのが、「SVGOMG」 です。 SVGOMG SVGOMG ： GitHub 例えば JPEGmini の Web 版とか TinyPNG のような画像最適化ツールがありますが、これの SVG ファイル向けですね。ブラウザから簡単に操作できますし、最適化オプションの適用も画面上で SVG ファイルの変化を確認しながら行えますのでわかりやすいと思います。 SVGO には下記のようなオプションが用意されていますが、 cleanup attributes from newlines, trailing and repeating spaces → 属性値内の重複する空白や改行を削除 remove doctype declaration → DOCTYP
SVGを圧縮できるSVGOMGのGUI,プレビューが便利。 / Maka-Veli .com
SVGを圧縮/最適化できるSVGOはMissing,GUIとのことで、プレビューできるGUIを付けたWebツールです。 Oh my gosh!!(太字の部分から SVG “OMG” だ、そうです…） SVGOモノはよくあるヤツかもしれませんけど、 でもまぁ使ってみると、サクサクっとプレビューしながら触れるのは凄く便利。手軽で良いですね。 わかりやすい例でやるとこんな感じです。車体、後ろの方が少しパスが雑になってる。 ページ右上に圧縮率とサイズ SVGOMG https://jakearchibald.github.io/svgomg/ まだ開発途中だからフィードバックしてね、との事。 詳しくて英語できる方、是非。 https://github.com/jakearchibald/svgomg/blob/master/README.md ひとこと 3日連続で更新したった
TinyPNG が JPEG ファイルの最適化にも対応、TinyJPG もローンチ
PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツール 「TinyPNG」 が JPEG ファイルの最適化にも対応しました。 これにあわせて、「TinyJPG」 も立ち上がりましたが、TinyPNG も TinyJPG も、どちらも PNG / JPEG ファイルの最適化を同時に行えるようになっていますので、サイト名が異なるだけで機能的には同じです。 上が元々ある TinyPNG で、下が TinyJPG のスクリーンショット。 使い方は同じで、パンダさんの横の ドラッグ & ドロップ エリアに、最適化したい画像をドラッグ & ドロップすればいいだけ （もしくはこの部分をクリックしてファイルを選択）。同時に 20 ファイルまで最適化できます。 今までの TinyPNG は PNG ファイル専用で、JPEG ファイルをアップロードすると当然ながらエラーになりましたが、今は JP
透過PNG/GIF画像を大幅に軽量化！SVG画像に変換する無料のオンラインサービス -ZorroSVG
透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。 透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。
GIFファイルを自動的にMP4に変換し高速ロード可能なImgur新機能「Project GIFV」
画像共有サイトの「Imgur」がアップロードされたアニメーションGIFファイルをgifv形式というMP4ムービーに変換する「Project GIFV」を開始しました。gifv形式のMP4ムービーはアニメーションGIFファイルよりもファイルサイズが劇的に小さいので、ウェブサイトやブログに埋め込むと、ロードが従来よりかなり早くなります。 Introducing GIFV – Imgur Blog http://imgur.com/blog/2014/10/09/introducing-gifv/ ImgurにアップロードされたGIFファイルは自動的にgifv形式のMP4ムービーに変換されますが、gifv形式のファイルをHTML5でサイトやブログに埋め込んだ際の見た目はGIFファイルと全く同じ。しかも、ファイルサイズがGIFファイルよりも少なくなるため、ロードがかなり早くなります。 ということで
無料でドラッグ＆ドロップするだけで画質劣化ゼロのままファイルサイズが減る「mozjpeg encoder」
jpg、bmp、targaといったファイルフォーマットの画像を画質を劣化させずにより小さなファイルサイズのものに圧縮してくれるエンコーダーが「mozjpeg encoder」です。JPEG画像をさらに10％圧縮してページ表示を高速化する「mozjpeg」プロジェクトで公開されているソースコードを基に作られたもので、一瞬でファイルサイズを小さくできます。 mozjpeg encoder https://mozjpeg.codelove.de/ これがmozjpeg encoder。 画面上部にある赤枠部分で画質をどれくらいにするか変更可能。「lossless」を選べば画質の劣化なしにファイルサイズを落とすことも可能。 使用する際は画像ファイルを「before」部分にドラッグ＆ドロップ。 すると処理がスタートして…… ファイルサイズを落とすことに成功。 オリジナル画像は0.99MB。(クリック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://jakearchibald.github.io/
コメントアウトや空要素等を取り除けるHTML圧縮ツール・「HTML Minifier」
