ボタン一発でWindowsを必要最小限の構成に変更して軽快な動作を実現してくれるツール「Win Debloat Tools」レビュー
「Win Debloat Tools」は難しい設定を行わずともボタンを押すだけでWindowsから不要な機能を削除し、必要最小限の構成に変更して軽量化を実現してくれるツールです。実際に使ってどれくらい動作が改善されるのかを確かめてみました。 GitHub - LeDragoX/Win-Debloat-Tools: Re-imagining Windows like a minimal OS install, already debloated with minimal impact for most functionality. https://github.com/LeDragoX/Win-Debloat-Tools GitHubのページにアクセスし、「Download Latest Version」の項目にある「Main」をクリック。 zipファイルがダウンロードされるのでクリックして
Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール
スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。 既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介します。 ※秒数は目安です クリティカル レンダリング パス(Critical Rendering Path)とは、ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になり、この時にブラウザがページの最初のペイントを実行するために必要とするシーケンスのことです。 クリティカル レンダリング パスについて詳しくは、下記を
optimize-js - JavaScriptのコードを最適化して初回実行を高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptはWebブラウザで標準サポートされている唯一のプログラミング言語です。そのため書けるという人は多いのですが、自信をもってパフォーマンスの高いコードが書けると言い切れる人は少ないのではないでしょうか。 そんな方に使ってみて欲しいのがoptimize-jsです。既存のJavaScriptを最適化し、高速化するライブラリです。 optimize-jsの使い方 optimize-jsはnpmでインストールできます。 npm install -g optimize-js 後は処理対象のファイルを指定すると、標準出力で最適化されたコードが返ってきます。 optimize-js input.js > output.js 実際に試すと、括弧の付き方が変わっています。 $ dif
Gulp+WebPackで作るTypeScript開発環境【5分でできる！】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
それでは順を追って作ってみましょう！ ディレクトリの準備 まずはディレクトリを用意します。 今回はts-templateフォルダの中にindex.htmlを置きました。 ts-template �└── index.html 作ったらterminalで移動しましょう。 package.json作成 package.jsonを作成します。 npm init 何かいろいろ聞かれますが、全て[enter]でOKです。 ts-template ├── index.html └── package.json モジュールのインストール 必要なモジュールをインストールしましょう！ まとめてインストールもできますが、今回は1つずつインストールしていきます。 gulp gulp-connect gulp-webpack ts-loader typescript npm install gulp --save
Gulp.jsとPostCSSを使ってCSSの面倒な作業をなくそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
重いGIFアニメを軽いムービーに変換してファイルを10分の1以下に圧縮して埋め込みもできる「Gfycat」
ファイルが巨大化してしまったGIFアニメファイルや、URLを指定したYouTubeの動画を軽量なwebm形式のムービーに変換してくれるサービスが「Gfycat」です。このサービスを使うと簡単にファイル形式の変換ができるほか、サイトやブログに埋め込むためのURLを取得することもできるようになります。 Gfycat - jiffier gifs http://www.gfycat.com/ ファイル変換を行うためには、まずページ右上にある「Upload」をクリック。 すると、ファイル選択用のダイアログが表示されます。「From Computer」タブにファイルを直接ドラッグ&ドロップするか、「browse」をクリックしてファイルを選択すればOKです。 または、「From URL」タブを選択し、YouTubeなどのURLをペーストして「Fetch」をクリックすることでも変換を開始することが可能で
Adblockよりもはるかに軽い広告除去ツール「µBlock」を使ってみました
ウェブページの広告を非表示にすることで表示速度をアップしようとAdblockなどの拡張機能をインストールしてみたものの、かえって動作が重くなってしまうということがあります。そこで、広告を非表示にできAdblockよりもはるかに軽いと評判の拡張機能「µBlock」を使ってみました。 gorhill/uBlock · GitHub https://github.com/gorhill/uBlock ◆µBlockについて 広告を非表示にしてくれるブラウザの拡張機能としては「Adblock」が圧倒的に有名ですが、最近、企業からお金をもらってホワイトリストに追加するという動きをAdblockが見せ始め、デフォルト設定で表示される広告が増え、さらに、「以前より動作が重くなった」という意見がちらほら聞こえ始めています。 GoogleやAmazonは広告を消す拡張機能「AdBlock Plus」にお金を
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
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ファイルよりも少なくなるため、ロードがかなり早くなります。 ということで
無料でJPG、PNG、GIF、SVG画像を圧縮して小さくしてくれる「Compressor」
アカウント登録不要・無料で利用でき、手元にある画像ファイルをブラウザでアップロードするだけで瞬時にファイルサイズを小さくしてくれるサービスが「Compressor.io」です。 Compressor.io - optimize and compress your images and photos http://compressor.io/ ページを表示させるとまず目に飛び込んでくるのがこのカメレオンの画像。画像の上には白いバーが表示されており、マウスで左右に動かすことで圧縮前と後での画質変化を確認することができます。 画像の下には、圧縮前後のデータ容量の変化と圧縮率が表示されています。 このサイトで対応しているのはJPEG、PNG、GIF、SVGの4形式。圧縮時には、元の画質をキープできる可逆圧縮と、圧縮率重視の非可逆圧縮を選択することが可能となっています。 使い方の説明はこれだけ。あと
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
Pure を使って 5分でレスポンシブな Blog テンプレートを作る
Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。 さすがに 5分はウソです すいません。でも簡単でしたよ。 Pure ： A set of small, responsive CSS modules that you can use in every web project. Pure とは Pure は、簡単に言ってしまえば Twitter が公開している Bootstrap などと同じ、CSS のフレームワークですが、CSS のみに絞ることで、その容量は最大で 5.7KB とかなり軽量。Yahoo! の CDN から読み込めば、gzip された状態で読み込めます。 また、各機能を個別に読み込むことも可能ですので、必要な機能だけを選択す
指定した画像のファイルサイズを激減できるサービス「Compress PNG images」 : 二十歳街道まっしぐら
Compress PNG imagesはPNGイメージを高圧縮できるサービスです。 画像に利用する色の数を減らすことでファイルサイズを圧縮できます。 ある程度色を減らしても見た目あんまり変わらなかったりします。 PNG画像のファイルサイズを減らしたいときにどうぞ。 JPG, GIFなどの画像を選択すると、PNG化してさらに圧縮してくれます。 以下に使ってみた様子を載せておきます。 まず「Compress PNG images」にアクセスしましょう。 まず圧縮させたい画像を選択しましょう。 画像ファイルならJPG, GIF, BMPでもOKです。（出力はPNGになります） 読み込んだ画像を圧縮させます。 利用する色の数を減らしていくことでファイルサイズがぐんぐん減っていきます。 ちょうどいいなと思った所で「COMPRESS」ボタンを押して、圧縮された画像をダウンロードしましょう。 画像のファ
Firefoxを高速化する「SpeedyFox」
Firefoxを高速化する「SpeedyFox」を紹介します。 SpeedyFox １．Firefoxの問題点 Firefoxを長期間使っていると、閲覧履歴・ブックマークといった「プロファイル」を管理するためのデータベースが肥大化し、Firefoxの起動や動作が遅くなる原因のひとつになるようです。 ２．SpeedyFoxの機能 「SpeedyFox」はFirefoxのデータベースを最適化するツール（アドオンではありません）で、ワンクリックでデータベースを最適化してくれます。 ３．インストール SpeedyFoxのページにある「SpeedyFox for Windows」または「SpeedyFox for Mac OS X」をクリック。ここではWindows版での動作で説明を進めます。 ダウンロードしたファイルが実行ファイルになります。インストールウィザードによるインストールは不要です。 ４
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://jakearchibald.github.io/
コメントアウトや空要素等を取り除けるHTML圧縮ツール・「HTML Minifier」
LESSTESTER - Less Sandbox
