複数のサイトを1つに統合した後の経過とメンテナンス
複数のサイトを1つに統合する作業が無事に終わって一安心かと思われたのですが、その後トラブルやミスがいろいろと発覚しました。さすがに完璧に移行とはいかず、今度はそのトラブルやミスの対処にあたることに。どんな状況だったか紹介しておきます。
当サイトではアフィリエイト広告を利用しています。
リンクや画像に広告が含まれている場合があることを予めご了承ください。
パーマリンクの間違いが多い
思っていた以上にリンクエラーが発生していました。特にパーマリンクの間違いが多かったです。ページを移行する前にあらかじめ全ページのパーマリンクを決定していたのですが、何回か変更を施しました。その変更をちゃんと記録していなかったことが原因と考えられます。
リンクエラーはWordPressのプラグイン『Broken Link Checker』で発生したものが大半で、そのおかげでトラブルを把握することができました。このプラグインでエラーが出たテキストリンクは打ち消し線が付きます。このまま放置すればサイトの信頼も損なわれかねないので、なるべく早く対処した方が良いでしょう。
画像の抜けがあった
WordPressで作ったHPをWordPressのインポート機能を使って新しい方にエクスポートしました。その際は画像も一緒に移行されるはずなんですが、完璧に移行されない画像がありました。記事内で表示されるはずの画像が表示されていないことで、このトラブルが発覚しました。
対処法は簡単。あらためて画像をアップロードすればいいだけです。原因がわからないので何とも言えませんが、無いなら無いで仕方ありません。嘆いても始まらないので再度アップロードしなおしましょう。
アップロードした画像のファイルサイズが0状態
画像が入ったフォルダをアップロードした際、ファイルサイズが0のものがありました。原因はわからないですが、正常にアップされなかったのは確かです。このままでは表示されないので再アップロードしました。
先ほど紹介した画像の抜けトラブルと並行してチェックしていくと良いでしょう。なるべく確認を怠らないようにしましょう。特に再インストールしたり、大掛かりなアップロード作業をした後はデータをしっかり確認することがトラブルを避ける最も効果的な方法になります。
パスの間違い
これはよくあるミスです。読み込むファイルやデータのパスを間違えていることで起こるエラーです。多くはなかったですが、いくつか発生していました。正しく変更して対処します。
パスの間違いは気を付けていればある程度は防げるミスですが、今回は複数のサイトの移行が絡んだことでリンクが入り乱れることになり、そこから漏れが生じたのだと考えます。
重要なのはそれをそのまま放置せずにしっかり対処すること。ミスを無くすことはできない以上、起こった後の対策をしっかり行うことが大事です。
一部コンテンツデザインの刷新
コンテンツの表示において移行前のデザインがそのまま使えればよかったのですが、少し思惑を外れている部分がありました。余白が不自然にできたり、画像サイズとテキストの表示バランスが悪かったりと、見た目が少々悪くなっていました。
根底となる横幅が変わるのでそれも仕方ないこと。絶対しなければならない項目ではありませんでしたが、ほっとくのもそれはそれで落ち着かないので納得のいくようそれらを再調整しました。
HPの表示速度アップ
HPはアクセスしてから表示されるまでの速度が早ければ早いほど良いです。というより、速いのが普通であって遅いと致命傷となります。大体2秒以内と言われていて、それ以上かかるようだとユーザーがそのページを離れてしまう確率が一気に高くなります。中身を見ずに諦めて去ってしまうわけです。それを防ぐためにページの表示速度をアップさせる工夫は必須となります。
ファイルを圧縮
圧縮化で代表的なファイルといえば、HTML、CSS、JavaScriptです。WordPressを使っているならプラグインで簡単にできるようですが、私はそれぞれの圧縮版を作成して読み込ませています。
たとえばCSSだと、大本のファイルと圧縮したファイルの2つを用意します。大本ファイルは変更を加えたり、書き換えたりするいわば普通に扱うファイルで、圧縮ファイルはその大本ファイルの記述を圧縮したファイルとなります。
サイトで読み込ませるのは圧縮した方です。最初から圧縮したファイルを扱えば手っ取り早いのかもしれませんが、それだと中身が見にくくて変更を加えるのが大変になります。きれいに整理されて書かれている方がわかりやすく、ぱっと見で理解しやすいです。分ける理由はここにあります。
圧縮作業自体は簡単にできるので『非圧縮→圧縮』という手順で行う方が楽です。もちろん、CSSに限らず、HTMLやJavaScriptもそうです。
サイトを見ているユーザーにはCSSやJavaScriptがどう書かれているかなんて関係ありません。そこまで気にして見る人は同じようなWEB制作者側でしょう。普通の人はデザインされたページを見て終わるはずです。
ただ、そういう人にも影響が出るのが読み込むデータの総容量。読み込むデータ量が多くなればなるほど表示速度が遅くなって迷惑をかけてしまいます。少しでもその影響を抑えるために圧縮作業は必要になります。
あまり気にしていないというなら、ぜひこの機会に考えて見て下さい。CSSにしても、JavaScriptにしても圧縮したら結構容量を抑えられます。たとえ1バイトであっても減らせられるなら減らす。サイト運営者はそうやってしのぎをけずっているわけです。
画像容量の圧縮
効果が高いのは画像の容量を抑えることです。1番効果が高い方法といってもいいでしょう。画像の容量を抑える方法はいくつかあります。
画質を抑える
可能な限り視認性を保ちつつ画質を抑えます。容量を抑えすぎると画質が悪くなってせっかくの画像が汚くなります。逆に必要以上に画質をもとめても視認性が変わらないのに容量だけが増えるというはめになります。自分が許せる範囲の限界の視認性を保ちつつ画質を極限まで抑える。画質はこの境目をしっかり見極めることが重要です。
サイズを小さくする
画像は小さくなればなるほど容量も小さくなります。WEBサイトで表示する分には必要以上の大きさはいりません。たとえば、WEBページのコンテンツ(内容)を表示している部分の横幅が600pxしかないのに、横1000pxの画像を使う必要性はないわけです。それなら600pxに縮小させて容量を抑えた方が効果的なわけです。必要以上の大きさで保存しているなら改めて大きさを調整しましょう。
保存形式
画像にはjpeg、png、gifといった保存形式があります。画像の内容によって最適な形式がそれぞれあり、どの形式を選ぶかで容量も変わってきます。
jpegは写真などの保存に最適です。風景や物体を撮影した画像をjpeg形式で保存すると視認性を保ちつつ容量を抑えられます。極力容量を抑えたいなら画質を低く、きれいなまま表示したいなら高く設定します。画像の内容によっては画質をかなり抑えても問題ないようなものもあるのでいろいろ検証してみましょう。
pngやgifはイラストなどの保存に最適です。サイトで使うロゴやアイコンなどはこの形式が最適です。pngは透過処理もできるので透明化が必要な画像に適しています。gifは画像を複数いれることができるのでパラパラ漫画のように見せることができます。
それぞれの特徴を理解して最適な状態で保存することで画像の容量を抑えます。最初は難しいかもしれませんが、少しずつ慣れていきましょう。
動画コンテンツの最適化
私のサイトでは楽器の演奏動画を扱っています。動画は慎重に扱わないと少しの違いで容量の差が大きくなってしまいます。スマホやパソコンの両方で見ても問題ない画質を保ちつつ、かつ容量を抑えていきます。
ポイントとなるのは解像度(幅、高さ)、フレームレート、ビットレート、音質です。
解像度
解像度は動画のサイズ、つまりは大きさです。大きくなればなるほど容量も大きくなります。大きさはスマホとパソコンの両方で見ることを想定して考えます。とはいえ、画面の大きさにかなりの差があるスマホとパソコンではどちらに合わせるのが正しいかは各々の判断次第です。
ただ、大きいサイズを小さくして見るのと、小さいサイズを大きくして見るのとでは画質に差が出ます。たとえば、パソコンの画面サイズに合わせて大きく作った動画をスマホで見る場合は縮小されて映ります。スマホの画面の方が小さく、縮小されても映りには問題がありません。
気を付けなければならないのがその逆で、スマホの画面サイズに合わせて小さく作った動画をパソコンで見る場合です。パソコンでもスマホの大きさのままで映すことはできますが、どうせなら全画面にしてみたいと思うのもまた必然。しかし、スマホ用に小さめに作った動画を拡大させると画質も悪くなります。
私のサイトでもどちらかといえばスマホで見ている人の方が多いです。しかし、パソコンで見ている人もいるので、どちらでも問題ないようにしておかないと不公平になります。どちらの画面で見ても大丈夫な大きさにしておかなければなりません。少しの違いで容量が大きく跳ね上がる動画ではこの境目をしっかり見極めるのがポイントです。
フレームレート
フレームレートは1秒間に切り替える画像の数値を表します。パラパラ漫画で使う枚数と考えるとわかりやすいです。枚数が多い、つまり数字が高ければ高いほど滑らかな動きの動画になります。逆に少ないと動きが飛び飛びになってカクつきやすくなります。
たとえば、スポーツなどの動きが激しい動画では数値が高い方が滑らかになります。原稿を読みあげるだけのニュースのような動きが少ない動画では数値を低くしても違和感なく映せます。
フレームレートの設定はある程度自由に指定できます。参考までに書いておくと、地上デジタル放送で29.97fps、昔の映画で24fpsです。個人的には30fpsをよく使いますし、60fpsという高設定も見かけたりします。
基本はやはり29fps前後でしょうか。抑え気味だと23、24fpsくらいかなと。動画の内容次第で数値が変わってくるので、なるべくその動画において最適となる数値を見極めましょう。
ビットレート
ビットレートとは1秒間にどれだけのデータ量があるかを表します。この数字が高いと画質が良くなり、低いと画面がぼやけたりします。
動画サイズやフレームレートによって必要になるビットレートが変わってきますが、数字自体はピンキリに設定できます。ただ、あまり厳格にしても意味が無いことなので動画編集ソフトなどの自動設定に任せるのが1番簡単です。
自動設定で出力した動画を確認して、それでもなお容量を抑えても問題なさそうなら数字を低くすればいいですし、もう少し良くしたいなら数字を上げればいいでしょう。神経質になりすぎると結構大変なので気を付けてください。
音質
私が扱う動画は大体が楽器(ドラム)の演奏になります。音を扱うミュージシャンには切っても切れないのが音質です。ただ、CDや販売用のデジタル音源というわけではないので必要以上の音質でなくてもいいと思っています。容量を抑える意味もあって標準的な128kbpsが妥当かと。
音質にこだわりたいのなら160kbps以上にするといいでしょう。192kbps以上にもなってくるとそうそう聞き分けられないと思います。リスニング環境にもよりますが、スマホ片手に雑多の中イヤホンで聞く分にはまず間違いなく聞き分けられないと思います。
販売するCDやデジタル音源なら話は別ですが、インターネット上で、しかも確認程度のドラム演奏動画なら標準的な数字で問題ないと思います。
パターンを作成して最適な設定を見つける
大本になるデータはなるベく高画質で残しておいて、インターネット上で公開する場合はそれ用に画質を抑えたものを使うと良いでしょう。解像度、フレームレート、ビットレートをどれくらいにしていけばいいか、その境目をしっかり検証していきましょう。
パターンをいくつか作成して、どれがいいかを実機で確認します。たとえば、サイズ：640×360、フレームレート：30fps、ビットレート：3000kbps、でどう見えるのか検証します。もっとサイズを大きくした方が良いのか、もしくは小さくした方が良いのか。フレームレートは、ビットレートは、というように1つ1つ変えて比較していきます。
動画の内容次第で数値も変わります。動きが少ない動画なら数字を下げ気味にしても大丈夫ですし、スポーツなどの動きが激しい動画なら数字を大きくしないとカクついたりします。
自身が扱う動画に合った最適な画質を見つけていきましょう。
動画サイトを使うのも手です。YouTubeとかだとアップロードした時に自動である程度見やすい画質に変えてくれますし、埋め込みタグをコピペすれば簡単に動画を貼り付けられます。面倒なのが嫌ならそういった外部ツールも検討してはいかがでしょう。
キャッシュ系プラグインの導入
WordPressを使っているならキャッシュ系のプラグインを導入すると良いです。私は『W3 Total Cache』を使用しています。プラグインの有効時と停止時で10％以上改善できているのでなかなか侮れません。少しトラブルもあるようなので導入する場合は自己責任でお願いします。キャッシュ系プラグインはいくつかあるので探してみて下さい。
実際に計測して確認しよう
サイトの表示スピードは『GTmetrix』や『PageSpeed Insights』で計測ができます。サイトのURLを入力してボタンを押すだけです。評価と改善案が提示されるので、それらを参考に最適化を進めていきます。
WordPressのメンテナンス
自動挿入されるpタグの削除
WordPressは投稿編集でコンテンツ入力欄にテキストを打ち込むと何もしなくても自動的にpタグで括られる仕様になっています。ブラウザでページのソースコードをのぞいてみるとわかります。
pタグの自動挿入はタグを付加する手間を省いてくれるという意味では便利な機能です。ただ、HTMLタグでページごとにちょっとしたデザインを変えたい場合に自動挿入されるこのpタグが邪魔になったりします。
CSSで余白などを制御したいのにpタグの自動挿入のせいで意図しない余白ができたりするわけです。無差別に括るのでブロック要素(たとえばdiv)をさらにpタグで囲んでしまうという不要な括りをしてしまうこともあります。
それをそのままにしておくというのも嫌で、ことあるごとにデザインが崩れてしまうくらいならいっそのこと自動挿入を停止させた方が良いと考え、停止することにしました。自動挿入は必ず享受しなければならない機能ではありません。外そうと思えば外せます。
元々、私のやり方はコンテンツを下書きした後に1度AdobeのDreamweaverにおこしてから必要なタグを付加していきます。それを丸ごとコピペしてWordPressに移し替えます。若干手間ですが、デザインやレイアウトを思うがままに変えたい時はDreamweaverが1番やりやすいんですよね。自分で使いやすくしたいろいろな設定やデフォルトの編集機能も便利で重宝しています。pタグの自動挿入を停止してもそれ以外のタグの付加作業は変わらないので、手間自体はたいして変わらないのです。
私も変なこだわりが無ければそのままの仕様で使っていたでしょう。とはいえ、不要だと考える人もいるかもしれないので、自動挿入の停止方法を紹介しておきます。やり方は、function.phpに以下のコードを付加するだけです。これでpタグの自動挿入を止められます。
add_action('init',function(){
remove_filter('the_excerpt','wpautop');
remove_filter('the_content','wpautop');
});
add_filter('tiny_mce_before_init',function($init){
$init['wpautop']=false;
$init['apply_source_formatting']=ture;
return $init;
});
※phpを編集する時は自己責任でお願いします。トラブルがあっても即座に復旧できるようバックアップはしっかり取っておきましょう。
リビジョン機能を停止
リビジョン機能とは、編集中の投稿を自動でバックアップしてくれる機能です。上書きするのではなく、あくまでセーブポイントを作るという解釈です。編集直前までの内容をバックアップしてくれるので、突然の通信切断や間違って画面を閉じてしまった時にも編集していた内容が失われないようになっています。
場合によっては案外便利な機能なのですが、個人的にはこの機能は不要なんです。というのも、編集画面上で書くことがほとんどないのです。あらかじめ下書きを違う所で作ってからコピペで移し替えています。その後、プレビュー画面を見ながら細部を編集することになるのですが、下書きの方を重点的に編集して、それをまたコピペするのでリビジョン機能でバックアップされてもあまり意味がないのです。リビジョンで保存したものを使う機会もほとんどないので恩恵を受けにくいのです。
さらに自動保存で上書きならともかく、セーブポイントが次々とできていくのでデータベースが肥大化していきます。セーブポイントはIDを使用するので保存されれば保存されるほど無駄にIDが増えていきます。
機能のメリットを享受できないのにデメリットはしっかり残る、という状況だったので機能を停止することにしました。
リビジョン機能の停止方法
- 記述ファイル：wp-config.php
- 記述コード：define('WP_POST_REVISIONS', false);
- 記述場所：『require_once(ABSPATH . 'wp-settings.php');』よりも上
WordPressのデータが格納されているフォルダの直下にある『wp-config.php』にコードを記述します。
記述するコードは『define('WP_POST_REVISIONS', false);』。
記述場所には注意する必要があり、ファイルを開くと1番下に『require_once(ABSPATH . 'wp-settings.php');』という記述があります。それよりも上に書く必要があります。
ちなみに過去のリビジョンを削除するには『Better Delete Revision』というプラグインを使うと簡単にできます。
カテゴリーやタグの微調整
最初に考えていた分け方と実際の運用後に考えた分け方とでは若干の違いが出ました。その誤差を微調整してより便利に使いやすいようにしました。最初のうちは考えていなかったキーワードも新たに出来るかもしれませんし、ページ数が増えることで分け方も変えていった方がより使いやすいサイトになるでしょう。
トリミングされたアイキャッチ画像の調整
記事投稿時に設定したアイキャッチ画像は自動でトリミングされます。しかし、アイキャッチのデザインによってはどういう画像かわからない切り方をされている時がありました。
たとえば、サイドバーには最新記事の一覧を表示しているのですが、アイキャッチは90px×90pxの大きさにトリミングされています。この画像が良くわからない状態になっている時があるわけです。
ぱっと見ではまだマシな画像が多いのでそのままにしていますが、極端にどういう内容かわからなくなった画像については自分で編集したものを上書きしています。
細かいことかもしれませんが、案外気になってしまいます。結構目につくんですよ、バランスの悪さが。神経質になりすぎると際限がなくなるので気を付けていますが、おかしいと思った所や違和感を覚える所はなるべく放置しないように心がけています。
完成させてからの運営が大事
サイト移行の経過観察も兼ねていろいろ確認している最中に発覚したトラブルやミス。人為的なミスなら仕方ないことと諦めもつきますが、原因のわからないトラブルもあって少々戸惑いました。
対処法が簡単なものばかりだったのがよかったです。根底から変えて行かなければならないトラブルやミスだと相当な手間を強いられていたことでしょう。
サイトの統合・移行という大々的な変更の場合にトラブルはつきもの。むしろ、無いと思う方が油断なんです。作り終えた後の達成感で放置しないこと。経過をしっかり観察してミスがないか細かい部分まで目を光らせましょう。
移行してまだ日が浅いならなおのことしっかりチェックする必要があります。完成させてからがスタートライン。その後の運営が大事になるので気を抜かないようにしましょう。
