今の所へ移転してきてから大体4ヶ月
アナリティクスを見ているとPC、モバイル端末の閲覧が半々ぐらい
そこでモバイル端末用に少しでも読み込みが早く出来ないかと
いくつかやってみたので、その内容を備忘録的に記事にしておきます
まずは確認
まずは現状読み込みにどれぐらい時間が掛かっているのか
以下のサイトなどで確認
どれぐらい掛かっているのか確認できたら次に改善のための作業をします
改善作業
自分のサイトでは特に難しい事(PHPのコード変更とか)はせず
画像のサイズ変更＆圧縮、cssファイルの圧縮、.htaccessへの追加ぐらいにしました
画像サイズの変更と圧縮
まずサイズが大きな物があったらサイトに合わせてリサイズをします
自分はずっと使っているJTrimを使ってリサイズしています
大体横幅が大きくても800pxまでのサイズにすると良いみたいですね
次にその画像をファイルサイズを小さくする為に圧縮をかけます
読み込みの他にもサーバにアップロードする場合は、容量的にも小さい方が良いですしね
プラグインもあるみたいだけど、ここでは便利なウェブサービスを使います
圧縮したいファイルをD&Dしてあげると圧縮してくれるお利口パンダさんです
圧縮が済んだらあとは管理画面からアップロードをするなりFTPでアップロード
cssファイルの圧縮
次はJavascriptやCSSファイルの圧縮です
自分はCSSファイルだけ圧縮をかけて小さくしました
ここではPageSpeed Insightsを使った時に提示されるファイルを使いました
こんな感じでページの下の方にあるので
これをダウンロードしてテーマディレクトリへアップロード
などの部分も削除されてしまうので常に更新有り状態になります。
そのため自分は情報部分だけを追加したファイルをアップロードしています
圧縮をするには、他にもこういったウェブサービスがあります
圧縮の他にも圧縮したものを展開してくれたり、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>期間は自分の環境に合わせて変更しましょう
しっかりバックアップを取ってから作業しましょう
作業後の確認
一連の作業をしたら再度速度テストサイトで確認をして一応終わりです
そこまで早くはないですが、これでも大分改善されました
大分無駄があったんだなーと思い知らされました(；・∀・)
出来ればTestMySiteの結果を5秒以内にはしたいけどねぇ…
おわり
とりあえず自分で出来そうな事はこれぐらいかなと思います
サーバを変えればGZIPが使えたり、今よりも反応速度が上がると思うので
良くなるんだけど…有料鯖は最初の一歩目が敷居高くてねぇ(資金的に)(；・∀・)
あとAMP(Accelerated Mobile Pages)対応をしてみようかと思ったんだけど
これはデザインが崩れまくってダメだなってなりました…(修正が面倒くさすぎて)
AMP(Accelerated Mobile Pages)はテーマをCocoonに変更して対応させました
またJavascriptやcssファイルの圧縮もCocoonの設定にあるので、自分でやるのが面倒！という人は
テーマ変更に抵抗がなければ使ってみるのも良いかもしれません
ググれば一杯出てくる情報ですが、参考になれば幸いです
[share]
