SEO対策として、Laravel・Vueで作ったSPAサービスでロゴなどの画像をブラウザにキャッシュさせて高速化させてたいと考えているのですが、出来ません。
Lighthouseの結果を見ても、"静的なアセットと効率的なキャッシュポリシーの配信"が表示されており、pngなどの画像の「キャッシュのTTL」もNoneと表示されています。
アプリ名/publicの.htaccessに見様見真似で以下のように記載してみたのですが、何が問題なのでしょうか?
<IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews -Indexes </IfModule> RewriteEngine On # Handle Authorization Header RewriteCond %{HTTP:Authorization} . RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] # Redirect Trailing Slashes If Not A Folder... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} (.+)/$ RewriteRule ^ %1 [L,R=301] # Handle Front Controller... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php </IfModule> #以下が加えたところ <ifModule mod_expires.c> ExpiresActive On ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/webp "access plus 2592000 seconds" </ifModule> <ifModule mod_headers.c> ExpiresActive On <filesmatch ".(gif|ico|jpeg|jpe|jpg|webp|png)$"> Header set Cache-Control "max-age=604800, public" </filesmatch> </ifModule>
なおwebpack.mix.jsは以下のようにしています。
webpack
1const mix = require("laravel-mix"); 2 3mix 4 .js("resources/assets/js/app.js", "public/js") 5 .vue() 6 .sass("resources/assets/sass/app.scss", "public/css"); 7
初心者でネットワークまわりのことをあまり理解出来ていないのですが、ご教示どうぞよろしくお願いします。
Laravel@7.28.1
vue@2.6.12
Server version: Apache/2.4.29 (Ubuntu)
あなたの回答
tips
プレビュー