本当は速くならない「Webサイトの表示高速化アンチパターン」10選｜榊原昌彦
ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
BootstrapサイトをPageSpeed Insightで満点をとるまで改善する - ワザノバ | wazanova
http://calendar.perfplanet.com/2013/breaking-the-pagespeed-barrier-with-bootstrap/1 comment | 0 pointsDan Ritiが、Bootstrapを利用したサンプルサイトをPageSpeed Insightのスコアが100点になるまで改善した取組みを紹介してます。 1) Bootstrap off the shelf [ Mobile Score: 77, Desktop Score: 90, DOMContentLoaded: 833ms ] 2) Enabled mod_pagespeed [ Mobile Score: 80, Desktop Score: 93, DOMContentLoaded: 660ms ] PageSpeedのデフォルトのフィルターを有効にするだけでは3ポイントし
Webにおける画像の最適化について考える | 1000ch.net
画像をもっとデリケートに扱う デリケートと言っても常に最高画質でやるべきなんてことを言うわけではなくて、 『こういう場合にはこういう画像』ということをしていくことが必要になると思います。 その引き出しをなるべく多く用意しておきましょう。 ファイルサイズとリクエストの天秤 Webのパフォーマンスにおいて、コスパが高いのはネットワーク部分です。 リクエスト数の削減 CSSとJSの結合 画像のCSSスプライト化 Keep-Aliveのon ローカルキャッシュ効かせる レスポンスサイズの削減 CSSとJSの圧縮 画像の圧縮・最適化 サーバーから返すリソースのgzip化 これらは比較的簡単に行うことが出来る上に、効果も大きいです。 しかしCSSとJSの結合と圧縮を行っても、画像が1ファイル300KBあったり、 更にそれが何ファイルもあったりしたらCSSやJSの最適化も 効果が小さいもの
インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった | 初代編集長ブログ―安田英久
どれぐらいスゴいかというと、「サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、かなり高速化できちゃう」というぐらいスゴいのです。しかも、どんなサイトでも、どんなCMSを使っていても「インストールするだけ」。 Webサイトを高速化すると、ユーザーに優しいし、場合によっては検索結果での順位にも良い影響が出るかもしれない……それはわかっていても、なかなか本格的にサイトを高速化するのは難しいものです。 サーバー側の高速化に加えて、HTMLのつくりや画像のファイルサイズ最適化、さらにはCSSを調整しての画像スプライト化やCSS/JSファイルの結合・最適化によるブラウザとサーバーの通信本数削減などなど、実はやらなきゃいけないことがたくさん。 グーグルの提供するmod_pagespeedは、そうしたことの、かなりの部分を自動的に行うものです。 mod_pagespeedはこん
WordPress: W3 Total Cache(W3TC)の高速化効果がスゴイ | Hinemosu
WordPressを最適化するプラグイン「W3 Total Cache」(W3TC)の高速化効果がスゴイ。 これまでは「WP Super Cache」と言うキャッシュプラグインを使ってたけど、「W3 Total Cache」の先進さに惚れて一発で乗り換えを決めました。 W3Tのスゴさを三行で説明 W3Tのスゴさを三行で説明します。 色々とキャッシュできる コードの最適化も出来る CDNの設定や、ブラウザキャッシュ制御まで出来る 以下ザックリと説明していきます。 色々とキャッシュできる W3TCでは、一般的な「ページキャッシュ」以外にも、「データベースキャッシュ」や「オブジェクトキャッシュ」にも対応しています。 「データベースキャッシュ」を有効化すると、記事(post)やページ(page)、フィード(feed）の作成時間が短縮されます。 「オブジェクトキャッシュ」を有効化すると、その他の一般
High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ | warikiru
2009-11-24 High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ ラベル: performance CSS Nite in ISHIKAWAで話をしてから1ヶ月経ったので、薄れゆく記憶の復習も兼ねて思いの丈を綴ってみたｗ High Performance Web Design 1. What's High Performance?ここでいうパフォーマンスというのはWebサイトの表示高速化についてです。つまり、ページをいかに早く表示させるかという課題です。でも、そうゆうのってサーバー側の問題でしょ？システムエンジニアの管轄じゃないの？と思われがちですが「ハイパフォーマンスWebサイト」の著者であるSteve Soudersの調査によると、80:20。一般的にユーザーの待ち時間の実に80%がブラウザ側、フロントエンドで費やされて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
