ホームページの余分なデータを削り表示速度を少しでも速くする方法
- Switch Staff
- Staff
こんにちは スイッチの技術担当、三宅です。
最近急に太りまして、実はここ１年で体重が10キロ増えました。
数年前までは痩せすぎて心配されていたほどですが、最近では初対面の人にも「ガタイいいですね」「ビーチフラッグでもしてそうな体型やな」と言われるまでになりました。
ビーチフラッグをしている人の平均的な体型がちょっとわからないですが、
何にせよガリガリなのはコンプレックスだったため、筋トレした甲斐がありました。
ただ、お腹が必要以上に出てしまったため、現在は逆にダイエットをしています。
余分な部分だけ削ることができれば。。
あっ、余分なところを削ると言えば！
ホームページの余分なデータを削り表示速度を少しでも速くする方法
ホームページの表示速度が遅いと、ユーザーが離脱する確率が高くなります。
有名な一説によりますと、２秒遅いと離脱率が50%増えると言われているほどです。
ここでいう表示速度とは、ユーザーがホームページにアクセスしてから操作可能になるまでの時間のことを指しています。
たまにありますよね、ローディング画面が長すぎるホームページ。。
大きな画像を使ったり、リッチな動きのあるホームページが最近のトレンドとなっており、
昔に比べ表示速度が遅くなってきているのは事実ですが、その中で少しでも表示速度を速めるためどのようなことができるでしょうか。
画像の最適化
基本中の基本ですが、画像データはやはりデータの大半を占めます。
写真素材はjpg、イラストデータはpngにし、データ量を最適に保つことが重要です。
また、画質が落ちない程度に圧縮することも非常に有効な手段となります。
僕はいつもTinyPngというサイトを使用させていただいてます。
画質がほとんど変わらず、大きいときは80%以上もサイズを圧縮してくれる素晴らしいサービスです
見出しやボタンの部分に、画像ではなくできるだけテキストを使うことでも、
容量をかなり抑えることができます。
データの読み込みの順番
データ量の多いjavascriptや、facebookのページプラグインを使用する場合、
それらの読み込みが終わるまでローディング画面を表示させていると、
かなり長い間待たされることになります。
読み込む順番が遅くても問題ないスクリプトについては、読み込みを後回しにするということも大事です。
|
1 2 3 |
$(window).load(function(){ // スクリプト }); |
例えば上記のように”$(window).load();”の中にスクリプトを書くことにより、
ページの全ての読み込みが終わったあとに実行させることが可能です。
head内の整理
特にWordpressで構成されているサイトの場合、ヘッダーをテンプレートで全ページ共通で使用するため、
そのページには必要ないタグが含まれることもあります。
|
1 2 3 4 5 6 7 |
<?php if(is_home()): //トップページ用のコード else: //下層ページ用のコード endif; ?> |
などで分岐させ、各ページごとにタグを使い分けることが理想です。
また、Wordpressの機能で、head内に不要なタグが自動的に生成されます。
その場合、functions.phpに下記のように記述し
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0); remove_action('wp_head', 'feed_links_extra',3,0); remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'index_rel_link'); remove_action('wp_head', 'parent_post_rel_link'); remove_action('wp_head', 'start_post_rel_link'); remove_action('wp_head', 'rel_canonical'); function disable_emoji() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); } add_action( 'init', 'disable_emoji' ); ?> |
ヘッド内のタグを整理してあげましょう。
（※制作環境により調整してください）
以上、他にもまだ方法はありますが、
最低限上記のことに気をつければだいぶ減量できると思います。
僕は糖質を控え、腹筋とスクワットを重点的に行っています。
それでは、また。