{"id":5091,"date":"2020-03-20T10:16:47","date_gmt":"2020-03-20T01:16:47","guid":{"rendered":"https:\/\/hack.gpl.jp\/?p=5091"},"modified":"2020-03-20T10:16:47","modified_gmt":"2020-03-20T01:16:47","slug":"post-5091","status":"publish","type":"post","link":"https:\/\/hack.gpl.jp\/2020\/03\/20\/post-5091.html","title":{"rendered":"\u9ad8\u901f\u5316\u305d\u306e\uff13\uff1a\u753b\u50cf\u5727\u7e2e\u3057\u3066\u307f\u305f\uff01\u6b21\u4e16\u4ee3\u753b\u50cf\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u300cWebP\uff08\u30a6\u30a7\u30c3\u30d4\u30fc\uff09\u300d\u3092\u4f7f\u3046"},"content":{"rendered":"

以前、スマホからのアクセスをもっと速くしたいなと思っていたのですが、高速化その３で手をつけることにしました！
まず、手をつける前の状態は以下です。<\/p>\n

\"E383a2e3838fe38299e382a4e383abe382b5e382a4e38388e381aee9809fe5baa6e38292e6af94e8bc83e38197e381bee38197e38287e38186\"<\/p>\n

はい、2.2秒かかっていたようです。レポートには、いろいろ書いてありますが画像の項目は以下のようにアドバイスされていました。<\/p>\n

\n

次世代フォーマットで画像を配信する
JPEG 2000、JPEG XR、WebP で画像をエンコードすると、読み込み時間が短くなり、モバ
イル通信のデータ量も少なくすることができます。フォールバック用に PNG 画像や JPEG 画
像も用意し、未対応ブラウザにはそちらを配信するようにしましょう。<\/p>\n<\/blockquote>\n

ということで、WebP に変換することことにしました。変換には方向性として２つあり、１つはクラウドサービスでWebPに変換してもらうのを利用する方法。もう１つは、自サーバの機能を使ってWebP に変換する方法です。後者は、PHPがimagemagic をサポートしていてそのフォーマットにWebP がある場合に有効です。<\/p>\n

\n

phpinfo.phpにアクセス　→ サーバー設定のレポートを見る。
「imagick」項目の “ImageMagick supported formats” という行に「webp」があればサポートしています。<\/p>\n<\/blockquote>\n

現在はまだテストサーバで mamp でやっていますので、これはサポートしていないことがわかりました。自分でサーバを作るときは対応させる予定ですが、今のところは外部クラウドのWEBサービスを使って高速化がどのくらい進むか確認してみようと思います。<\/p>\n

パッと思いつくのは、https:\/\/tinypng.com\/ のサービスです。<\/p>\n

\"TinyPNG<\/p>\n

これをWordPress（ClassicPressでも利用可）で利用するPlugin があるので使うことにします。<\/p>\n

\n

Compress JPEG & PNG images
https:\/\/ja.wordpress.org\/plugins\/tiny-compress-images\/<\/p>\n<\/blockquote>\n

Plugin を有効にして、API をゲット（月に500まで利用可）です。メディア設定の自動リサイズを無効にして、medium_large_size_h のパラメータも以下から0 にしておきます。<\/p>\n

\n

https:\/\/yourdomain\/wp-admin\/options.php<\/p>\n<\/blockquote>\n

設定は以下のようにしておきました。<\/p>\n

\"高速化<\/p>\n

どのくらい高速化が進んだか確認してみましょう！<\/p>\n

\"モバイルサイトの速度を比較しましょう\"<\/p>\n

結果、1.7秒です。0.5秒改善しましたね！<\/p>\n

あとついでなので、Autoptimize プラグンで JS と CSS の最適化をしておきました。これは有名なんで説明は省略。<\/p>\n

\n

Autoptimize
https:\/\/ja.wordpress.org\/plugins\/autoptimize\/<\/p>\n<\/blockquote>\n

結果、高速化その３では最終的に、1.2 秒にまで改善できました。<\/p>\n

\"モバイルサイトの速度を比較しましょう\"<\/p>\n

あと、0.3秒ほど頑張れば１秒以下になって「速い」の部類に入るかと！　あとはサーバ側でがんばりましょうか。<\/p>\n

・・・高速化その４　に続く<\/p>\n","protected":false},"excerpt":{"rendered":"

以前、スマホからのアクセス&#x309 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[21,83,32],"tags":[],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"JunkHack","author_link":"https:\/\/hack.gpl.jp\/author\/junkhack\/"},"uagb_comment_info":0,"uagb_excerpt":"以前、スマホか…","_links":{"self":[{"href":"https:\/\/hack.gpl.jp\/wp-json\/wp\/v2\/posts\/5091"}],"collection":[{"href":"https:\/\/hack.gpl.jp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hack.gpl.jp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hack.gpl.jp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hack.gpl.jp\/wp-json\/wp\/v2\/comments?post=5091"}],"version-history":[{"count":0,"href":"https:\/\/hack.gpl.jp\/wp-json\/wp\/v2\/posts\/5091\/revisions"}],"wp:attachment":[{"href":"https:\/\/hack.gpl.jp\/wp-json\/wp\/v2\/media?parent=5091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hack.gpl.jp\/wp-json\/wp\/v2\/categories?post=5091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hack.gpl.jp\/wp-json\/wp\/v2\/tags?post=5091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}