Simplicityの特徴 › フォーラム › 要望・機能追加など › mod_pagespeed への対応要望
-
投稿者投稿
-
-
2015年4月21日 1:21 AM #26019
Estable
ゲストSimplicityを使用していて、mod_pagespeed を ON にしても、PageSpeed Insights で修正を促される部分があります。
CSSを @import url していることが直接の原因のようです。
可能であれば今後のVupにて対応頂ければと思い投稿しました。開発効率を優先するために、 @import url を使用しているかと思いますので、意に沿わない場合にはご容赦下さい。
詳細と対応方法は、
http://miscblog.estable.jp/post-223/
に記載しました。簡単に記述すると、
修正を促される部分とは、
/css/feedly.css
/css/blog-card.css
/css/extension.css
/css/other.css
/css/sns.css
/css/media.css
/css/narrow.css
/css/other-mobile.css
に対して、
・スクロールせずに見えるコンテンツのレンダリングをブロックしているCSSを排除する
・ブラウザのキャッシュを活用する
・圧縮を有効にする
・CSSを縮小する
の指摘です。
style.css、mobile.css、responsive.css にて上記のCSSを @import url していることが直接の原因のようですので、対処として <link rel=”stylesheet” …. > にて読み込むように変更します。 -
2015年4月21日 1:54 PM #26027
hidekichi
ゲストhtaccessの使用制限でうちのサーバーではgzipやらキャッシュやらの設定を個人的に触れないような感じなので、完全に解決しているわけではないのですが、うちのサイトでは個人的にcssをscssにして、ほぼSimplicityの元の構造のまま管理しています(もう少し細分化してます)。
例えば
_feedly.scss
_blog-card.scss
….scss
等としておいて、scssの本体ファイルで アンダーバー付きのファイルを @import “feedly”; などとして読み込み、最終的に1枚のcssにコンパイル&縮小化(圧縮)してます。
scssは誰でもが利用できる環境では無いと思うので(node.jsやらcompass、glup、gruntやらを使用するので)、あくまでも利用できる人のみと言うことですがとても便利です。設定さえしておけばベンダープレフィックスも自動で付きますし。
これにより、ブラウザのキャッシュを活用する、圧縮を有効にする、CSSを縮小するは解決できます(要設定)。
あくまでもひとつの方法として。 -
2015年4月21日 3:31 PM #26033
わいひらキーマスター開発効率を優先するために、 @import url を使用しているかと思いますので、意に沿わない場合にはご容赦下さい。
ファイルを分けているのは、デバッグ時に他の人のサイトのソースをみたときに、問題箇所がわかりやすいからだったりもするので、ファイルを分けたままのその方法は大丈夫です。
ただ、同様の条件(mod_pagespeedを使わない)で、以下のページのカスタマイズを編集前と、編集後で実際に比較した場合、PageSpeed Insightsのスコアはそこまで変わりません。(せいぜい0-1ポイント違い)
http://miscblog.estable.jp/post-223/
上記のページのスコアが大きく上がっているのは、これまでブラウザキャッシュの設定がされてなかったり、gzip圧縮されていなかったものが、mod_pagespeedを利用することにより、改善されたからのようです。
以下に書かれているようなことが、mod_pagespeedにより行われたからだと思います。
コピペ一発でSimplicityを結構高速化する方法確かに、@importで呼び出すより、linkで呼び出した方が多少なりとも早いのは早いです。
ただ、hidekichiさんの書かれているような、scssを使ってまとめるために、@importにしているところもあるので、それまではこのままにしておきたく思います。以下のSass compileのようなことをそのうちするつもりです。
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | Developers.IOCSSなどは、プラグインで縮小化して1つにまとめることもできます。(JavaScriptファイル縮小化はエラーが出るかもしれないけど、CSSは大丈夫だったと思う)
ですので、更新が落ち着くまでは、とりあえずこのままでいきたいと思います。
-
2015年4月21日 6:11 PM #26044
hidekichi
ゲスト>JavaScriptファイル縮小化はエラーが出るかもしれないけど、CSSは大丈夫だったと思う
凄いことに、PageSpeed Insightsの結果画面中央辺りにある、
このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。
packerとかならエラーが出るのに、ここのダウンロードできる奴は問題なく使えたりしたりします。
スクリプト自体が問題ない場合は、Googleが勝手に縮小化してくれたものをダウンロードして使うのもオススメです。 -
2015年4月21日 7:17 PM #26048
わいひらキーマスターこのページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。
こんな機能、以前ありましたっけ。
全然気づいていませんでした。ありがとうございます。 -
2015年4月22日 7:03 AM #26068
Estable
ゲストhidekichiさん >
scss という方法もあるのですね。試してみたいと思います。わいひらさん >
上記のページのスコアが大きく上がっているのは、これまでブラウザキャッシュの設定がされてなかったり、 gzip圧縮されていなかったものが、mod_pagespeedを利用することにより、改善されたからのようです。
http://miscblog.estable.jp/post-223/
で掲載した結果は、全て mod_pagespeed:ON ですので「mod_pagespeedを利用することにより改善された」というわけではないと思っています。更新が落ち着くまでは、とりあえずこのままで
了解しました。
hidekichiさん、わいひらさん、丁寧に返信していただいてありがとうございました。
-
2015年4月22日 6:28 PM #26081
わいひらキーマスター全て mod_pagespeed:ON ですので「mod_pagespeedを利用することにより改善された」というわけではないと思っています。
そこまで詳しく見ていませんでしたが、そうだとしても、@importだけ改善しても、ブラウザキャッシュや、gzip圧縮することはないですよ。
何か別に要因があるのではないかと思います。
-
-
投稿者投稿
- フォーラム「要望・機能追加など」には新規投稿および返信を追加できません。