サイトの読み込み時間改善作業

wordpress
この記事は約5分で読めます。
スポンサーリンク
Sponsor Link

今の所へ移転してきてから大体4ヶ月
アナリティクスを見ているとPC、モバイル端末の閲覧が半々ぐらい
そこでモバイル端末用に少しでも読み込みが早く出来ないかと
いくつかやってみたので、その内容を備忘録的に記事にしておきます

まずは確認

まずは現状読み込みにどれぐらい時間が掛かっているのか
以下のサイトなどで確認

GTmetrix | Website Speed and Performance Optimization
GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable ...
PageSpeed Insights
モバイルサイトの速度を比較しましょう
他のトップブランドとご自身のモバイルサイトの速度を比較して、より速く快適なモバイルサイトを構築しましょう

どれぐらい掛かっているのか確認できたら次に改善のための作業をします

改善作業

自分のサイトでは特に難しい事(PHPのコード変更とか)はせず
画像のサイズ変更&圧縮、cssファイルの圧縮、.htaccessへの追加ぐらいにしました

画像サイズの変更と圧縮

まずサイズが大きな物があったらサイトに合わせてリサイズをします

JTrim

自分はずっと使っているJTrimを使ってリサイズしています
大体横幅が大きくても800pxまでのサイズにすると良いみたいですね

次にその画像をファイルサイズを小さくする為に圧縮をかけます
読み込みの他にもサーバにアップロードする場合は、容量的にも小さい方が良いですしね

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

プラグインもあるみたいだけど、ここでは便利なウェブサービスを使います
圧縮したいファイルをD&Dしてあげると圧縮してくれるお利口パンダさんです
圧縮が済んだらあとは管理画面からアップロードをするなりFTPでアップロード

cssファイルの圧縮

次はJavascriptやCSSファイルの圧縮です
自分はCSSファイルだけ圧縮をかけて小さくしました
ここではPageSpeed Insightsを使った時に提示されるファイルを使いました


こんな感じでページの下の方にあるので
これをダウンロードしてテーマディレクトリへアップロード

上記の物をそのまま使うとテーマファイル情報(作者さんやバージョン情報)
などの部分も削除されてしまうので常に更新有り状態になります。
そのため自分は情報部分だけを追加したファイルをアップロードしています

圧縮をするには、他にもこういったウェブサービスがあります

Pretty Diff - The difference tool
Pretty Diff tool can minify, beautify (pretty-print), or diff between minified and beautified code. This tool can even beautify and minify React JSX and many ot...

圧縮の他にも圧縮したものを展開してくれたり、2つのファイルを比較出来たりします

.htaccessへキャッシュ関連追加

最後に.htaccessへキャッシュ関連を追加しました

<IfModule mod_headers.c>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 weeks"
ExpiresByType application/pdf "access plus 2 weeks"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 weeks"
ExpiresByType application/x-font-woff "access plus 1 weeks"
ExpiresByType application/x-font-opentype "access plus 1 weeks"
ExpiresByType application/vnd.ms-fontobject "access plus 1 weeks"
</IfModule>
</IfModule>

期間は自分の環境に合わせて変更しましょう

.htaccessを弄ると最悪エラーで表示がされなくなる事もあるので
しっかりバックアップを取ってから作業しましょう

作業後の確認

一連の作業をしたら再度速度テストサイトで確認をして一応終わりです
GTmetrix
PageSpeed Insights PageSpeed Insights
testmysite
そこまで早くはないですが、これでも大分改善されました
大分無駄があったんだなーと思い知らされました(;・∀・)
出来ればTestMySiteの結果を5秒以内にはしたいけどねぇ…

おわり

とりあえず自分で出来そうな事はこれぐらいかなと思います
サーバを変えればGZIPが使えたり、今よりも反応速度が上がると思うので
良くなるんだけど…有料鯖は最初の一歩目が敷居高くてねぇ(資金的に)(;・∀・)
あとAMP(Accelerated Mobile Pages)対応をしてみようかと思ったんだけど
これはデザインが崩れまくってダメだなってなりました…(修正が面倒くさすぎて)

AMP(Accelerated Mobile Pages)はテーマをCocoonに変更して対応させました
またJavascriptやcssファイルの圧縮もCocoonの設定にあるので、自分でやるのが面倒!という人は
テーマ変更に抵抗がなければ使ってみるのも良いかもしれません

simplicity2からcocoonへ
ブログのテーマをSimplicity2からCocoonへ変更した記事です

ググれば一杯出てくる情報ですが、参考になれば幸いです

[share]

タイトルとURLをコピーしました