JetpackのCSSを機能別に取得でサイトが少しだけ早くなった

はじめに

ホームページを作る上で、いかに速く表示できるかでユーザーのアクセス数、ECサイトの売上に影響がある昨今です。

特に最近はGoogle先生が、ホームページの表示を速くしろー速くしろーとうるさく言っています。

SEOにも影響しているらしいです（ほんとか？

そんな訳で、当サイトも日々早くする工夫を続けていいます。

今回は、レンダリングブロックをしているJetpackのCSSを、必要な機能毎のCSSに分割して使用する方法をご紹介します。

 

導入方法

まず以下のサイトを参考にします。

Removing Jetpack CSS

 

 

// CSSを分割する
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

// 必要の無いCSSを削除する
function jeherve_remove_all_jp_css() {
  wp_deregister_style( 'AtD_style' ); // After the Deadline
  wp_deregister_style( 'jetpack_likes' ); // Likes
  wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
  wp_deregister_style( 'jetpack-carousel' ); // Carousel
  wp_deregister_style( 'grunion.css' ); // Grunion contact form
  wp_deregister_style( 'the-neverending-homepage' ); // Infinite Scroll
  wp_deregister_style( 'infinity-twentyten' ); // Infinite Scroll - Twentyten Theme
  wp_deregister_style( 'infinity-twentyeleven' ); // Infinite Scroll - Twentyeleven Theme
  wp_deregister_style( 'infinity-twentytwelve' ); // Infinite Scroll - Twentytwelve Theme
  wp_deregister_style( 'noticons' ); // Notes
  wp_deregister_style( 'post-by-email' ); // Post by Email
  wp_deregister_style( 'publicize' ); // Publicize
  wp_deregister_style( 'sharedaddy' ); // Sharedaddy
  wp_deregister_style( 'sharing' ); // Sharedaddy Sharing
  wp_deregister_style( 'stats_reports_css' ); // Stats
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
  wp_deregister_style( 'jetpack-slideshow' ); // Slideshows
  wp_deregister_style( 'presentations' ); // Presentation shortcode
  wp_deregister_style( 'jetpack-subscriptions' ); // Subscriptions
  wp_deregister_style( 'tiled-gallery' ); // Tiled Galleries
  wp_deregister_style( 'widget-conditions' ); // Widget Visibility
  wp_deregister_style( 'jetpack_display_posts_widget' ); // Display Posts Widget
  wp_deregister_style( 'gravatar-profile-widget' ); // Gravatar Widget
  wp_deregister_style( 'widget-grid-and-list' ); // Top Posts widget
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
}
add_action('wp_print_styles', 'jeherve_remove_all_jp_css' );

 

結果

当ブログでは、Jetpackの関連記事とソーシャルを利用しているので、それ以外のCSSを削除しました。

 

実装前

レンダリングブロック

実装前はjecpack.cssが表示されていますね。

スマホ

スマホは、遅いですね・・・なんとかせねば・・・

PC

PCは、今のままでもそこそこ早いですね。

 

実装後

レンダリングブロック

jetpack.cssの姿が消えました。

スマホ

微妙に速くなりました。

PC

び、微妙に速くなってます。

 

 

まとめ

JetpackのCSSを機能別に取得するでした。

当サイトですと、わずかですがサイト速度を上げることに成功しました。

もしサイト速度に悩みがありましたら、劇的な改善にはなりませんが、改善点の１つとして試してみてください。

 

今日はこの辺でー