初心者がサイトの表示速度高速化を試みた


スポンサーリンク


スポンサーリンク



 

 

パソコンやスマホで、ブログやサイトを開く時に時間が掛かると、イライラしますよね。

こんにちは。あだじょぱです。

WordPress(サイト作成ソフト)の管理画面から色々と変更を加えたり、プラグインを更新や追加していました。

そこで、久しぶりにサイトの表示速度を計測してみたのですが、結果が良くなかったので、これでは、ユーザーファーストじゃないなと思い、出来る限り改善しようと思った次第です。

初心者なので、対応策は全て手探り。

なんとか頑張ったオジさんの奮闘の記録です。

 

 

サイトの表示速度

 

当ブログサイトは、レスポンシブル対応のテーマを使用しているので、パソコンで表示される画面が、スマホでは、スマホの画面に応じたサイズで表示されるようになっています。

その両方で速度を計測出来るサイトがあるので、計測してみましたが、結果が良くありませんでした。

 

 

遅くなる要因

 

サイトの表示が遅くなるには、それなりの原因となる要素があります。

  • 画像が多い
  • CSSやスクリプトの読み込みに時間が掛かる
  • サーバーの反応が遅い

 

当サイトでは主に、この3点が遅くなる要因になっているような感じでした。

しかし、北海道の観光スポットを実際に行って写真を撮っているので、写真を消す事は出来ませんし、消してしまえばブログを書く意味さえ無くなってしまいます。

かといって、CSSやスクリプトの改善なんて、初心者の僕が手を出すにはハードルが高すぎます。

前に1度、何をしたのかわからずサイトが消えてしまった事もあり、怖いです。

サーバーの問題は、評判の良いXSERVERを使用しているので、サーバー側の設定を変更する事など、改善策がありそうに感じました。

 

現時点で、画像が多くデータの読み込みに時間が掛かるのは、この先の運営にも問題が出てくるので画像の問題は解決しなければならないですし、CSSに手を出せない以上は、サーバーの方も対策をして、最善の対応をしなければならないと思いました。

 

 

打開策を探る

 

要因は、判明しました。しかし、どのような事で遅くなるのかが、わからなければ対応も難しいので考えてみます。

【画像について】

当ブログサイトでは、一般的なサイトに比べても観光スポットや紹介したい物は、なるべくわかり易くという事から、自分で撮った写真を使用しています。

一部の北海道記事以外では、フリー素材を使用していますが、自分で撮った写真が断然多いです。

そして、画像のサイズにも拘っており、これ以上の縮小はしたくないという思いがあります。

であれば、この画像のサイズのままで少しの劣化があったとしても、データサイズのみ圧縮するという方法が最善だと判断しました。

【サーバーの反応について】

次にサーバーの反応について調べてみました。

デフォルト設定に限りなく近い状態で使用しているXSERVERですが、管理ユーザーとしての管理画面から設定出来る項目が沢山あります。

初心者なので、触らない方が良いと考えていた事もあり、まだまだ改善の余地があるように思えました。

そこでサーバーの設定を変更し、高速化出来ないのかを考える事にしました。

どうやら、対応出来そうな設定項目があるようです。

 

 

対策

 

パソコンやスマホからサイトを開く際に、データを読み込んで表示します。

そのデータを円滑に素早く読み込めれば、表示速度も速くなるのですが、サイトには色々なデータが埋め込まれていますので、中には時間が掛かってしまうものが存在するのも確かです。

しかし、プログラムの変更などは初心者にはハードルが高く、間違いがあるとサイト自体が表示されなくなったり、変更点を元に戻すことが出来なくなったりすると、サイトが消えたのと同じ事になってしまします。

そこで、今回は出来る限り初心者にも簡単な方法で改善する事を目的としました。

 

 

プラグインを使用する

 

このブログで使用している写真は、MacBookProにデフォルトで入っているソフトでリサイズした画像を貼り付けています。

因みに写真は、Rawで撮影したものでは無く、現段階ではJpegで撮影したものばかりなのでNikonのソフトは使用していません。今後は使用したいと思っています。

リサイズした画像は、そのままサーバーへアップロードしています。

 

このリサイズしてアップした画像を、後から全て加工し直すというのは、大変な作業になってしまうので、一括で処理できる方法を探りました。

そこで辿り着いたのが、プラグインを使用するという方法です。

 

EWWWimageというプラグインを使用すれば、一括で画像を圧縮出来るという事です。

しかもサイズは変更されないので試す価値ありです。

早速、プラグインを導入してみました。

 

 

EWWWimageとは

 

有名なプラグインで、WordPressの管理画面からプラグインの新規追加で、プラグイン名で検索すると出てきます。

今回は、このプラグインを試す事にしました。

ダウンロードしてインストールすると、デフォルト設定のままでも使えるようです。

 

今までアップロードしていた画像を圧縮したいので、管理画面サイドバーからメディアを選択すると下にBuikOptimizeという項目が出てきます。

 

ewww

 

これをクリックする事で、EWWWimageの画面が表示されるのでボタンを押して、全ての画像の圧縮をスタートさせます。

画像の量が結構有るので、終了まで暫くかかりましたが、無事完了しました。これで画像の方の改善策は完了です。

念のため、変更を加えた後は、自分のサイトを開いて異常が無いかを確認します。

 

 

サーバーの設定

続いてサーバーの設定についても変更すべき点を変更して改善します。

当サイトの場合は、XSERVERを使用しているので、XSERVERにログインしてサーバーパネルにアクセスします。

パネル自体の各設定項目は多くあるのですが、その中から速度に影響がありそうな部分を探ります。

今回は、PHP Ver.の変更を選択しました。

 

xservpan1

