Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS
Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS "Eliminate render-blocking JavaScript and CSS". It's the one Google Page Speed Insights suggestion that I always get stuck with. When a web page is accessed, Google wants it to only load what's useful for the initial view, and use idle time to load anything else. That way, the user can see the page as early as possible. There are
Webフォントのファイルサイズを小さくする - Carpe Diem
概要 Webフォントを当てると途端にサイトが良く見えるようになりますが、一方でフォントファイルに入っている文字数が多いため、必然的にファイルサイズが大きくなってしまいます。 そこでフォントのサブセット化と呼ばれる、使用する文字だけをフォントから抽出して独自のフォントとして用意する方法があります。 5〜10MBほどあるフォントが大体数十KB程度になるので初期ロード時間が劇的に改善されます。 サブセットフォント生成ツール github.com このfontminというツールを使用します。 インストール gulp用のパッケージがあるのでそれを使います。 $ npm install -g gulp $ npm install --save-dev gulp gulp-fontmin 基本的な使い方 例として日本語以外の全ASCII文字列を対象にしてみましょう。 gulp.srcに元々のフォントファ
Personalization Offline Think with Google - Thought leadership - Insight
Marketing is at an inflection point. Here’s why that’s an opportunity
React is Slow, React is Fast: Optimizing React Apps in Practice
React is Slow, React is Fast: Optimizing React Apps in Practice React is slow. I mean, any medium-size React application is slow. But before you start looking for alternatives, you should know that any medium-size Angular of Ember application is slow, too. And the good news is: If you care about performance, it's fairly easy to make any React application super fast. Here is how. Mesuring React Per
How speeding up your mobile site can improve your bottom line
Marketing is at an inflection point. Here’s why that’s an opportunity
ImageOptimのベータ版に早くもGoogleのJPEGエンコーダー「Guetzli」が組み込まれたらしい
先日Googleが公開したJPEGエンコーダーの「Guetzli 」が早速、ImageOptimのベータ版（1.7.1a4） に組み込まれたみたいです。libjpegで書き出された画像よりファイルサイズが20〜30%ほど小さくできるとのことで期待しちゃいますね。 ただ、ベータ版の注意書きとして以下のように書いてあって、まだまだ実用レベルではないみたいです。あくまで試してみたという感じですね。現時点ではMozJPEG の方が優れている とのことで、Guetzliは今後に期待ですね。ちなみにMozJPEGも、1.6.0 でImageOptimに導入されています。 すごく時間がかかるのでデフォルトではオフになっています（環境設定からオンにできます）。メガピクセルごとに300MB RAMが必要で、プロセスに1分以上かかります。大きい画像の場合、ギガバイトのメモリを使用し30分かかるのが普通です。
Guetzli／Butteraugliに関するあれこれ - Qiita
2017年3月にGoogleから発表された新しいJPEGエンコーダ「Guetzli」と、同エンコーダが用いる画品質評価アルゴリズム「Butteraugli」について思うところとか。 Announcing Guetzli: A New Open Source JPEG Encoder GitHub google/guetzli GitHub google/butteraugli 多くのニュースサイトで『Google、JPEGを35％小さくできるエンコーダー「Guetzli」をオープンソースで公開』のようにセンセーショナルに紹介され、またGoogle社の手によるネームバリューもあったのか、世間の強い興味を引いたように思います。OSS方式にてソースコード公開されており、実際にエンコーダを動してみた方による良い／悪い評価結果が出てきています。 この記事では、同エンコーダ作者 Jyrki Alaku
Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed
Today, it’s critical that marketers design fast web experiences across all industry sectors. People want to quickly pay bills on finance sites, get rapid results when they’re browsing vacation reviews, and view an article immediately when they click through. And if there’s too much friction, they’ll abandon the site and move on. Here’s the good news. Since we looked at mobile page speeds last year
Base64 Encoding & Performance, Part 1: What’s Up with Base64? – CSS Wizardry
12 February, 2017 Base64 Encoding & Performance, Part 1: What’s Up with Base64? Written by Harry Roberts on CSS Wizardry. Table of Contents Let’s Look at Some Code Gzip Saves… …sometimes So Why Is Base64 So Bad? We Need to Talk About Images And We Need to Talk About Fonts And We Need to Talk About Caching Data Talks This is the first in a two-part post. Read Part 2. Prominent performance advice of
Front-End Performance Checklist 2021 (PDF, Apple Pages, MS Word) — Smashing Magazine
Let’s make 2021… fast! An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016. Ah, you can also get useful front-end tips in our email newsletter. This guide has been kindly supported by our friends at LogRocket, a service t
Mac Automatorとpngquantを使ってPNG画像の圧縮を自動化する方法
イメージオプティム でPNG画像を圧縮しようとするとすごく時間がかかるので、他の方法を探してみたらMacのAutomatorとpngquant というコマンドラインのPNG最適化ツールを使う方法があったので試してみました。 見つけた情報そのままでは僕の環境ではうまく動かなかったので設定方法を書き留めておきます。お役に立てば幸いです。 目次 フォルダに保存したPNG画像を自動最適化する設定 pngquantのインストール Automatorサービスの作成 フォルダアクションの設定 ファイルの右クリックでPNG画像を最適化できるようにする設定 OptiPNGとイメージオプティムで同じ設定をする方法 Macの環境など フォルダに保存したPNG画像を自動最適化する設定 設定したフォルダにPNG画像が保存されると、自動でpngquantのコマンドが走るようにAutomatorを使って設定をします。
CPP： AMPに替わる標準策定の提案（翻訳版）
Googleのモバイル検索結果でカルーセル形式で表示される とか「AMP対応」の表示を開始した とのことで、日本でもAMPプロジェクト が話題ですね。個人的には、目的には賛同するけど、やり方には同意できない部分もあるというのが正直なところです。AMPを広めるためにGoogleの検索結果と結びつけてしまったところが特に疑念を抱くところです。 とはいえ、検索結果に優先的に表示されるなら対応を考えないわけにはいかないですよね。背に腹は変えられないですからね。 そんなふうに悩んでいたところ、つい先日、Implementing Responsive Design の著者でもあるTim Kadlecさんの素晴らしい記事を目にしたので、日本の開発者の方々にもぜひ読んでもらいたいと思い、早速Twitterで本人に承諾を得て 翻訳させてもらいました。 以下、原文へのリンクと翻訳です。 CPP: A Stan
Leaner Responsive Images With Client Hints — Smashing Magazine
Developers have no reason not to explore Client Hints. The key benefits are more maintainable responsive image tags, fewer image bytes transferred and, ultimately, happier end users. In this article, Jon Arne Sæterås will focus on how to address responsive images issues, with a little help from the web server and Client Hints, the new way for the browser to request images with specific properties.
uncss: Find Unused CSS
You know what's better than adding features to a website or app, from a code perspective? Removing stuff you don't need. Whether it be code, images, or dependencies, getting rid of the crap stale code is like the first sip of a big glass of wine after a long day of stressful work. Running a directory of images through ImageOptim is a euphoric experience, am I right? What if there was a tool, h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Complete Guide to Speeding Up Your Content
ウェブを速くするためにDeNAがやっていること - HTTP/2と、さらにその先
The Performance and Usability of Font Loading // Speaker Deck
Hot XXX Pics, Free Sex Photos and Best Porn Images on www.sexi6.com
Choosing performance - Web Performance Consulting | TimKadlec.com
Hero Image Custom Metrics | High Performance Web Sites