はじめまして。ninomiya.laboと申します。 こちらPageSpeed insightの問題点改善と捉えてしまい、最適化した多数のファイルを添付する予定であったのですが誤りでしょうか？ 以下調査した事項を記載致します。 こちらトップページのみ確認しておりますが、404エラーやその他jsエラーなども多数発生していました。 パフォーマンスを向上させる場合そちらも一つずつ改善された方が良いようです。 ※添付ファイル「mobile」はツールを使い最適化したファイル群です。 ※添付ファイル「optimized_contents」はPageSpeed Toolsより最適化されたPC向けのファイル群です。 [モバイル] 41 / 100 速度 ！修正が必要： １．画像を最適化する 該当の画像は恐らく高クオリティで圧縮したもののため、Photoshopなどで書き出す際にWEBに最適な圧縮にするとある程度圧縮されます。 今回は一括で圧縮できるサービスの「Optimizilla」を使いました。 他にも画像圧縮サービスは沢山ありますが、複数形式に対応し画質を比較したところOptimizillaが良いようです。 http://optimizilla.com/ja/ ※gifの場合は以下 https://compressor.io/compress ２．ブラウザのキャッシュを活用する キャッシュ制御の方法はいくつかありますが、以下が一番最適と判断致します。 .htaccessに以下の記述をします。 <Files ~ ".(gif|jpe?g|png|ico|js|gz|otf|ttf|eot|woff)$"> Header set Cache-Control "max-age=2592000" </Files> ※.htaccessとはディレクトリ単位でアクセスを制御するファイルです。 index.htmlと同じディレクトリに作成しますが、サーバーの設定などにより動作しない場合がありますのでレンタルサーバーなどの場合はお気をつけください。 ３．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する こちらの問題はjs、cssが小さく分散されていることへのコスト、または大き過ぎることへの遅延が指摘されているようです。 こちらも上記の.htaccessで改善が予想されます。 ※なおトップページのheadでjquery-1.10.1.min.jsを二回読み込んでいますので一つ削除してください。 ！修正を考慮： １．圧縮を有効にする もっとも簡単な方法は.htaccessへ以下の記述します。 <IfModule mod_deflate.c> SetOutputFilter DEFLATE # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外 BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # gifやjpgなど圧縮済みのコンテンツは再圧縮しない SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _\.utxt$ no-gzip # htmlやcssなどは圧縮 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> ２．JavaScriptを縮小する。 以下のようなサイトで指定ファイルを圧縮します。 https://syncer.jp/js-minifier ３．CSSを縮小する。 以下のようなサイトで指定ファイルを圧縮します。 https://syncer.jp/css-minifier ４．HTMLを縮小する。 以下のようなサイトで指定ファイルを圧縮します。 http://www.textfixer.com/html/compress-html-compression.php 99 / 100 ユーザーエクスペリエンス ！修正を考慮： こちらはbxsliderというjqueryプラグインに依存しています。 バージョンアップするか、CSSを解析することにより改善が見込まれますが特に操作性は気にならず、「修正を考慮」という位置付けのため対応は見送られてもよいように思われます。 [PC] ！修正が必要： １．ブラウザのキャッシュを活用する [モバイル] ２．ブラウザのキャッシュを活用するを実施すると改善が見込まれます。 ２．圧縮を有効にする [モバイル] 修正を考慮１．圧縮を有効にすると実施すると改善が見込まれます。 ３．画像を最適化する 添付ファイル「PCサイト修正が必要な画像」を適用することにより改善が見込まれます。 ただし指摘事項にもありますように、小さな画像をjpgとしている箇所などもあり画像形式の見直しも必要の可能性があります。 ！修正を考慮： 添付ファイルの「optimized_contents」となります。 どうぞ宜しくお願い致します。
メンバーからのコメント
はじめまして。ninomiya.laboと申します。
こちらPageSpeed insightの問題点改善と捉えてしまい、最適化した多数のファイルを添付する予定であったのですが誤りでしょうか？
以下調査した事項を記載致します。
こちらトップページのみ確認しておりますが、404エラーやその他jsエラーなども多数発生していました。
パフォーマンスを向上させる場合そちらも一つずつ改善された方が良いようです。
※添付ファイル「mobile」はツールを使い最適化したファイル群です。
※添付ファイル「optimized_contents」はPageSpeed Toolsより最適化されたPC向けのファイル群です。
[モバイル]
41 / 100 速度
！修正が必要：
１．画像を最適化する
該当の画像は恐らく高クオリティで圧縮したもののため、Photoshopなどで書き出す際にWEBに最適な圧縮にするとある程度圧縮されます。
今回は一括で圧縮できるサービスの「Optimizilla」を使いました。
他にも画像圧縮サービスは沢山ありますが、複数形式に対応し画質を比較したところOptimizillaが良いようです。
http://optimizilla.com/ja/
※gifの場合は以下
https://compressor.io/compress
２．ブラウザのキャッシュを活用する
キャッシュ制御の方法はいくつかありますが、以下が一番最適と判断致します。
.htaccessに以下の記述をします。
<Files ~ ".(gif|jpe?g|png|ico|js|gz|otf|ttf|eot|woff)$">
Header set Cache-Control "max-age=2592000"
</Files>
※.htaccessとはディレクトリ単位でアクセスを制御するファイルです。
index.htmlと同じディレクトリに作成しますが、サーバーの設定などにより動作しない場合がありますのでレンタルサーバーなどの場合はお気をつけください。
３．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
こちらの問題はjs、cssが小さく分散されていることへのコスト、または大き過ぎることへの遅延が指摘されているようです。
こちらも上記の.htaccessで改善が予想されます。
※なおトップページのheadでjquery-1.10.1.min.jsを二回読み込んでいますので一つ削除してください。
！修正を考慮：
１．圧縮を有効にする
もっとも簡単な方法は.htaccessへ以下の記述します。
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# gifやjpgなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
# htmlやcssなどは圧縮
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>
２．JavaScriptを縮小する。
以下のようなサイトで指定ファイルを圧縮します。
https://syncer.jp/js-minifier
３．CSSを縮小する。
以下のようなサイトで指定ファイルを圧縮します。
https://syncer.jp/css-minifier
４．HTMLを縮小する。
以下のようなサイトで指定ファイルを圧縮します。
http://www.textfixer.com/html/compress-html-compression.php
99 / 100 ユーザーエクスペリエンス
！修正を考慮：
こちらはbxsliderというjqueryプラグインに依存しています。
バージョンアップするか、CSSを解析することにより改善が見込まれますが特に操作性は気にならず、「修正を考慮」という位置付けのため対応は見送られてもよいように思われます。
[PC]
！修正が必要：
１．ブラウザのキャッシュを活用する
[モバイル] ２．ブラウザのキャッシュを活用するを実施すると改善が見込まれます。
２．圧縮を有効にする
[モバイル] 修正を考慮１．圧縮を有効にすると実施すると改善が見込まれます。
３．画像を最適化する
添付ファイル「PCサイト修正が必要な画像」を適用することにより改善が見込まれます。
ただし指摘事項にもありますように、小さな画像をjpgとしている箇所などもあり画像形式の見直しも必要の可能性があります。
！修正を考慮：
添付ファイルの「optimized_contents」となります。
どうぞ宜しくお願い致します。