PageSpeed InsightsThis site uses cookies from Google to deliver its services and to analyze traffic.
見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI
当ブログでも最近、SVGの素材を紹介することが多くなりました。そんなSVGファイルから不要なデータを取り除いて軽量化するアプリを紹介します。 ↓は、今日紹介したアイコンのSVGを軽量化したものです。 ほとんどのファイルが50%以上軽量化されました。 SVGO GUI SVGO GUIは、Node.jsベースのSVG軽量化ツール「SVGO」をGUIで操作できるようにしたもので、Windows用とMac用が揃っています。 使い方は非常に簡単で、Mac用で説明します。 ダウンロードしたSVGO GUIをダブルクリックして、起動します。 SVGO GUIの起動画面 あとは、このパネルにSVGファイルをドラッグするだけでOK！ ※軽量化は元ファイルに上書きするため、元ファイルが必要な時はファイルをコピーしてから利用してください。 SVGファイルの軽量化、完了！ 軽量化しても、グラフィックのクオリティ
Compressor.io - optimize and compress JPEG photos and PNG images
Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP
Caesium - Image Compressor
Caesium is one of the most popular image optimization software available helping photographers, bloggers, webmasters, businesses or casual users at storing, sending and sharing digital pictures. Image Compressor Providing a simple yet effective interface with a real-time preview and multiple image processing at the same time, everyone will be able to reach the best result. Advanced users will find
Google先生の言うとおりWordPressを高速化して元に戻した。
圧縮を有効にしろ スクロールせずに見えるコンテンツのレンダリングブロックしろ 画像を最適化しろ JavaScript を縮小しろ ブラウザのキャッシュを活用しろ リソース（HTML、CSS、JavaScript）を縮小しろ JavaScript を縮小しろ サーバーの応答時間を短縮しろ 以下、まずは初心者の方のでも実装が簡単そうなものから紹介します。 リソース（HTML、CSS、JavaScript）を縮小しろ CSSやjs、HTMLを圧縮して最適化（Minify）します。要は、空白とか改行とかコメントとかをギュッとします。オンラインツールがあるので簡単です。 tool http://www.creativyst.com/Prod/3/ ①に現在のCSSやjavascriptをコピーして②を押すだけ。 作成された③をコピーして張り替えればOKです。 但し、可読性は落ちるので常にCSSとかを
スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
もっさりFirefoxが劇的に軽くなる「Vacuum Places Improved」 :教えて君.net
Firefoxを長期間使っていると動作が重くなってくる。「Vacuum Places Improved」でバキュームしてデータベースを最適化し、当初の速度を回復させよう。ワンクリックでバキュームを実行できるほか、自動バキュームの設定も行えるぞ。 Firefoxの「places.sqlite」には履歴やブックマーク情報が収納されている。このデータを最適化すれば、Firefoxの挙動を当初の軽さに戻すことができる。アドオン「Vacuum Places Improved」でバキュームが定期的に実行されるように設定しておこう。 ■ 重くなったFirefoxのデータベースをリフレッシュ 「Vacuum Places Improved」をインストール後、「ツール」→「Placesを掃除」をクリックしよう 画面右下にポップアップでバキュームの完了が表示される ツールバーを使わなくても、Firefoxの
XP SP3＆nLiteのコンボ技でXPを底の底から高速化 | 教えて君.net
nLiteを使う前に使用中のXPのプロダクトキーを確認しておく。その後、SP3の配布ページを開き「ダウンロード」をクリックしてファイルを保存する。SP3のファイルは2種類あるが、CDイメージファイルではない方をダウンロードすること 自分のパソコンのハードウェア用のドライバを事前にダウンロードし、CD-Rなどに焼いて保存しておこう nLiteを起動するには.NET Framework Version 2.0が必要だ。インストールされていない場合はダウンロードしてインストールしておこう 「WindowsCD」という名前のフォルダを作成。ウインドウズXPのインストールCD-ROMから全ファイルをコピーしよう nLiteをダウンロードしてインストールする。最初に表示される言語選択画面では「English」を選ぼう。後で表示される「Language」で「Japanese」を選ぶと日本語表示に切り替わ
JPEG画像をさらに10％圧縮してページ表示を高速化する「mozjpeg」
By JoshArdle Photography 既存の多くのデコーダーと互換性を保ちながら、従来よりもJPEG画像のファイルサイズを削減できるエンコーダーを開発する「mozjpeg」プロジェクトをFirefoxやThunderbirdなどを開発するMozillaが開始したことが発表されました。 Introducing the ‘mozjpeg’ Project | Mozilla Research https://blog.mozilla.org/research/2014/03/05/introducing-the-mozjpeg-project/ JPEGは1992年頃から使用されている画像ファイル形式で、非常に長い間、ウェブ上で最もよく使用されている画像形式でした。そして、現在もウェブ上に存在する写真の多くはJPEG形式のものです。JPEG形式は元画像を変換して圧縮する割合に応じて
知らないと損するケータイFlash軽量化テク30連発！（1/3）- ＠IT
知らないと損する ケータイFlash軽量化テク30連発！ まだまだ健在のガラケーのSWFを1バイトでも軽くするには 株式会社サイバーエージェント 渡辺 梓 2011/7/20 スマホへの移行が増加しているという話題が多い中、まだまだ使われているFlash Liteコンテンツ。さまざまな機種でストレスフリーなアプリを制作するために最も気になる点はSWFファイルの軽量化と、実機での動作の軽さではないでしょうか。 本稿では、デザイン制作、Flashオーサリング、「Transform」を使ったSWF合成の3軸で、サクサクと動くFlash Liteコンテンツの作り方を説明します。 デザインから始める軽量化 スムースポイントを減らす 違いがほとんど分からないときは、コーナーポイントでも減らす グラデーションの代わりにブレンド 繰り返し使う形はインスタンス化 極力、アルファを使わない アウトラインに当た
2013年のアクセス解析界隈で気になった記事ベスト10＋α - Real Analytics （リアルアナリティクス）
今回は前回のアドベントカレンダーに続き、UX Advent Calendar 2013にも参加させていただき、本日担当となるので、件名のトピックスでお届けしたいと思います。筆者はデザイナーやUXに携わっている方（の多くが）読んでいているWebDesigningという雑誌で1年ほど連載を行っています。筆者自身はUXには強く無いのですが、デザイナーやエンジニアにも解析を意識してもらいたいなと思い、コンテンツを毎月書いております。というわけで、UXの観点も交えながら、今年おすすめの記事を10+α個紹介いたします。 image from flickr 1:唯一の販売チャネルから最大の成果を得るためにテスト＆分析でコンテンツ貢献度をチェック／ライフネット生命保険のアクセス解析事例【Web担当者フォーラム】 唯一の販売チャネルから最大の成果を得るためにテスト＆分析でコンテンツ貢献度をチェック／ライフネ
【JavaScript】メモリの浪費を避けるコーディング | ヘッドウォータースのブログ TechNote
こんにちは。良昌です。 Facebook、GithubなどのJSON形式でユーザ情報を返却するAPIや、PhoneGap、Monacaなどのスマートフォンのマルチプラットフォームを提供するライブラリ、IDEが開発ツールとして定着してきたことにより、JavaScriptを利用する機会が増えたのではないでしょうか。 今回は、JavaScriptコンテナがWebブラウザの場合に、動的に確保されるメモリ領域の浪費を避ける方法について書きたいと思います。 JavaScriptにおけるメモリの浪費を避けるコーディング JavaScriptにおけるメモリの浪費を避けるコーディングをするためには、GC(ガベージコレクション)、クロージャについての知識が必要です。まずは、この2つの機能について説明していきます。 ■GC(ガベージコレクション) GCとはプログラムが動的に確保したメモリ領域の内、不要になった領
グーグルのガイドラインに違反すること無くトラフィックを増やす13の心得|グロースハックジャパン|Growth Hack Japan
「SEOなんて時代遅れ」 最近良く耳にする言葉です。 事実として、ブラックハットSEO（隠しテキストや不自然な被リンク施策）に対してグーグルが監視を強める中、多くのビジネスにとってSEO対策のみで集客を行う時代は終焉に近づいていると言えるでしょう。 一方で、大手検索エンジンの月間ユニークビジター数を見ると、圧倒的に無視できないマーケティングメディアであることは紛れもない真実。 「SEOなんて時代遅れ」ではなく、「SEOを含むマーケティング手法の多角化が必要」と言う表現がより適切ではないでしょうか？ 本日はそんな現状を考慮して、「グーグルのガイドラインに違反すること無くトラフィックを増やす13の心得」をご紹介致します！ 1. ロングテールを狙う ロングテールキーワードとは、「埼玉 求人」や「新宿 和食レストラン 個室」といった複数のキーワードを組み合わせた検索クエリのこと。 特にローンチ直後
ランディングページ最適化でCVR大幅アップ！データドリブンなプロセスで改善案を導き出し、成果につなげる方法とは？
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
[JS]スクロールやスライド時に変化する背景に合わせてナビゲーションのテキストなどを最適なカラーにするスクリプト -BackgroundCheck
ユーザーのアクションで背景が変化するコンテンツ、例えば、複数のパネルを垂直に配置し、パネルごとに背景のカラーを変えているとか、スライダーの画像や写真に明るいカラーや暗いカラーが混在しているなど、そういった時にナビゲーションを暗いカラー、もしくは明るいカラー、どちらにしようか迷うことがありませんか？ 変化する背景のカラーに合わせて、指定したテキストやエレメントを最適なカラーに変更するスクリプトを紹介します。 BackgroundCheck BackgroundCheck -GitHub BackgroundCheckのデモ BackgroundCheckの使い方 BackgroundCheckのデモ デモは、スクリプトの基本性能、スクロール、スライドの3種類です。 Chrome, Safari, Firefoxなどモダンブラウザをはじめ、iPhone/iPadなどのiOS6/7でも動作します
[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
ページ内ユーザー行動解析を用いた、ユーザーシナリオ最適化
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
PPCランディングページの最適化：6つの対策 | Moz - SEOとインバウンドマーケティングの実践情報
コンバージョン率が低いランディングページがあるだろう。しか残念ながら、それは顧客のせいではない。なぜ自分の製品が素晴らしいのかを顧客に伝えるのは君の仕事だ。それも、5秒以内で伝えなければならない。それがランディングページだ。 新人マーケターにもベテランマーケターにも役立つよう、PPC広告のランディングページでしょっちゅう見かける「典型的な落とし穴」を回避するためのチェックリストをまとめてみた。グーグルアドワーズのキャンペーンを実施する前に、このリストにある推奨策を検討してみてほしい。 この記事で説明するのは、次の6点だ。 カーソル位置をあらかじめ指定しておくアイコンタクト顧客の声信頼保証見出しを来訪者の意図と一致させる行動喚起は1つだけでは、1つずつ解説していこう。 1. カーソル位置をあらかじめ指定しておく君のランディングページには、顧客に入力してもらいたいフォームフィールドがあるかな？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カスタマイズしたFacebookページを見てもらう工夫をしよう／Facebookマーケティングの教科書#3-4後編 | 現場のプロがやさしく書いた Facebookマーケティングの教科書
肥大化した「Firefox」の各種データベースファイルを最適化「SpeedyFox」NOT SUPPORTED