好きなジャンルを見るには
メニューをクリック→


とりあえずやったこと

<テンプレート>
●テンプレートあまりサーバを使わないよう変更
●コード類見直し、位置見直し
●プラグインなるべく使わない(JETPACK有効化するとくそ重い・・・)
●ウィジェットまったく使わない
●PCとモバイルのテンプレート統合。CSSだけ切り替え。

<設定>
●データ圧縮
●ブラウザのキャッシュを有効に など

<表示>
●遅延読み込み
●WP キャッシュの利用

大雑把にここまでやったらだいぶいいスコアになって軽くなった。

まだ高速化出来るとこ細々とありそうなのですが、
ある程度までは一気にやって、放置になるのがいつものパターンw

テンプレートを改良していくのは効果があるのはわかりました。
今回は圧縮を有効にしてみます。

 

圧縮を有効にする

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。
と書いてあります。
gzip・・・データ圧縮プログラムのひとつww
deflate・・・可逆データ圧縮アルゴリズム・・・ふむwwwww

やり方はWordpressの.htaccessファイルに下記を書き込んで、サーバでやらせればいいようですね。
.htaccessにリソースを圧縮してもらうよう、.htaccsessに書き込みサーバへアップ。
(のちほど丸っとアップ出来るものを見つけたので、書き込んだ要素は削除しました。下記参照)

さてスコアです。

 

おおお、PCのスコアが上がった。
モバイルもテンプレートいじれば同じくらいはいくのでしょう。

Fastでなくてもいいから、Lowは早めに抜け出したい><
また時間あるときにぼちぼちやってみよう。

 

まるっと書き込んで高速化一式

その後、他の事を調べていると、
https://wp-simplicity.com/simplicity-speed-up/
https://kojima-life.co.jp/post-10631
こことかここで丸っ使えるものが紹介されていました。

 

# 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>

 
 

別の日にスコアを取ってみると
 

かなりPCの方のスコアが改善。
モバイルはテンプレートのせいか全く伸びず^^;
モバイルなんとかしないと・・・><

さくらサーバがそれほど早いサーバではないとはいえ、
ホームページの表示がとても遅かったのが気になっていました。

Google PageSpeed Insightsでのサイトのスピード計測をしてみる

では、パソコン、モバイルともに40台・・・><
もちろんスピードはLawです。

速度表示の下には、高速化のための提案が書かれています。

圧縮を有効にする
サーバーの応答時間を短縮する
スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
ブラウザのキャッシュを活用する
画像を最適化する
CSSを縮小する
などなど

さてさて・・・。

 

自作のPC用テンプレート改良

PCとモバイルで違うテンプレートを作っていますが、
PCのテンプレートでどのくらい改善するのかまずやってみました。

まずはPHP7.1で動作するようにして、サーバのPHPを7.1に切り替え。
これでもかなりの高速化が見込めるようですが、体感はそんなに変わらなかったので、
どんどんテンプレートをいじっていきます。

汎用性を少しもたせていたのですが、思い切っていらないところを削ったり、
PHPで動かしている部分も、HTMLでいけるとこは直打ちに変更。

PCもモバイルも同じくらいのスコアでしたが、
PCのほうは50を超えて、毎回モバイルより良いスコアがでるようになりました。

モバイルのほうも、地道になおしていこう・・・。

FEED

  • My Yahoo!に追加
  • follow us in feedly
  • tripoo_takasをフォロー
  • rss