Webフォントは悪なのか？ ブログの表示速度をTestMySiteで4秒までに改善したTips : ATOMS by Loftwork
テクニカル・ディレクターの安藤です。 今年のCMS大阪夏祭りからというもの、個人的にCraftCMSがアツくなっています。 先月CraftCMSを使い、自分のブログをリニューアルしました。 編集画面はこんな感じ。 ほぼまっさらな状態からカスタムフィールドで編集画面をカスタマイズしていくような作りなので、デフォルトの機能を殺すような無駄がありません。 カスタムフィールド職人には嬉しいCMSです。 おかげで快適に記事を執筆しているのですが、１つ問題がありました。 画像は都度pngoutなどで圧縮してからアップしているのに、表示がとても遅いんです。 Test My Siteでは「12秒」、GTMetrixでは「F/E」という真っ赤な評価。 これはいかん！ということで主催という特権を使い、『Japan CraftCMS Meetup』で速度改善のワークを行いました。 とはいえ今回はCraftCMS
WordPressキャッシュ系プラグインの比較とサイトに適した選び方 | ゆっくりと…
WordPress の運営を始めて1年後にしてようやく（満を持して！）、キャッシュ・プラグインを使い始めています。とは言っても、最初は 「アレが速い」 とか 「コレが良い」 などといった記事に目移りして、何をどう使えばよく分かりませんでしたが、ここらで私が理解出来ていることをまとめてみたいと思います。 下図は、サイト閲覧者 ～ WordPress 間の主要なキャッシュ機構とそれをサポートするプラグインの関連です。サーバーのファイルシステムや、メモリ／ハードディスクなどの I/O レベルのキャッシュなどは割愛します。 図を見れば分かる通り、W3 Total Cache がその名の通り全てのキャッシュをカバーしています。さらにメモリ・キャッシュ、CDN へのアップロード機能、各種 PHP アクセラレータ （ACP、eAccelerator、XCache）、HTTP アクセラレータ （Varni
さくらのVPSにGoogleのmod_pagespeed入れてみた ハブろぐ - havelog.ayumusato.com
原理的に、2倍も速くなったら元が酷いんじゃないか疑惑を感じつつ あなたのサイトも最高2倍速に？！Google純正のサイト高速化モジュール『mod_pagespeed』だと・・・ - IDEA*IDEA ～ 百式管理人のライフハックブログ 速くなるのはいいことなのでレッツトライ。 さくらのVPS 標準 CentOS5.5 x86-64 にmod_pagespeedをインストールしてみたところあっさり行かなかったので、メモ貼りエントリーします。ここでは、mod_pagespeedの概要は、すっ飛ばしてインストールを進める次第。 サクっとインストールするつもりが公開鍵でつまづいた % wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_x86_64.rpm % sudo yum localinstal
さくらVPSのWordPressをチューニングして30倍高速化した方法 - 原宿・表参道.jp
今日はさくらVPSに載せているWordPressのパフォーマンスをチューニングして高速化に成功したので安心して眠れるという話をします。 2.5ページ/秒だったのが70ページ/秒と30倍高速化。 以前はDaily数千PVで重くなっていたサイトがDaily3.6万PVを余裕で捌けるようになりました。 #ちなみにproxy cacheという手法はwordpressでなくても動的コンテンツ全般に有効です。 ▼サーバ気にしなくて良くなったので今週末新宿御苑に花見に行けました☆。枝ぶりがいいさくらが多くてほんといいところだと思うの。 WordPressチューニング高速化結果http://hara19.jp/のサーバ環境と測定結果は以下のとおり。 WordPress稼働環境さくらVPS 1GB/CentOS5.5/PHP5.3/MySQL5.5/WordPress3.1。 WEBサーバはチューニングにあ
HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
WordPress をとにかく速くする (WordPress Advent Calendar 2011 20日目) - dogmap.jp
12月25日まで毎日ブログをつないでいく WordPress Advent Calendar 2011、20日目担当 @wokamoto です。 @mypacecreator さんに引き継いでいただきました！ドキドキ。 そんな、@mypacecreator さんのエントリはこちら。 3大「WordPressに慣れていない人がやってしまいがちだけど、こっちのほうがいいのになぁ」って思うこと 去年は PHP Advent Calendar に参加して「匿名関数と無名関数 (PHP Advent Calendar 2010 16日目)」って記事を書いたんですが、今年は WordPress Advent Calendar に参加します！ そんなわけで、(一部の)みんな大好き WordPress のハイパフォーマンスチューニングの話題。 このサイト dogmap.jp で行っている施策について書きま
WordPressを100倍速くする！ MySQLの調整やnginx proxy cache | KRAY Inc
[追記１] 最後で説明しているproxy cacheの設定を修正しました。 [追記２] nginx proxy cacheでキャッシュしない場合の処理を変更しました。 [追記３] スマートフォンや携帯で閲覧した時にキャッシュしない設定を追加しました。 はじめに 大げさな題名ですが、今回はWordPress単体を速くするのではなく、データベースやWebサーバなどの調整、またnginxのproxy cache機能を使って速くする話になります。 サイトの構成によっては、proxy cacheは使えないかもしれませんが、使わなくても5倍程度速くすることはできましたので、参考にしていただければと思います。 今回行うチューニング一覧 DBを最適化するプラグインを導入する APCを導入してPHPを速くする MySQLを速くする 重いWordPressプラグインを外す nginx+FastCGIにする W
Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
ウェブサイト高速化勉強会に参加してきた #tnmk0929 - Diary of absj31
ウェブサイト高速化勉強会 : ATND 2012/09/29 ウェブサイト高速化勉強会 #tnmk0929 - Togetter さくらのVPSにてサーバ＆ドメイン取得を行った流れもあり、個人用鯖にも何らかのWebコンテンツを配備・公開して行く事になるだろう(てかそういう風にして行きたい)と言うのもあり、ちょうど目にしたこちらの勉強会に目が留まり、参加して来ました。 なので現状のWebサイトを高速化させるために、ってのではなくて今後のために、という意味合いが強いですね。 会場は横浜タネマキ。最近は個人的にはYokohama.groovy等で2週間に一遍は使ってる感じですね。 タネマキ 【コワーキング ＆ シェアオフィススペース】 開始間際、ディスプレイ接続で調整が上手く行かず10分程押した後スタート。 Web Site Optimization for Beginners こもり まさあき
コードの圧縮や外部ファイル化とページの読み込み速度について
なぜ、ごちゃごちゃしてるのか？ぱっと気づくのがこの2点です。 改行やスペースがほとんど使われていない CSSやJavascriptが外部化ファイル化されていない Googleとしてはソースがきれいなことよりも、読み込み速度を速くすることでユーザーのストレスを軽減したり、ファイルサイズ小さくすることでサーバーへの負荷を減らしたりすることの方が重要だと思います。 もちろんアップする前にこのような状態にしているだけで、それまではきれいに書かれているはずですが。 ということで、「コードの軽量化」と「外部ファイル化」の2点について考えてみます。 コードの軽量化について HTML、CSS、JavaScriptなどのコードは、改行やスペースを使わずサイズを小さくした方が読み込みは速くなります。 これは当然ですね。 コードの見やすさよりも読み込み速度やサーバーの負担軽減を優先するなら、できるだけファイルを
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
さいきんの Rails サービスを高速化をしてみた - 2nd life (移転しました)
先日のももクロハッカソンで出会った wantedly を作ってる仲さんが と言ってたので、面白そうなので wantedly を速くしてみました。 wantedly ちなみにデータが数百万オーダーもなさそうなのに、どのページもログインすると2-5秒ぐらいかかっていたので、確実に速くできそうだなぁという感覚はやる前からありました。 アプリケーションサイドのチューニング 初心者*1にありがちな問題として SQL に適切にインデックス張ってない キャッシュすべき場所をキャッシュしていない 無駄なデータを引きすぎてる ことがよくあります。ので順に実装を見ていきました。 SQLに適切なインデックスを張ってない 張ってありました！びっくり！＼(^o^)／ キャッシュすべき場所をキャッシュしていない Facebook API を利用したアプリケーションなんですが、ユーザのデータの取得を毎回馬鹿正直に HT
Googleのウェブマスターツールがgzip圧縮をオススメするのでやってみた。 - 雨ときどき晴れ
最近、EC-CUBEをカスタマイズして通販サイトをオープンしてみました。 それでGoogle Analyticsやウェブマスターツールを設定して様子を見ていたのですが、 10日ほど経ってから、いろいろ情報が表示されるようになりました。 その一つがサイトの読み込み時間を短縮するために「gzip 圧縮を有効にする」です。 ウェブマスターツール これは、ウェブマスターツールの「Labs」→「サイトのパフォーマンス」のページにある 「Page Speed が提案する読み込み時間の短縮方法」のところに書いてありました。 他にもリクエスト数削減のために「外部 JavaScript ファイルをまとめる」や 「外部 CSS ファイルをまとめる」といった方法が書いてあるのですが、 今後もいじっていくことを考えると面倒そうなので今は放置しておきます。 ということで、今回は、cssやjsなファイルたちをできるだ
CakePHP開発者が知るべき10のこと
先日、こんな記事が上がっていました。 Android開発者が知るべき10のこと この記事でまとまっているのは、Android開発において必要な10の項目です。 インターフェースの設計から、データの取り扱いまで。 AndroidはモバイルデバイスのOSで、CakePHPは単なるWebフレームワーク。 しかし、予め用意されたルールやAPIを活用する点は同じです。 つまり、フレームワーク全般において、開発者が知るべきことをまとめることが出来るはずです。 ここでは、私が良く利用するCakePHPフレームワークについて、開発者が知るべき10のことをまとめます。 1. CakePHPで良いのか CakePHPを使う際に、知るべきことその1。 それは、あなたは本当にCakePHPを使うべきなのかということです。 現在、あらゆるフレームワークが溢れ返っています。 Ruby Ruby On Rail
ウノウラボ Unoh Labs: PHPで書かれたwebサービスを高速化する
尾藤正人です。 アクセス数の多いコンシューマ向けの web サービスは、処理速度がかなり重要になってきます。 応答速度が遅いと使用しているユーザにとってストレスになりますし、 処理に時間がかかればサーバに対する負荷も高くなります(厳密に言うと違う)。 そこでウノウではいろいろな工夫をして処理速度の高速化を行っています。 一口に高速化といってもいろいろな要素がありますが、大きく分けて3つの段階があります。 ・ハードウェアによる高速化 ・ソフトウェアによる高速化 ・プログラムの工夫による高速化 しかし、これら3つは独立ではなく、互いに影響しあっているので完全に分けて考えることはできません。 それぞれがどのような部分に影響を与えているのか、ちゃんと理解してチューニングすることが大事です。 ただし、高速化するときに忘れていけないのが、高可用性です。 いくら高速に動作しても安定して動作し
パフォーマンス改善やセキュリティに役立つ.htaccessの設定 | コリス
ウェブサイトのパフォーマンスの改善やSEO、セキュリティに役立つ.htaccessの設定を紹介します。 17 Useful Htaccess Tricks and Tips 備考：Apache チュートリアル: .htaccess ファイル、Apache コア機能 [ad#ad-2] .htaccessの設定：パフォーマンスやSEO関連 .htaccessの設定：セキュリティ関連 .htaccessの設定：パフォーマンスやSEO関連 .htaccessでタイムゾーンを設定 .htaccessでタイムゾーンを設定します。 例：東京 SetEnv TZ JST-9 もしくは、 SetEnv TZ Asia/Tokyo .htaccessで301リダイレクトを設定 .htaccessで301リダイレクト（永続的なリダイレクト）を設定します。 例：旧ファイル（old.html）、新ファイル（new
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページを1秒以内に表示するための最新技術、そしてSEOの未来（テクニカルSEOの復権 最終回） | Moz - SEOとインバウンドマーケティングの実践情報
cmmntr.com
IDEA * IDEA
