ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
WordPressで読み込み速度1秒台を実現するために実施した5つの施策
あなたのページ読み込み速度、遅すぎませんか？ サイトがなかなか表示されないのはユーザーとして見た時に非常にストレスフル。理想のページの表示時間は最低でも2秒以内、目指すべきは1秒以内と言われている。 gori.meでも長いこと様々なツールを駆使しては読み込み速度改善にむけて取り組んできた。先日、ついにGTMetrixにおける測定値が安定して1秒台を出すことに成功したので、今回はこれを実現するために僕が実施した5つの施策をまとめておく！ページの読み込み速度に悩んでいる人は参考にどうぞ！ gori.meのGTMetrixスコアと読み込み速度 1秒台を出す方法を話す前にそもそも本当にgori.meは読み込み速度1秒台なのかということについて、先ほど取得したGTMetrixのスクリーンショットと共に紹介しておく。 ご覧の通り、読み込み速度は1.4秒、Googleの「Page Speed Grade
身につけておきたいWebサイト高速化テクニック #2｜検証ツールとそもそもHTTPって何だ編 | DevelopersIO
第1回のアジェンダ編では、高速化に関わる要因と解決策の全体像を紹介しました。 アジェンダ編にもかかわらず多くのブックマーク、シェアをいただきありがとうございます！ 余談ですが、記事にブックマーク、シェアをしていただくと、このブログでは執筆者に経験値がたまるような仕組みになっています。 たくさん経験値を貯めると四半期ごとに良いことがあるかもしれないので、気が向いたらこの他の執筆者の記事もシェアしていただけるとうれしいです。 言葉にせずとも、わかっていただけると思いますが、この記事も・・・ね？ 右上にあるボタンをちょちょっと。 本題 余談はさておき、本題に入りましょう。 今回は「無駄なリクエストとレスポンスの削減」に視点を置き、解決策について調査、計測して紹介してみたいと思います。 と思ったのですが、長くなりすぎたため、まずは「検証ツールとHTTPについて」紹介することにしました。 この記事の
[書評] WordPressを高速化する方法がビッシリと書かれている「高速化&スマート運用必携ガイド」
まずは記事を持って献本御礼とさせて頂きます。 WordPressがたまに指摘される動作スピードの 問題を追求し、パフォーマンスを改善する為の 書籍・WordPress高速化&スマート運用必携ガイド です。常に求め続けられているサイトのスピード は制作者に取って、とても重要な点ですね。 ご献本頂いたをかもと(@wokamoto)さん、有難う御座いました。 WordPressはたまに動作の問題で議論が生じます。利用者の多いCMSですし、動作はサーバーの問題も関わってくるので致し方ないことですが、WordPress=重い、という先入観を消してくれる一冊です。 ユーザーが求めるものは基本的に変化していきますが、絶対に変わらないのが「表示スピード」です。「表示されるのが速いからもっと遅くしてほしい」とは一人も思わないでしょう。 これはWeb制作者全員が目指すべき改善点でもあります。また、表示スピード
![[書評] WordPressを高速化する方法がビッシリと書かれている「高速化&スマート運用必携ガイド」](https://cdn-ak-scissors.b.st-hatena.com/image/square/26e0ccd4768e90081028f6615a42db66832c3d49/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2012%2F03%2Fwpsho0.jpg)
CentOSにPHPアクセラレータのAPCを入れてみた
コンパイルしたファイルをキャッシュして、phpの動作を速くするAPC(Alternative PHP Cache)。おまじない程度に導入してみたのですが、これがなかなか。インストールしただけでも体感出来るくらいがっつり表示が速くなります。さらにちゃんと設定をいじれば、更にもう一段速く。 サーバがなんとなく重いなぁと思っている方はどうぞ。 共有レンタルサーバだとAPCを導入するのは難しいかもしれませんが、VPSや専有サーバを利用している人は利用を考えてみると良いのではないでしょうか。 インストール APCをインストールするには方法がいくつかあるようですが、今回は一番簡単にインストール出来るpeclを利用する方法をとります。 そんなわけで、まず、peclを使えるようにするために、php-pear、php-devel、httpd-develをインストールします。以下、作業は基本的にルート権限で。
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
さくら VPS + CentOS のチューニングや高速化で以前試せなかった設定
はじめてのさくら VPS + CentOS の初期設定からチューニングなどの作業まとめで一般的なサーバーの設定方法を紹介しましたが、さくらのVPS の設定の中で APC の入れ方や nginx の入れ方などは試せなかったので追記としてメモしておきます。 今回も以下の記事を参考にさせて頂きました。ここに全てがあるので私の記事では作業をシンプルに紹介していきます。ここに書いてない物についてはこの記事で書いてみます。 ウェブ開発者のための、1時間でできるLAMP環境構築術（CentOS編） – さくらインターネット創業日記 CentOS 5.6 へアップグレードする さくら VPS はこのブログを書いている現時点で契約した状態だと CentOS 5.5 がインストールされています。そのため CentOS を 5,6 にアップデートします。 まず自分の環境が CentOS 5.5 なのかを調べます
Nginx + lsyncd で WordPress を負荷分散させる - dogmap.jp
最近、め組ことデジタルキューブさんと、一緒に仕事をやらせてもらってます。 今の所は、主に WordPress サイトの高速化とかやってるんですけど、その中で WordPress サイトを複数台のサーバで負荷分散させて高速化させる案件があったので、その時の作業内容をシェア。 最近はさくらの VPS とか、低価格の VPS が出てきてるので、個人でも手を出せる領域かもしれませんね。 今回は2台のサーバを使って PHP の処理を負荷分散しました。 構成は、こんな感じです。 プライマリサーバ ( vps1.example.com : 192.168.0.1 ) Nginx, Load Balancer、PHP FastCGI のアプリケーションサーバ lsyncd (リアルタイム rsync を実現するためのサービス) セカンダリサーバ ( vps2.example.com : 192.168.0
Google ChromeをRAMディスクに丸ごとインストールして超高速化する方法！ | フリーソフトラボ.com
前回のエントリーで、FirefoxをRAMディスクに完全インストールして信じられないほど高速化する方法を紹介しましたが、同様にGoogle Chromeも、キャッシュの保存場所をRAMディスクに置き換えるだけでなく、RAMディスクに丸ごとインストールしてしまえば、より高速化することが可能です。しかしながら、Chromeの場合はインストール時にフォルダの指定ができないため、普通はOSがセットアップされているHDDにしかインストールすることができません。 そこで、ここでは”ジャンクション”と呼ばれる手法を用いて「表向きはあたかもHDDにアクセスしているように見えるが、実際にはRAMディスクドライブにアクセスしている」という状態を作りすことで、Google Chromeの起動に必要なデータを丸ごとRAMディスクから呼び出し爆速動作させるという、裏技的な方法を紹介します。 なお、この記事ではあらか
画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例:phpspot開発日誌
Base64 Encoding for Images. 画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例。 Googleがインスタントプレビューや画像検索で導入してその読み込み速度に驚いた方も多いかもしれません。 その手法をPHPで実現するコードが掲載されていましたのでご紹介。 PHPでやるにはそんなに難しいわけではなさそう。 <?php $img_src = "image/sample.png"; // 画像ファイルの指定 $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); // バイナリデータを読み込み $img_str = base64_encode($imgbinary); // base64エンコード echo '<img src="data:image/png;base6
CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル
Nicole Sullivan, a web developer living in California. Webページのパフォーマンスを向上させる方法のひとつに、CSSファイルを最適化するというものがある。CSSはプログレッシブレンダリングをブロックする効果があるため、最適化しないでおくとページのレンダリング時間に影響を与える。Stubbornella ≫ Blog Archive ≫ Top 5 Mistakes of Massive CSSにAlexa Top 1000サイトを調査した結果が掲載されている。CSSに関して使うべきだが使われていないCSSテクニックがあり、その上位5が紹介されている。紹介されているテクニックは次のとおり。 42%がCSSをGZIP圧縮で提供していない。 44%が2つをこえるのCSS外部ファイルを使っている。 56%がCSSをクッキーとともに提供している
『続・ハイパフォーマンスWebサイト』イベントに参加しました
こんにちは。Yahoo!検索の高林です。先日、書籍『続・ハイパフォーマンスWebサイト』（オライリー刊）に寄稿させていただいた関係でトークイベントに参加してきました。 お忙しいところ、たくさんの方々に出席していただき、ありがとうございます。 今回のイベントでは、「Yahoo!検索のパフォーマンス向上策全て見せます！」というテーマでYahoo!検索で実際に行っているTipsの紹介と現在、Yahoo!検索で検討しているシステム構成などを発表しました。 そのときの発表内容は、以下のリンクから確認できますのでご興味のある方はご覧ください。 『続・ハイパフォーマンスWebサイト』出版記念トークイベントのビデオを公開 (O'Reilly Japan) トークセッションでは来場者の方々にたくさんの質問をいただきました。今回はそのなかからいくつかピックアップしてご紹介したいと思います。 ――Q: Yaho
Flashを閃光のごとく高速化するための基礎知識
Flashを閃光のごとく高速化するための基礎知識：速いFlash/ActionScriptチューニング入門（1）（1/2 ページ） Flash/ActionScriptチューニングの基礎知識から実践的テクニックまでを紹介する連載。読みながら試せるオンライン・サンプルもあります。Adobe AIR/Flexにも応用可能です Flashを徹底的に軽く作るための3カ条 本連載では、これから数回にわたり、Flash/ActionScript 3.0（以下、AS3）のチューニングの考え方や方法について解説します。 筆者が初めてFlash/AS3のチューニングと本格的に向き合ったのは、2007年の冬の「サグールテレビ」の開発においてでした。当時、開発チームでは「徹底的に軽く作る」という鉄の目標を掲げており、チューニングのためのさまざまな調査を積み重ねていました。結果、2000年に発売された古いPCなど
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA