質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

Wordpressのサイトの読み込み時のScriptエラーについて

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,522

sonjfica

score 6

 前提・実現したいこと

Wordpressを用いてブログの作成をしております。
ページ表示時にChromeのDevツールに下記エラーが発生しております。
恐らくプラグインで使用しているslickとjQueryRipplesの読み込みの際に
エラーが発生しているようです。
該当のヘルプURLを読んでも、内容が分からず困っています。
サイトの読み込みが遅い原因になっているの可能性もあるので、ここのエラーの解決を図りたいです。

 発生している問題・エラーメッセージ

//slick,ripplesを使用するしないに関わらず発生するエラー
[Violation] Forced reflow while executing JavaScript took 38ms//同様のエラーが複数発生します
[Violation] 'setTimeout' handler took 117ms
//slickのみを有効にした場合に発生するエラー
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 jQuery.js:5039
[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 jQuery.js:5039
//ripplesのみを有効にした場合に発生するエラー
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 jQuery.js:5039
[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 jQuery.js:5039
[Violation] 'requestAnimationFrame' handler took 59ms

 該当のソースコード

//jQUery3.3.1 jQuery.js:5039
// Init the event handler queue if we're the first
            if ( !( handlers = events[ type ] ) ) {
                handlers = events[ type ] = [];
                handlers.delegateCount = 0;

                // Only use addEventListener if the special events handler returns false
                if ( !special.setup ||
                    special.setup.call( elem, data, namespaces, eventHandle ) === false ) {

                    if ( elem.addEventListener ) {
                        elem.addEventListener( type, eventHandle );
                    }
                }
            }
//common.js 自身で書いたソースコード

//jQueryRipplesのソース
    if ($('#header').length) {
        $('.bg canvas').height(h + 70);
        $('.bg canvas').css("top","70" + "px");
        try {
            $('.bg').ripples({
                resolution: 500,
                dropRadius: 20,
                interactive: false
            });
        } catch (e) {

        }
        setInterval(function() {
            var $el = $('.bg-contents');
            var x = Math.random() * $el.outerWidth();
            var y = Math.random() * $el.outerHeight();
            var dropRadius = 20;
            var resolution = 1024;
            var strength = 0.01 + Math.random() * 0.09;

            $el.ripples('drop', x, y, dropRadius, strength, resolution);
        }, 1024);
        $('.bg-contents').css('background-image', 'none');
        $('.bg-contents').css('background-attachment', 'fixed');
    }
//slicksliderのソース
    if ($('.slick').length) {
        $('.slick').slick({
            dots: false,
            fade: true,
            cssEase: 'linear',
            arrows: false,
            adaptiveHeight: true,
            autoplay: true,
            autoplaySpeed: 2500,
            lazyLoad: "progressive"
        });
    }
//slick使用部分のphpソース
<section class="top_slide_wrap">
    <div class="slide_inner slick">
        <?php $args = array(
        'post_type' => 'slide',
        'posts_per_page' => -1
        );
        $customPosts = get_posts($args);
        if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?>
        <?php $img = get_field('slick_img');
            $img_url = $img['url'];
            $link = get_field('slick_url')
        ?>
        <div>
            <?php if(!empty($link)): ?>
            <a href="<?php echo $link;?>" class="slick_link link_on hover">
                <img src="<?php echo $img_url;?>">
            </a>
            <?php else: ?>
            <a href="" class="slick_link link_off">
                <img src="<?php echo $img_url;?>">
            </a>
            <?php endif;?>
        </div>
        <?php endforeach; ?>
        <?php else :?>
        <div>
            <img src="<?php echo get_template_directory_uri(); ?>/img/slide1.jpg">
        </div>
        <div>
            <img src="<?php echo get_template_directory_uri(); ?>/img/slide2.jpg">
        </div>
        <div>
            <img src="<?php echo get_template_directory_uri(); ?>/img/slide3.jpg">
        </div>
        <?php endif;
        wp_reset_postdata(); ?>
    </div>
</section>

 試したこと

jQueryの読み込みバージョン変更→変化なし
上記のcommon.jsの記述削除→エラーは発生しない

 補足情報(FW/ツールのバージョンなど)

jQuery3.3.1
slick1.6
jQueryripples version不明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • sonjfica

    2018/11/14 10:15

    mts10806様 slickを使用している該当HTMLは以下の通りです <section class="top_slide_wrap"> <div class="slide_inner slick"> <?php $args = array( 'post_type' => 'slide', 'posts_per_page' => -1 ); $customPosts = get_posts($args); if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?> <?php $img = get_field('slick_img'); $img_url = $img['url']; $link = get_field('slick_url') ?> <div> <?php if(!empty($link)): ?> <a href="<?php echo $link;?>" class="slick_link link_on hover"> <img src="<?php echo $img_url;?>"> </a> <?php else: ?> <a href="" class="slick_link link_off"> <img src="<?php echo $img_url;?>"> </a> <?php endif;?> </div> <?php endforeach; ?> <?php else : //記事が無い場合 ?> <div> <img src="<?php echo get_template_directory_uri(); ?>/img/slide1.jpg"> </div> <div> <img src="<?php echo get_template_directory_uri(); ?>/img/slide2.jpg"> </div> <div> <img src="<?php echo get_template_directory_uri(); ?>/img/slide3.jpg"> </div> <?php endif; wp_reset_postdata(); ?> </div> </section>

    キャンセル

  • m.ts10806

    2018/11/14 10:16

    質問は編集できます。コメント欄ではマークダウンが使えませんので、質問を編集して追記してください

    キャンセル

  • sonjfica

    2018/11/14 10:56

    mts10806様 失礼しました。質問を編集いたしました

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る