サポート » 使い方全般 » 表示速度を早くしたい

  • ワタシのサイトです。
    http://www.cambodialife.mobi

    表示速度が遅く(特にモバイル)
    困ってます。

    サーバーはwpXです。
    プラグインなど

    改善方法ございましたら、
    ご指導お願いします。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • スポンサードリンクが多いですね

    トピック投稿者 dyagaimo

    (@dyagaimo)

    맹조さん
    ありがとうございます。

    いくつぐらいにすれば妥当でしょうか?

    Google AdSenseのガイドラインにありますが、1ページあたり3箇所以上には配信されません。

    GoogleのPageSpeed Insightsでチェックしてみましょう。
    https://developers.google.com/speed/pagespeed/insights/

    速度アップに最も有効なのは
    1.gzip圧縮を利用する
    2.ブラウザキャッシュの期限を設定
    の2つだと思います。

    .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 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-opentype .otf
        AddType application/vnd.ms-fontobject .eot
    </IfModule>
    
    # プロクシキャッシュの設定(画像とフォントをキャッシュ)
    <IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|otf|eot)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    </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-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)$ no-gzip dont-vary
        # プロクシサーバーが間違ったコンテンツを配布しないようにする
        Header append Vary Accept-Encoding env=!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-woff
        AddOutputFilterByType DEFLATE application/x-font-opentype
        AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    </IfModule>
    
    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    
    # END WordPress

    こんなかんじ。

    トピック投稿者 dyagaimo

    (@dyagaimo)

    maru0014さん、ありがとうございます。

    現在
    ## EXPIRES CACHING ##
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg “access 1 week”
    ExpiresByType image/jpeg “access 1 week”
    ExpiresByType image/gif “access 1 week”
    ExpiresByType image/png “access 1 week”
    ExpiresByType text/css “access 1 week”
    ExpiresByType application/x-javascript “access plus 1 week”
    ExpiresByType text/javascript “access plus 1 week”
    ExpiresByType application/javascript “access plus 1 week”
    ExpiresByType image/x-icon “access 1 week”
    </IfModule>
    ## EXPIRES CACHING ##
    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    # END WordPress
    SetEnvIf Request_URI “.*” AllowCountry

    となっているのを、
    # 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 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-opentype .otf
    AddType application/vnd.ms-fontobject .eot
    </IfModule>

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

    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    # END WordPress
    SetEnvIf Request_URI “.*” AllowCountry

    にそっくり入れ替えればいいんでしょうか?

    トピック投稿者 dyagaimo

    (@dyagaimo)

    試してみたのですが、
    表示が壊れてしまいました。。

    dyagaimoさん
    説明が足らず申し訳ありません。

    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    
    # END WordPress

    の部分はサーバーによって設定が異なるので元の記述のままにします。
    私のWordPressもwpXクラウドを使用し、この内容で問題なく稼働しているので.htaccessの記述は問題ないはず。

    その上で、wpX独自のキャッシュ機能とmod_pagespeedはオフにします。
    (これが競合して表示が崩れたのだと思います。)

    トピック投稿者 dyagaimo

    (@dyagaimo)

    ありがとうございます。
    試してみたいのですが
    \が表示されず¥になっていることがわかりました。
    \は、どうやったら変換されずに残りますか?

    バックススラッシュはこのフォーラム上で勝手に変換されただけなので ¥ で正しいです。

    これはフォント指定の問題で、データ上は同じ文字です。

    参考:バックスラッシュを入力したい

    トピック投稿者 dyagaimo

    (@dyagaimo)

    ありがとうございます!
    モバイル61,パソコン75が
    それぞれ65、78になりました!

    まだモバイル、パソコンともに黄色なので(ずっと赤色でしたが)
    青色までもっていきたいです。

    ありがとうございます。
    もしほかにもなにかありましたら、

    ご指導お願いします!

    今回行った設定によりキャッシュがきちんと設定されている状態になっています。
    つまり、デザインなどの更新を行った際にすぐに表示されずしばらくの間はキャッシュが表示されてしまいます。

    もし全然反映されないなーと思ったらブラウザの履歴を一旦削除して更新してみてください。

    キャッシュ設定以外ですぐに実装できるとしたら.jsをフッターに移動させる ことでpage speed Insightsで点数を上げることができます。

    プラグインのScripts to Footerをインストールすれば一発です。

    ※似たような機能でhead cleanerがありますが私が実装してみた限りではデザインが崩れるようなのであまりオススメできません。

    トピック投稿者 dyagaimo

    (@dyagaimo)

    maru0014さん
    ありがとうございます!

    デザインなどの更新を行った際にすぐに表示されずしばらくの間はキャッシュが表示されてしまいます。

    これはワタシのPCのみに発生することなのでしょうか?
    サイト訪問者のみなさん、全員に起こることですか?

    Scripts to Footer
    さっそくインストールしました!
    点数あがりました!ありがとうございます

    すべての訪問者のPCでも指定した期間内はブラウザキャッシュが読み込まれます。

    すぐに全てのPCに対して反映させたい場合は一時的にキャッシュの設定を削除するのも一つの手です。

    トピック投稿者 dyagaimo

    (@dyagaimo)

    maru0014さん
    ありがとうございます!

    ”すぐに全てのPCに対して反映させたい場合は一時的にキャッシュの設定を削除するのも一つの手です。 ”

    反映させたいです!
    ・・ただ、やり方がわかりません!

    該当箇所、、ぜひ教えてください

    .htaccessの

    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    
    # END WordPress

    のみを残して他を消すだけです。
    1週間ほどしてから元に戻せば大丈夫かと

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「表示速度を早くしたい」には新たに返信することはできません。