通常はPHPのバージョンが5.5なのですが、現在は5.6がお勧めらしく高速化に繋がるという事なのですが、XSERVERは、更に上のバージョンPHP7に対応しているので、今回はPHP7へ変更してみました。

これには注意が必要で、PHP7に対応しているのは、サーバー側の話ですので周辺のプラグインなどが非対応の場合は、サイトに異常が出る危険性もあります。

よく調べてから変更しないと危険という事ですね。

 

変更自体は、サーバーパネルから簡単に出来るので、変更してから1度サイトを確認して、異常が無ければOKですし、異常が出るようであれば戻せば良いと思います。

当サイトは異常が出ませんでしたので、OKとします。

 

 

少し厄介な段階へ

 

実は、ここまで対応して速度を計測したところ、若干の改善がみられましたが、まだまだ納得のいくレベルではありませんでした。

そこで、次に簡単とまで言えない段階に手を出してみようと考えました。

 

 

キャッシュについて

 

データを読み込む際に、キャッシュを利用すれば速度が上がるというので、キャッシュ系のプラグインを探すことにしました。

しかし、キャッシュ系のプラグインは、このサイトで使用しているテーマとは相性が悪く、不具合の原因になるという評判が多いので、キャッシュ系のプラグインを用いての速度改善は難しいようです。

そこで発見したのが初心者でも安心して使えそうなプラグイン、WP Fastest Cacheというものでした。

 

 

WP Fastest Cache

 

これもキャッシュ系のプラグインですが、そんなに難しくないので初心者でも使えます。

キャッシュ系のプラグインは、他のプラグインとの相性が悪くなる物が多いので敬遠するところですが、調べていて、唯一使えそうなプラグインを発見しました。

内容的には、少し物足りないような気もしますが、無いよりは良いのかもしれないという気持ちから、インストールしてみる事に。

 

実際、色々な項目が設定出来るのですが、あまり深いところは危険だと僕の役立たずなアンテナが反応した為、そこまで深く設定せずに使用しています。

これで少し改善されたのかというと微妙です・・・。

ま、何か不具合を生じるような場合は簡単にキャッシュを削除する事も出来ますし、最悪の場合はプラグインを削除する事で対応出来そうなので、このまま使ってみます。

 

 

あと1つ出来る事

 

ここまで対策をしていく中で、自サイトで使用しているテーマについても、ある程度把握しておかないと、プラグインの相性などの判断が難しいという事に気がつきました。

そこで、色々と調べていて表示速度の高速化として、もう1つ対応出来そうなものを見つける事が出来ました。

それは、.htaccessを編集するという方法です。

 

 

.htaccessとは

 

当サイトを運営する上で、サーバー内に.htaccessというファイルがアップされています。これは、サーバーの動きを設定するファイルで、管理ユーザーがテキストを変更して編集するという事が可能になっています。

ただ、これはサーバー側がApacheである必要があります。

Apacheとは、サーバーのプログラムソフトの種類なのですが、当サイトで使用しているXSERVERはApacheである為に、この方法が使用できるという事です。

 

ここまでの記載内容では、初心者からすると難しくて意味がわからないかもしれません。

簡単に説明すると、ブラウザでサイトを開く時に、ブラウザからの問い合わせを受けたApacheが.htaccessに確認をし、その指示に従ってサイトのページを開くといった感じです。

ですので、.htaccessファイルにブラウザキャッシュやリソースの圧縮を記載すれば、表示速度の高速化に繋がるのですね。

設定の記載内容は以下です。

# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

# MIME Type 追加
<IfModule mime_module>
    AddType text/cache-manifest .appcache
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    # プロキシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
    ExpiresActive On

    # キャッシュ初期化(1秒に設定)
    ExpiresDefault "access plus 1 seconds"

    # MIME Type ごとの設定
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 1 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff2 "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # 古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

    # 画像など圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

こちらのサイトにあったものを使用させて頂きました。

 

 

XSERVERでの編集は簡単

 

そこで、初心者としては賭けのようなところも有りましたが、チャレンジしてみる事にしました。

一般的には、FTPソフトなどを使用して自身の使用しているサーバーへアクセスし、.htaccessファイルを書き換えたものをアップロードする必要があります。

その際には、必ず既存のファイルをバックアップとして、どこかへ保存しておく事をお勧めします。

しかし、XSERVERの場合はFTPソフトを使用しなくても、サーバーパネルへログインするだけで.htaccessの編集という項目があり、簡単に書き換える事が出来ます。

ただ、この場合も事前にバックアップは準備しておいた方が安全だと思います。

xservpan2

そこで、直接ファイルを編集し、高速化についての一連の作業は完了しました。

 

 

まとめ

 

実際に高速化として、初心者が出来る範囲の考えられる手段は概ね完了したと思います。

そこで、表示速度を計測したところ成果はありました。

が、やはり画像がネックとなって遅めの表示速度でした。

サイトの特徴でもある写真画像に関しては、これ以上の対策は難しいように感じていますので、取りあえずは様子を見ながらとなりそうです。

初心者には限界があるので、もっと勉強してスキルアップしなきゃならないと、感じる今日この頃ですが、簡単にスキルアップ出来るものでもないので日々努力ですね。

あまりにも遅くなるようであれば、次に何が出来るのかを検討したいと思います。


スポンサーリンク


スポンサーリンク





コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータがどう処理されているか知りたい方はこちらをお読みください

ABOUTこの記事をかいた人

大阪から札幌への移住者。二度の移住でトータル15年ほど。 会社は早期退職。仕事やプライベートで北海道全域を走破。 趣味はGuitarとCamera。どちらも未熟である。  HM/HRと綺麗な素敵レデーをこよなく愛す。怪しい者ではない。