3ヶ月でDAUを倍にしたサイト最適化の話

Merry Christmas！フロントエンド開発の荒井です。今回はフロントエンド開発陣が3ヶ月で行ったサイト最適化を紹介したいと思います。短期間で多くの変更を施したため、今回は取り組みやすく、特に大きなインパクトがあったと思われる内容2つを紹介します。

はじめに

VASILYでは提供したい価値を再定義し、ユーザーにとって価値のあるコンテンツを届けるため、2015年8月にiQONのPCサイトのリニューアルを行いました。このリニューアルでは「サイトマップの見直し」「文書構造（h1, title, description etc）」の見直し等を行い、サイトの中身をガラッと変えています。リニューアルを行った後、Google Search ConsoleやNewRelicで日々サイトの状態を確認していたのですが、日が経つにつれ、細かな問題が出てきました。これから挙げる事例は、日々のチェックにより発見された問題の紹介と解決策です。

Google Search Consoleで発見されたエラー対応

フロントエンドエンジニアの日課としてGoogle Search Consoleの確認があります。 iQONではECサイトをクロールしてアイテムを集め、ユーザーがそのアイテムを使用してコーディネートを作るというサービスの特性上、出来上がったページに以下の問題が多数報告されていました。

タイトルタグの重複
重複するメタデータ(descriptions)

「Google Search Consoleのエラーを徹底的になくそう」

当たり前のことですが、膨大なコンテンツを保持するサイトですと、数が少ないエラーは見過ごしがちです。エンジニアはまずGoogle Search Consoleに現れたエラーを無くすことに着手しました。例えそれが1件でも改修対象として手を動かしています。

タイトルタグの重複

こちらは主にユーザーが投稿したコーディネートに発生していた問題です。タイトルタグにはユーザーが入力したコーディネートのタイトルを採用していたのですが、「冬コーデ」のような重複したタイトルのページが多数存在してしまいました。

ユーザーが作成したページのタイトルやメタデータはユニークであるべきです。

iQONでは以下のようにしてユニーク化を行っています。

[bash] 投稿されたタイトル + ユーザー名 + つくったコーディネート（◯◯件目） ex）「ワントーンコーデ♪メイクは派手めだけどコーデはシンプルに☆…」XXXさんがつくったコーディネート（335件目） [/bash]

上記は一例で、様々なところをユニークにする見直しを行っています。

重複するメタデータ

こちらはアイテムページに出ていたエラーです。同じ商品が異なるECサイトで販売されていた場合などに説明文が重複してしまい、エラーが起きていました。そこで、商品の「商品名」「ブランド」「説明文」などの条件から同一商品を判断し、自動でcanonicalを貼るように改修を続けています。

その他の対応

blockquote見直し、no indexの設定、リダイレクトの見直し..etc..

数えていませんが、数十項目の改善をしたと思います。

大事なのはCGMでコントール不可能だったところをコントロール可能な構成に直していったということです。サイト最適化はこうした塵を積もらせる改善が必要です。

HTTPSの対応

次にHTTPSの話をします。昨今、セキュリティを優先事項とする企業が増えました。VASILYではフロントエンドサーバーのHTTPS対応が遅れていたため、iOS 9のApp Transport Securityが話題になったタイミングでHTTPS化に踏み切りました。

Google HTML/CSS Style Guide

まず、100を超えるファイルにベタ書きされたhttpを書き換えるところから始めました。その際のコーディングはGoogle HTML/CSS StyleのProtocolに準拠しました。

httpとhttps両方のプロトコルに対応するところはhttp/httpsを省略し//から始めるようにします。

body { background: url(http://iqon-img.s3.amazonaws.com/static/images/top/iqon_bg_gray.png) 0 0 repeat; }

body { background: url(//iqon-img.s3.amazonaws.com/static/images/top/iqon_bg_gray.png) 0 0 repeat; }

詳細はGoogle HTML/CSS Style Guideに記載があります。

HTTPSを標準にする

上記書き換えがすべて終わった上で、サイトの標準をhttpsにします。リダイレクトを設定すれば良いのですが、外部に提供しているウィジェットなどもあるので、単純に一律切り替えることは出来ず、確認の時間が非常に取られました。また、CDNがhttps対応をしてないため画像まわりで問題が発生したりするなども起きますので、踏み切る際は事前に確認しておくことをおすすめします。

環境整備

フロントエンドでは社内確認用のステージングの環境にAmazonのElastic Load Balancing を使用しておらず、その役割を古いバージョンのVarnishに頼っていたため、プロダクトの確認環境を整えるのにも体力を使いました。HTTPS化を進めるにあたり、規模が大きくなるほどコード修正以外にも作業が発生します。

HTTPS化をしてみて

サイトの健全さの意味でも対応するべきでしたし、HTTPS ページが優先的にインデックスに登録されるようになるといった記事にもある通り、インデックスにも効果があるようです。DAUを倍にした要因の一つだと考えています。

まとめ

今回紹介した2つは取り組みやすい2つの事例を紹介しました。他にもApp Indexing対応やパフォーマンス最適化などといったことも行っています。Google Search Consoleで確認する限り、クロール数は日に日に増え、3ヶ月で約5倍程度の伸びがありました。それに伴い、DAUは3ヶ月で倍になり、検索からの流入が増えている傾向にあります。

今後はAMPやService Workerの導入を検討しているので、次回は結果を報告出来ればと思います。