サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。 そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの設定方法と、代表的なリダイレクトの種類やその実装方法をご紹介します。 リダイレクトの種類 リダイレクトには、HTMLやJavaScriptといったクライアントサイドプログラム、PHPやPerlといったサーバサイドプログラム、あるいは.htaccessの設定変更を行う等、様々な対応方法があります。そのうちのいくつかを、実際のサンプルソースとともに解説します。 metaタグによるリダイレクト hea
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 最終日は、我々フロントエンドデベロッパーに課せられた理想と現実のはざまについて冷静と情熱のあいだらへんで考えていく。まずは下記のブログを読んでもらいたい。 Google ウェブマスター向け公式ブログ: スマートフォンサイトの読み込み速度を改善するために まぁ読まなくてもいいのだが、ここで述べられている重要なことは2つ。 モバイルの平均読み込み時間は7秒 しかし、ユーザーは1秒未満を求めている 平均読み込み時間の7秒とい
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 4日目は、本ブログでも何回か話題にしているインライン画像についてです。 データURIスキーム CSS Sprite画像はDataURI画像にすべきか？ Data URI画像のテスト結果について 以前の記事で私は以下のように述べましたが、これはいやらしい表現だ。 DataURIの画像は、通常の画像に比べて6倍遅いとかゆう記事もある このような『xxx倍高速化』、『xxx倍遅い』と言った表現は、わかりやすい反面、本質を見失
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 3日目は、スマホ環境であればHTTPリクエストを減らすためにWebフォントの採用を考慮しても、やぶさかではないだろう。 まずは下記の画像をご覧頂きたい。 これはプロジェクトで私が使用していたスプライト画像だが（実際は縦にして使用）、このような単純な形状、単色のアイコンであれば、Webフォント化したほうがなにかと都合がよい。 このスプライトであれば、カラー × 矢印の向き × シャドウの有無 パターンの可能性があり、スプ
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 2日目は、HTTPリクエストを減らす最もポピュラーな手法、CSSスプライトについて説明する。 まずは動画をご覧頂きたい。 img要素読み込み | WebPagetest Test Result CSS Sprite読み込み | WebPagetest Test Result 左が30個のアイコン画像を一つ一つimg要素として読み込んでいるのに対して、右は１つの背景画像（CSSスプライト）として読み込んでいる。この場合、
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
SEO Imagination！ブログは、札幌で活動するフリーのSEOディレクター伊藤公助のブログです。SEOやSEMなどの情報を配信していきます。 最近見たECサイトで、内容はあって検索エンジンから好かれていそうなのに、徐々に、検索順位の下落が見られるサイトがありました。 特定のキーワードでは無く、ウェブマスターツールの検索クエリの表示回数が徐々に減っている状況です。 よくよく確認してみますと、サイト内で行われていたリダイレクトの設定に問題がありましたので、その部分について、記事にしたいと思います。 301リダイレクトと302リダイレクトの違い サイトの移転やページの移動・削除などによりリダイレクト設定を行う、というのは、サイトを運営していると、起こり得る事かと思います。 ユーザーからは、301リダイレクトも302リダイレクトもユーザー側から見た挙動は同じですので、サイト管理者の方の中に
最新の各種通信プロトコルにより、Webの可能性は大きく広ろうとしています。今回は、それらの中から Web をより高速かつスケーラブルなものに変えていくプロトコル、SPDYとHTTP2.0 について解説します。 HTML5の登場により、Webで使われるプロトコルは、 HTTP1.1 から大きく変わろうとしています。具体的には、SPDY, HTTP2.0, WebSocket, WebRTC といったプロトコルがそれにあたります。これらは、現状のHTTPが抱える各種問題点を解決するものです。 しかしながら、これらのプロトコルについて、 いったい何であるのか 今のWebの何を解決してくれるのか は、あまり知られていません。そこで数回に分けて、これらのプロトコルがいったい何であるのか、今のWebの何を解決してくれるのかを解説したいと思います。[1] 今回は、SPDY, HTTP2.0について取り上
The first line has the verb, resource path, and HTTP version. In this case, we are trying to GET the resource at /articles/http-basics. The rest of the request lines are headers—this request has no body. HTTP Request Verbs There are four universally applicable HTTP verbs in a request: GET: fetch a resource from the server. For a GET request, the URL should carry all the required pieces of informat
はじめに こんにちは、クラスメソッド株式会社でWebを担当している野中です。これから身につけるWebサイト高速化テクニック第2回目です。 第1回の「Webサイト高速化対策の現状」は読んでいただけましたか？「Webサイト高速化対策の現状」では高速化対策がなぜ必要なのかを紹介しているので、この回を読む前にぜひ読んでおいてください。 今回は、Webサイトの高速化に大きく関係するHTTPについて復習したいと思います。高速化対策と言ってもWebサイトが遅延する原因はさまざまです。 読み込むファイル数が多いことやサーバー側の処理に時間がかかっている、またはエンドユーザーが利用しているネットワークが原因かもしれません。 ところが原因を探っていくと、Webサイトが遅くなってしまう要因の多くにHTTPが関係しています。 実際の高速化手法も大事ですが、事前知識としてHTTPについて知っておきましょう。 対象読
自己紹介 ネイバージャパンのUIT(User Interface Technology)チームの裵完理(ベワニ)です。 概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。 ブラウザレンダリングプロセスの理解 ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表
SPDY (スピーディー) は、Googleが提唱し、現在標準化作業が進められている通信プロトコルです。 HTTP の次期バージョン HTTP 2.0 のベースとなる技術の有力候補として SPDY が挙げられてたりもするので要注目ですね。 ブラウザが対応していないと恩恵に預かれませんが、Chrome や Firefox, Opera の最新版であれば問題なく利用できます。IE ? なにそれ？おいしいの？ Wikipedia から、抜粋して引用すると… SPDYは、Googleが提唱し、現在標準化作業が進められている通信プロトコルの一つ。2012年8月現在の最新バージョンはSPDY Protocol – Draft 3（一般には「SPDYv3」と称されることが多い）。 基本的には既存のHTTPを拡張しダウンロードの高速化を目指したプロトコルで、TLS接続の上にセッション層を追加し、単一のSP
脆弱性のあるWordPressプラグインを外部から直接リクエストする攻撃に対する対策の話。 WordPressを普通にインストールした場合、プラグインやテーマなど外部からアクセスさせる必要のないファイルまで公開ディレクトリに配置されてしまうので、それらの脆弱性を狙った攻撃が成立してしまう。 なので、対策として以下のwp-content wp-includesに.htaccessを配置し、外部からのアクセスを制限する。 wp-content 以下にはユーザがアップロードしたファイルや、テーマで使用するCSSや画像ファイル、JSファイルなどが配置されるし、wp-includesにも外部からアクセスする必要のあるファイルが含まれていたりするので、とりあえず、拡張子がphpのもののみ外部からのアクセスを拒否する。 （デフォルトを拒否にして、必要なものを「許可」するのがこの手の制限の基本だとは思うけ
第1回のアジェンダ編では、高速化に関わる要因と解決策の全体像を紹介しました。 アジェンダ編にもかかわらず多くのブックマーク、シェアをいただきありがとうございます！ 余談ですが、記事にブックマーク、シェアをしていただくと、このブログでは執筆者に経験値がたまるような仕組みになっています。 たくさん経験値を貯めると四半期ごとに良いことがあるかもしれないので、気が向いたらこの他の執筆者の記事もシェアしていただけるとうれしいです。 言葉にせずとも、わかっていただけると思いますが、この記事も・・・ね？ 右上にあるボタンをちょちょっと。 本題 余談はさておき、本題に入りましょう。 今回は「無駄なリクエストとレスポンスの削減」に視点を置き、解決策について調査、計測して紹介してみたいと思います。 と思ったのですが、長くなりすぎたため、まずは「検証ツールとHTTPについて」紹介することにしました。 この記事の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
