Lazyload プラグインと競合するHTML記述の件

  • marikodesigner

    (@marikodesigner)


    7年、 2ヶ月前

    上記質問させて頂きます。

    ページの速度をとにかく早くしたくて、いつもgoogleのTest my siteやpage speed Toulなど使ってカスタマイズしてます。

    で、いつも出てくるのが以下の文章です

    スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
    このページには、レンダリングをブロックするスクリプト リソース が 7 個、CSS リソースが 6 個あります。これが原因で、ページのレンダリングに遅延が発生しています。
    以下のリソースの読み込みが終わるまで、このページでスクロールせずに見えるコンテンツを何もレンダリングできませんでした。レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。　

    上記が出てきたので、表題のプラグインを導入し、遅延読み込みで解決できると思ったのですが、何もgoogleの改善項目に変化がありません。

    ①このプラグインは入れるだけで問題ないと伺ってますが、何かすることはあるのでしょうか？
    ②また、header.phpの記述で、<head></head>内に自分で以下の記述を加えました。

    <link rel=”preload” href=”https://mariko-jp.com/wp-content/themes/lotus_tcd039/style.css?ver=2.0.2″&gt;
    <link rel=”dns-prefetch” href=”//mariko-jp.com”>

    これがなにかプラグインとの相性が悪いのでしょうか？

    あと変更を加えたのは

    ファンクションPHPに記述　8

    if (!(is_admin() )) {
    function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, ‘.js’ ) ) return $url; //.js以外は対象外
    if ( strpos( $url, ‘jquery.min.js’ ) ) return $url; //’jquery.min.js’は、asyc対象外
    return “$url’ async charset=’UTF-8”; // async属性を付与
    }
    add_filter( ‘clean_url’, ‘add_async_to_enqueue_script’, 11, 1 );
    }

    です。

    ご回答よろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • CG

    (@du-bist-der-lenz)

    7年、 2ヶ月前

    スタイルシートが分散して存在していませんか。JavaScriptも同様で、サイトを制作過程であったり、運用を引き継いでいく必要がある現場では、それぞれ独立して記述のほうがメンテナンスしやすくていいですね。記事の追加運用以外（個別のレイアウトに必要なスタイルシートは、そのページだけのインライン化をするので）で、完了した段階でインライン化を進めます。

    munyagu

    (@munyagu)

    7年、 2ヶ月前

    こんにちは

    LazyLoadプラグインはこちらのものでしょうか。

    https://ja.wordpress.org/plugins/lazy-load/

    Lazy load images to improve page load times.

    とあるとおり、画像にしか効果はありません。

    スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

    というメッセージからすると、JavaScriptとCSSの問題ですので、LazyLoadプラグインでは解決されない問題です。

    ishitaka

    (@ishitaka)

    7年、 2ヶ月前

    テーマの style.css が2重に組み込まれています。header.php は方は不要ではないでしょうか。
    あと、dns-prefetch に自サイトを指定しても効果ないような気がしますが・・・すでに読み込まれてますからね。
    CSS を最適化でしたら、Autoptimize プラグインなどを使用するのもいいかもしれません。

    トピック投稿者 marikodesigner

    (@marikodesigner)

    7年、 2ヶ月前

    ありがとうございます。CG様のお話は、初心者すぎる私には少し難易度が高いお話です。
    munyagu様とishitaka様のお話の中で、headerphp　の記述をやめて、プラグインで
    試す方向でやりたいと思います。

    LazyloadとAutoptimize プラグインは相性悪いか否かはわかりませんよね？

    いずれにしましてもご回答頂きましてありがとうございます。

    CG

    (@du-bist-der-lenz)

    7年、 2ヶ月前

    同じ環境で運用しているのでないので、LazyloadとAutoptimize プラグインは相性悪いか否かはわかりません。言えることは、轍を踏んでしまいかねないので、いきなり、問題が起こったら困るサイトに導入しないことです。Autoptimize プラグインでスタイルシートが最適化されてしまうので、手直ししたくなった時に困らないようしておきましょう。

5件の返信を表示中 - 1 - 5件目 (全5件中)

トピック「Lazyload プラグインと競合するHTML記述の件」には新たに返信することはできません。