前提・実現したいこと
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不明
あなたの回答
tips
プレビュー