モバイルファースト

Webサイト表示の高速化

どこまでやれば良いのだろうか?

目安として【PageSpeed Insights】がある。

モバイル・パソコン表示速度を評価する。

ただこの評価だけを追っていても答えは見えない。

【GT matrix】も同時に確認して行くと良い。

ただスピードだけを追求してもだめ。

 

肝心な記事も書かなければならないわけです。

 

モバイルサイトの処理速度を高速化することが大切である

ワードプレスの使い方から始まる。

そして、各種プラグインの設定や使い方。

肝心なブログ記事を書く前の覚えること、ややらなくてはならないことがたくさんある。

これが嫌に成るか楽しく思えるか?

 

モバイルサイトの利用度合いが異常に高い時代だからこそ高速化が重要になる

 【Test My Site with Google】にて

『モバイルサイトの処理速度は充分です。』

ここまでで後は記事書きに集中して良いと思います。

Test My Site with Google

 

モバイル・パソコン共に80点で充分です。

90点以上なら成すべき事をやり遂げた。

そう思うようにしています。

 

実際に96点97点を継続しています。

スポンサーリンク

 

サイト高速化の課題として【ページの重さを軽減しましょう】

 

画像をを適切なサイズに加工し、且つ画像を圧縮する。

Compress JPEG & PNG images

EWWW Image Optimizer

GZIPでリソースを圧縮する。

  .htaccess  に

AddType image/x-icon .ico

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

FileETag none

<FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php|\.ht)">
order allow,deny
deny from all
</FilesMatch>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !\.(html?|xml|xsl|js|css|jpe?g|png|gif|ico)$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

と記述するか!基本的にはコピペ。

一番簡単なのはWP Fastest Cache 

GZIP圧縮にチェックを入れるだけ。


リソースを圧縮する

じつはこれもWP Fastest Cache 

HTML・CSS・JavaScriptのそれぞれを圧縮するにチェックを入れるだけ。
(CSS・JavaScriptの結合にチェック)

 

高速化課題  2【リクエスト数を減らす】

ブラウザキャッシュを利用する

これもFastest Cacheでブラウザキャッシュをチェックするだけ。

スクロールせずに見える範囲のコンテンツから、レンダリングを妨げるJavaScript やCSS を排除する。

これはWP Fastest Cache Premium を購入し【Render Blocking js】にチェックを入れる。

ランディング ページでのリダイレクトを避ける

読んで字のごとしでリダイレクトをしない。

ファーストビューの読み込み速度を高速化する

画面に表示されるコンテンツをCSSやJSファイルより先に読みこむ。

スクロールせずに見える範囲はWEB SITEにアクセスした際に初めに見える範囲のことで『ファーストビュー』と呼びます。

この範囲のコンテンツの容量を減量すると言う意味です。

特に意識して何かを実施したか記憶にありませんがWP Fastest Cache Premiumをインストール設定したサイトでは  ● マークです。

 

サーバーの応答時間を短縮する

総合的な対応になって来ます。

しかし、最も効果が上がるのは高速レンタルサーバーに乗り換える。

PHPバージョンを上げる。

等が即効性があると思います。

 

サイト表受遺の高速化に取り組んで最も効果が上がること

 

高速サーバー 【Xサーバー】等に乗り換える。

お名前レンタルサーバーから移設してそのスピード感の違いに愕然としました。

これがHDDとSSDの違いかとその恩恵に感謝をしました。

 

高速化の設定がサーバーパネルから出来ます。

①Xアクセラレーター

②mod_pagespeedの設定

③ブラウザキャッシュ設定

これだけで高速化設定も非常に楽になります。

 

画像の圧縮も直ぐにその効果が解ります。

ただ一つのプラグインだけでは圧縮が完璧に行われていないことがあります。

時々、確認して下さい。

スピード化の点数が落ちている時に未圧縮の画像があります。

 

とてもビックリしたのがWP Fastest Cache Premium と言うプラグインでした。

これ一つで高速化の諸処理事項を網羅しているようにも思えます。

サイト表示高速化についてはこの辺で小休止致します。

-モバイルファースト
-