mod_pagespeed への対応要望

Simplicityの特徴 フォーラム 要望・機能追加など mod_pagespeed への対応要望

6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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” …. > にて読み込むように変更します。

    • #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を縮小するは解決できます(要設定)。
      あくまでもひとつの方法として。

    • #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.IO

      CSSなどは、プラグインで縮小化して1つにまとめることもできます。(JavaScriptファイル縮小化はエラーが出るかもしれないけど、CSSは大丈夫だったと思う)

      ですので、更新が落ち着くまでは、とりあえずこのままでいきたいと思います。

    • #26044
      hidekichi
      ゲスト

      >JavaScriptファイル縮小化はエラーが出るかもしれないけど、CSSは大丈夫だったと思う

      凄いことに、PageSpeed Insightsの結果画面中央辺りにある、

      このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。

      packerとかならエラーが出るのに、ここのダウンロードできる奴は問題なく使えたりしたりします。
      スクリプト自体が問題ない場合は、Googleが勝手に縮小化してくれたものをダウンロードして使うのもオススメです。

    • #26048
      アバター画像わいひら
      キーマスター

      このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。

      こんな機能、以前ありましたっけ。
      全然気づいていませんでした。ありがとうございます。

    • #26068
      Estable
      ゲスト

      hidekichiさん >
      scss という方法もあるのですね。試してみたいと思います。

      わいひらさん >

      上記のページのスコアが大きく上がっているのは、これまでブラウザキャッシュの設定がされてなかったり、 gzip圧縮されていなかったものが、mod_pagespeedを利用することにより、改善されたからのようです。

      http://miscblog.estable.jp/post-223/
      で掲載した結果は、全て mod_pagespeed:ON ですので「mod_pagespeedを利用することにより改善された」というわけではないと思っています。

      更新が落ち着くまでは、とりあえずこのままで

      了解しました。

      hidekichiさん、わいひらさん、丁寧に返信していただいてありがとうございました。

    • #26081
      アバター画像わいひら
      キーマスター

      全て mod_pagespeed:ON ですので「mod_pagespeedを利用することにより改善された」というわけではないと思っています。

      そこまで詳しく見ていませんでしたが、そうだとしても、@importだけ改善しても、ブラウザキャッシュや、gzip圧縮することはないですよ。
      何か別に要因があるのではないかと思います。

6件の返信スレッドを表示中
  • フォーラム「要望・機能追加など」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)