WEBVTT 00:00:00.000 --> 00:00:08.400 はい、それでは今回はページ速度を改善する方法について解説を進めていきます。 この動画を視聴する目的とですね 00:00:08.400 --> 00:00:11.880 まず一つ目 ページ速度の 00:00:11.880 --> 00:00:18.760 遅い要因がわかります。 自分で判断ができるようになるということですね。 00:00:18.760 --> 00:00:25.760 これいくつかご紹介します。 あとはウェブ上のファイル形式の知識がつくようになります。 00:00:25.760 --> 00:00:36.320 意外と知らない人が多いので、この機会にこの知識を覚えておきましょう。 あとは画像を圧縮するツールですね。これを知ることができます。 00:00:36.320 --> 00:00:46.200 いくつかあるんですけど、ワールプレスのプラグインとかアプリとか ブラウドで使えるアプリとかそういったものをご紹介していきたいと思います。 00:00:46.200 --> 00:00:53.120 ではまずページ速度が遅くなる要因、それとデメリットについて解説を進めていきます。 00:00:53.120 --> 00:01:00.040 いろいろあるんですけど、このページ速度が遅くなってしまう要因ですね。 まず一つ目 00:01:00.040 --> 00:01:05.200 プラグインの入れすぎ問題ですね。 これっていうのは 00:01:05.200 --> 00:01:12.960 このプラグインところでインストール済みのプラグインが確認できます。 その中で 00:01:12.960 --> 00:01:20.000 これサンプル用の デモサイトなんであれなんですが、このように 00:01:20.040 --> 00:01:26.920 プラグインが多数入っている状態だと 影響しますよっていうところですね。 00:01:26.920 --> 00:01:36.280 これ解説でいろんなプラグインを導入しているのでその関連で多いんですけど、 実際のサイトはもっと最小限にしています。 00:01:36.280 --> 00:01:43.800 なのでプラグインは原則、入れすぎ、注意ということになります。 使ってないもの 00:01:43.800 --> 00:01:50.120 そういったものは積極的に削除しましょう。 削除する方法はとても簡単です。 00:01:50.120 --> 00:01:57.280 1回無効化してからこの削除をクリックしてください。 これで ok をクリックするっていう感じですね。 00:01:57.280 --> 00:02:03.320 とても簡単に削除できますので、 入れすぎ注意ですっていうところです。 00:02:03.320 --> 00:02:11.480 例えば おすすめ記事を読んでよくわからずに大量に導入するっていうのはあまり良くないです。 00:02:11.480 --> 00:02:21.640 よくわかってないならそもそも入れるべきではないです。 あとは個人的には SEO 系のプラグインとかバックアップ系のプラグイン 00:02:21.640 --> 00:02:29.360 セキュリティー系のプラグインですね。 そういったものがあれば特に他は不要です。 00:02:29.360 --> 00:02:37.360 もっと突っ込んだことを言えば ブロックエディターですね。最新のブロックエディターを覚えればこのクラシックエディターのプラグイン 00:02:37.360 --> 00:02:46.040 導入する必要はないのでこれを消せますよね。 この中にはないんですけど、アケスメットっていうプラグインも結構いろんな 00:02:46.040 --> 00:02:55.560 記事が紹介してるんですけど、コメント機能をオフにすれば不要なので いらないですよね。他にもいろいろあります。 00:02:55.560 --> 00:03:04.560 SSL 化はさすがにこういうプラグインを使った方がいいですけど、ショートコードも WordPress テーマにあるのであればいらないので消せますよね。 00:03:04.560 --> 00:03:12.480 といった感じで、 WordPress テーマが補ってくれているようなものっていうのはわざわざプラグインで入れる必要はないです。 00:03:12.480 --> 00:03:18.400 そういうものは削除してしまいましょう。 とはいえですね、 00:03:18.400 --> 00:03:25.920 プログラマーで長きに実装することが難しいものっていうものは入れといた方がいいので、そこら辺の選別は 00:03:25.960 --> 00:03:33.120 必要になってきますが、基本はですね 入れすぎっていうのはあまり良くないんですよっていうことを覚えておいてください。 00:03:33.120 --> 00:03:38.320 なんでかというと 速度が遅くなるからですね。 00:03:38.320 --> 00:03:49.560 それと同じような感じで使ってない WordPress テーマも削除しましょう。 例えばこれ外観のテーマですね。ここをクリックしてもらうと 00:03:49.560 --> 00:03:59.280 標準で入っているもの、今導入しているもの、人によっては過去に導入したものがこちらに表示されます。 00:03:59.280 --> 00:04:06.400 これも注意が必要で、この WordPress テーマですね、使ってないものがあったら削除しましょう。ここで削除できます。 00:04:06.400 --> 00:04:14.480 はい、といった感じで今既に設定してあるものですね、現在設定してあるもの以外にしとくっていうのが 00:04:14.480 --> 00:04:20.000 結構理想的だったりします。 それとそもそもの話ですね。 00:04:20.000 --> 00:04:30.120 契約しているサーバー会社も大きく影響します。 お勧めはですね、いろいろある中で X サーバーですね。これがお勧めです。 00:04:30.120 --> 00:04:37.400 いろいろ X サーバーを推す理由はあるんですけど、初心者向けだとか情報が豊富だとか 00:04:37.400 --> 00:04:46.120 ただこのページ速度の観点では、やっぱり安定しているサーバーだからっていうこともあります。 参考記事として 00:04:46.120 --> 00:04:52.360 こういうデータもあります。 日本で最も利用者の多い 00:04:52.360 --> 00:05:01.920 サーバー会社のデータですね。 段凸になっています。ロリポップもいいんですけど、やっぱり X サーバーが 00:05:01.920 --> 00:05:08.560 段凸ですね。これからもしかしたら違うサーバー 出てくるかもしれませんが 00:05:08.560 --> 00:05:15.800 やっぱり歴史的に長い X サーバーの方が今のところはいいですねっていう話になってきます。 00:05:15.800 --> 00:05:22.200 X サーバーというと アフィリエーターとかですね 00:05:22.200 --> 00:05:29.880 そういう人が使っているようなイメージだったりすると思うんですが これっていうのはもっと 00:05:29.880 --> 00:05:36.080 ウェブに関わる人全てです。なのでスマウロビネスを やっている方も同様ですね。 00:05:36.080 --> 00:05:42.000 サーバーの料金 00:05:42.000 --> 00:05:48.480 安めのとこあるんですけど、ここはケチらずですね。 X サーバーにしてください。 00:05:48.480 --> 00:05:53.000 たまにケチる人がいるので X サーバーにするっていうのを 00:05:53.000 --> 00:05:59.800 おすすめです。 後からですね、ドメインの移動とかサイトの移動っていう話になってくる 00:06:00.800 --> 00:06:06.160 知識がないと自分ではできなかったりしますので 誰かに 00:06:06.160 --> 00:06:13.320 お願いしてもらうっていう話になってくるかもしれないので やっぱり最初のこのサーバー選びっていうのは後々ですね 00:06:13.320 --> 00:06:18.080 効いてきますので X サーバーにしましょう。 では次ですね 00:06:18.080 --> 00:06:23.400 キャッシュが影響しているっていうものなんですけど これは 00:06:23.400 --> 00:06:30.280 キャッシュ系のプラグインですね。 こういうものを導入しましょう。キャッシュというとブラウザとサイトとか 00:06:30.280 --> 00:06:39.960 いろいろあるんですけど、サイトの方ですね。そういう システムの方ですね。システムの方のキャッシュを処理してくれるプラグインを導入しましょう。 00:06:39.960 --> 00:06:47.240 有名どころだとですね、いろいろあるんですが WP スーパーキャッシュっていうものがあります。 00:06:47.240 --> 00:06:53.000 もしかしたらその都度変わってくるかもしれませんので 2020 年 00:06:53.000 --> 00:07:04.520 キャッシュ系ワードプレスプラグインとかそういうので検索してください。 このプラグインの使い方はこの名前使い方で検索していただければ 00:07:04.520 --> 00:07:09.920 簡単にできます。例えば WP スーパーキャッシュ 使い方 00:07:09.920 --> 00:07:13.680 そのように検索してもらえば 00:07:13.680 --> 00:07:22.320 わかります。設定方法もわかります。 今回メインとして扱いたいのがここなんですけど 00:07:22.440 --> 00:07:32.560 メディアにアップロードしている画像ですね。 これのファイル形式だったりファイルのサイズですね。 00:07:32.560 --> 00:07:43.530 キロバイトとかそういうサイズです。これが影響しているということもあります。 今回はここをメインで解説していきます。 00:07:43.530 --> 00:07:48.930 いろいろある中でということですね。 他のものはですね 00:07:48.930 --> 00:07:56.250 その都度修正していくって感じになってきますので こういうプラグインとかワールドウェステーマですねその都度 00:07:56.250 --> 00:08:05.250 気づいた今の段階でやってもらうっていう形になります。 サーバーもですねこれもしかしたら今現在違うサーバーを利用してるんです 00:08:05.250 --> 00:08:08.850 っていう場合もですね 結構 00:08:08.850 --> 00:08:17.650 引っ越し作業を解説するとかなり専門的になってくるので その場合はここならとかランサーズとか 00:08:17.650 --> 00:08:24.930 そういうものでお願いして部分的にお願いしてみてください。外注ですね。 キャッシュ系も 00:08:24.930 --> 00:08:30.890 これも重要なんですけどそれよりも 00:08:30.890 --> 00:08:41.250 この画像の方がすごく重要なので重要かつ すぐに実践できることなので今回はメインをここで解説していきたいと思います。 00:08:41.250 --> 00:08:47.490 キャッシュに関してはこれ検索すれば出てくることなので そのようにしてください。 00:08:47.490 --> 00:08:55.530 あとペーリ速度が遅いデメリットですね。 これはサイトからの離脱率が上がります。 00:08:55.530 --> 00:09:05.010 アップしてきてページがなかなか開かなかったらすぐ離脱してしまうっていうのは 簡単に想像できますね。そういうものです。 00:09:05.010 --> 00:09:14.250 簡単に離脱してしまうっていうことはSEO的にも良くないです。 ユーザーがすぐに離脱しちゃうようなサイトっていうものを 00:09:14.250 --> 00:09:23.690 Googleがですね、容易表示にさせたいとは思わないというのも簡単に想像できると思います。 なのでSEO的にも良くないです。 00:09:23.690 --> 00:09:31.850 むしろ遅くていいことなんて何一つないです。 ユーザーは遅くてイライラしますし 00:09:31.890 --> 00:09:40.610 見る気が失せてしまうということですね。 そんなページをSEOで評価されるっていうことも 00:09:40.610 --> 00:09:44.730 難しいですし。 なので 00:09:44.730 --> 00:09:50.650 遅くていいことなんて何一つないです。 それくらい重要なことですね。 00:09:50.650 --> 00:09:58.410 今回はこの画像ファイルの種類とか役割を覚えた上で圧縮する方法ですね。 00:09:58.410 --> 00:10:06.010 ツールを使って画像圧縮する方法、これを解説していきたいとおもいます。 では次の解説を進めていきます。 00:10:06.010 --> 00:10:14.850 次は画像ファイルの種類と役割を覚えましょう。 これに関してはちょっとザーク的な内容になってくるんですが 00:10:14.850 --> 00:10:20.850 すごく重要なとこなので覚えておきましょう。 種類というのはこの3つですね。 00:10:20.850 --> 00:10:31.250 Ping形式、JPEG形式、GIF形式ですね。 GIFに関してはちょっと特殊なものでして音がない動画ですね。 00:10:31.250 --> 00:10:37.570 そういうものになります。 結構ウェブ系に偏ってきがちなので 00:10:37.570 --> 00:10:44.930 この2つですね、に絞って覚えておいてください。 一応こういうのもありますよ程度のことですね。 00:10:44.930 --> 00:10:52.410 Ping形式は この3つの中でも一番ですねファイルサイズが大きいので 00:10:52.410 --> 00:11:00.770 原則使用しないようにしてください。 背景を透明化したロゴ画像くらいですね、Pingを使うの。 00:11:00.770 --> 00:11:12.330 例えばこういう背景色のサイトがあったとして、そのロゴ画像の背景が白だった場合 違和感がありますね。その周りだけ白っていう四角形、多くの場合四角形なんですけど画像は。 00:11:12.330 --> 00:11:19.330 そうなってしまうと違和感があるのでロゴ画像は 背景を透明化しましょう。 00:11:19.330 --> 00:11:27.370 それ以外ですね、それ以外の 画像の場合はJPEGに変換するようにしましょう。 00:11:27.370 --> 00:11:35.690 画像はもうJPEG一択だとおいておいてください。 仮にですね使用したい画像がPing形式だった場合 00:11:35.690 --> 00:11:41.850 このJPEGに変換するようにしましょう。 使用するのはロゴ画像ぐらいですね。 00:11:41.850 --> 00:11:48.170 例えばこういう実際に見た方がわかりやすいです。 これがJPEG 00:11:48.170 --> 00:11:53.930 こっちがPing ここのファイルサイズを見てほしいんですけど 00:11:53.930 --> 00:11:58.130 はい全然違いますね。 105KB 00:11:58.130 --> 00:12:03.730 842KB サイズが全く違います。 00:12:03.730 --> 00:12:09.570 なので JPEGの方にしましょう。写真ストレージであれば 00:12:09.570 --> 00:12:15.930 JPEGですね。 もしPing形式だった場合ですね、使用したいヘッダー画像とかが 00:12:15.930 --> 00:12:21.490 そういうものだった場合は JPEGにしましょう。 00:12:21.490 --> 00:12:28.690 ページ内でこのPing形式のものが1個ぐらい 1画像ぐらいだったら問題ないとは思うんですけど 00:12:28.690 --> 00:12:35.970 ただですね一応影響するものでサイズも結構違がったりするので JPEGの方が望ましいです。 00:12:36.610 --> 00:12:46.930 特にブログ記事に配置するようなイメージ画像なんかは特にそうです。 変換する方ですね。PingからJPEGに変換する方法 00:12:46.930 --> 00:12:55.090 私のPCはMacなのでこれを実際にお見せしたいと思うんですが プレビューでRubyを使用して変換することが可能です。 00:12:55.090 --> 00:13:00.050 どういうことかというと これをプレビューで開きます。 00:13:00.050 --> 00:13:07.330 画面から切れてしまっていると思うんですがこのメニューバーからファイルですね 書き出す 00:13:07.330 --> 00:13:13.050 ここでフォーマットですね。フォーマットを JPEGにします。 00:13:13.050 --> 00:13:19.650 これであれば高品質でも ファイルサイズが全然違うので 00:13:19.650 --> 00:13:25.500 ここは違いますね。 いっぱい上げても 00:13:25.500 --> 00:13:29.100 全然影響がないです。 このように 00:13:29.100 --> 00:13:33.300 JPEGにしていただいた方が無難ですね。 00:13:33.300 --> 00:13:39.620 変換がフォーマットで変換できますのでそれを覚えておいてください。 00:13:39.620 --> 00:13:46.580 Windowsの場合ですね ペイントソフトっていうものがありますのでそれを使用して変換してください。やり方は 00:13:46.580 --> 00:13:50.860 おおよそ同じですね。 とても簡単な操作で 00:13:50.860 --> 00:13:56.380 Windowsの方でもできます。標準で入っているソフトになります。 00:13:56.380 --> 00:14:02.940 この2つでできることなんですけど 一応ですねブラウザの 00:14:02.940 --> 00:14:09.340 アプリですね。ブラウザで使用できるものもあるのでそれを使用して変換することもできます。 00:14:09.340 --> 00:14:16.500 それがこれですね。 ping JPEG変換。これで検索をしていただけると 00:14:16.500 --> 00:14:20.700 いくつか アプリが使用できます。 00:14:20.700 --> 00:14:26.940 これ無料でしかもブラウザで使えるっていうものになります。 やり方はとても簡単です。 00:14:26.940 --> 00:14:30.380 このアップロードっていうところもしくは 00:14:30.380 --> 00:14:35.900 ドラッグ&ドロップでこのpingのものを移動させます。 00:14:35.900 --> 00:14:42.460 するとこのように変換中と出てきますので、変換が終わったらダウンロードクリックですね。 00:14:42.460 --> 00:14:48.780 はいこれだけで簡単に変換ができます。 実際に見てみると 00:14:48.780 --> 00:14:54.060 変換されているのがわかりますね。 こっちが元の画像、こっちが 00:14:54.060 --> 00:14:59.780 変換したものですね。 ファイルサイズも当たり前ですが下がっています。 00:14:59.780 --> 00:15:05.660 こういうツールもあるので覚えておきましょう。 手段が分かれば簡単にできることですね。 00:15:05.660 --> 00:15:11.140 これをざっくりでいいのでご説明できるようになっておくといいですね。 00:15:11.140 --> 00:15:15.620 なんでJPEGなのか、pingはどういう時に使うのかって言いますね。 00:15:15.620 --> 00:15:21.300 例えば知り合いでwebに詳しくない人に説明できるくらいになっておくといいですね。 00:15:21.300 --> 00:15:28.540 この知識はずっとwebをやっていく上で使うものなので覚えておきましょう。 00:15:28.540 --> 00:15:37.580 では次の解説を進めていきます。 次はツールを使って画像を圧縮する方法を解説していきます。 00:15:37.580 --> 00:15:43.300 画像を圧縮するとファイルのサイズを小さくすることが可能です。 00:15:43.300 --> 00:15:52.620 前提としてJPEGを使っていただくというのがあるんですけど、その上でさらにサイズを小さくすることができます。 00:15:52.620 --> 00:15:59.340 見た目もですねそんなに荒くなったりとかせずに品質はダンプされて小さくすることができる。 00:15:59.340 --> 00:16:03.940 というのがこの圧縮になります。 するとですね 00:16:03.940 --> 00:16:09.060 ページ速度の影響も限りなく少なくすることができます。 00:16:09.060 --> 00:16:14.780 ウェブページに画像配置する場合は必ず実践するようにしておきましょう。 00:16:14.780 --> 00:16:21.780 まずちょっと手間かもしれませんが プラグインとかアプリを使えばとても簡単にできます。 00:16:21.780 --> 00:16:28.500 まずプラグインから解説を進めていきます。 いろいろあるんですけど有名どころはこちらですね。 00:16:28.500 --> 00:16:32.260 EWW Image Optimizerですね。 00:16:32.260 --> 00:16:39.700 あとはコンパスJPEG&PING Images。 00:16:39.700 --> 00:16:46.300 これ調べたら読み方わからなかったんですけど、 Imagifyっていうものですね。 00:16:46.300 --> 00:16:53.580 おそらく有名どころも定番としてはEWW Optimizerですね。 00:16:53.580 --> 00:17:00.260 これはなくなるっていうことはおそらくないと思うんで、迷ったらこれで ok ですね。 00:17:00.500 --> 00:17:07.020 このEWW Image Optimizerが使えなくなった時のためにですね。 00:17:07.020 --> 00:17:10.820 念のために覚えておくぐらいで ok です。 00:17:10.820 --> 00:17:18.340 こういうの複数あるので そもそも検索すれば間違いないですね。 00:17:18.340 --> 00:17:23.420 画像圧縮、ワードプレス、プラグインとか。 00:17:23.420 --> 00:17:27.820 そんな手間なことではないので検索するっていうのも覚えておきましょう。 00:17:28.220 --> 00:17:33.340 一応流行りしたりとかあるかもしれませんので覚えておきましょう。 00:17:33.340 --> 00:17:38.060 今回はこれをメインとしてやっていきたいと思います。 00:17:38.060 --> 00:17:42.940 結構歴史も古いので EWW Image Optimizerでやっていきます。 00:17:42.940 --> 00:17:47.820 まずは設定方を確認していきます。 00:17:47.820 --> 00:17:53.300 例えばこういう検索方法もあるんですが、 00:17:53.340 --> 00:18:01.020 一応シンプルにプラグイン名で検索していただければ 情報にたどり着くことができます。 00:18:01.020 --> 00:18:11.660 このツールのところから期間指定ですね。1年以内にしていただければ比較的ですね新しい解説記事にたどり着くことができます。 00:18:11.660 --> 00:18:13.380 例えばこういうものですね。 00:18:13.380 --> 00:18:21.740 この解説記事は結構多数あるので 情報に困らない状態になってきます。 00:18:21.740 --> 00:18:27.300 例えばこの記事だったら 設定法はしっかり載っていますね。 00:18:27.300 --> 00:18:30.660 こういう記事を参考にするという形になりますね。 00:18:30.660 --> 00:18:32.980 一応僕の方でもお伝えします。 00:18:32.980 --> 00:18:43.300 僕もその都度、この設定内容を完璧に覚えているわけではないので 設定するときその都度検索しています。 00:18:43.300 --> 00:18:49.940 では導入のところからやっていきたいと思うんですが プラグイン新規追加をクリックしてください。 00:18:49.940 --> 00:18:52.580 ここでですね検索するわけですね。 00:18:52.580 --> 00:18:56.100 EWW Image Optimizerですね。 00:18:56.100 --> 00:18:58.700 これだけでも出てきます。 00:18:58.700 --> 00:19:02.060 入力するのが手間の場合はこれだけで ok です。 00:19:02.060 --> 00:19:07.820 すでに有効化が導入してあるので こうなっているんですが 00:19:07.820 --> 00:19:12.380 今すぐインストールをクリックしてください。これからの方は今すぐインストール。 00:19:12.380 --> 00:19:19.180 次の画面で有効化というボタンというかリンクが出てきますので ボタンかリンクですね。 00:19:19.180 --> 00:19:28.540 それから多分ここですね。ここに表示されますので 有効化というものに切り替わったらそれをクリックしてください。 00:19:28.540 --> 00:19:39.100 有効化すると 設定をしてほしいのでこの設定からEWW Image Optimizerですねこれをクリックしてください。 00:19:39.100 --> 00:19:43.180 記事を参照しつつ設定をしていきたいとおもいます。 00:19:43.180 --> 00:19:48.180 これその都度画面が変わったりとか微妙に項目が変わったりするんですけど 00:19:48.180 --> 00:19:54.900 似たような表記になっていると思うのでそちらを確認してください。 これは一緒ですね。ほぼ一緒です。 00:19:54.900 --> 00:20:00.340 メタデータを削除。チェックが入っているので ok ですね。 00:20:00.340 --> 00:20:07.780 リサイズはですね これは設定しなくてもいいような感じするので飛ばしていきます。 00:20:07.780 --> 00:20:15.180 次ですね。こちら。 こちらにチェックを入れるという形になりますね。 00:20:16.180 --> 00:20:21.500 あとは 今回なかったんですが 00:20:21.500 --> 00:20:28.580 ちょっと違う記事も参照します。 一応ですねこの記事を参照する場合は複数の記事を参照してください。 00:20:28.580 --> 00:20:34.380 ざっくりでいいのでこの文字もですね しっかり読んでいただくと 00:20:34.380 --> 00:20:39.180 いいかなっていうところでこの変換のところでここですね これですね 00:20:39.180 --> 00:20:45.730 チェックが入っている というのを確認してください。 00:20:45.730 --> 00:20:53.530 まとめるとメタ情報の削除、あと変換ですね。 この変換リンクを非表示に、ここの文ですね 00:20:53.530 --> 00:21:00.810 ここにチェックが入っているのを確認してください。 ここらへんはですねちょっと専門的な内容だったりとかよくわからなかったりするので 00:21:00.810 --> 00:21:07.490 記事の通りにやっていただければと思います。 ここを完璧に理解するっていうのはちょっと無理があるので 00:21:07.490 --> 00:21:14.530 理解しなくても ok ですね。 正直ここは必要ないですね。多分この記事も 00:21:14.530 --> 00:21:20.330 そのように解説していないので、ここはなくて ok です。 00:21:20.330 --> 00:21:28.130 変更保存をクリックですね。 基本のメタデータの削除にチェックですね。 00:21:28.130 --> 00:21:35.830 あとは変換の変換リンクの非表示、こちらにチェックで保存ですね。 これをやっておいてください。 00:21:35.830 --> 00:21:42.530 あとはですね、このメディアですね。メディアの一括最適化ですね。 00:21:42.610 --> 00:21:49.450 こちらで最適化されてない画像をスキャンするっていうものがあると思うんですけど、こちらをクリックしてください。 00:21:49.450 --> 00:21:57.890 で最適化するための画像がありませんって出てくるんですが、もしですね最適化してないものがある場合はこちらに表示されます。 00:21:57.890 --> 00:22:05.450 あとはそれを最適化するっていうボタンに切り替わりますので、それをクリックしてください。 00:22:05.450 --> 00:22:13.490 こちらももしかしたら記事になると思います。これですね。 このボタンをクリックすると 00:22:13.490 --> 00:22:24.090 最適化できる画像がありましたって出てきますので、これをクリックしてください。 427.の画像を最適化ですね。それで ok ですね。 00:22:24.090 --> 00:22:32.010 それをクリックすれば このプラグインの方で圧縮してくれるということになりますので 00:22:32.010 --> 00:22:38.770 もしですね、途中から導入した場合はこれ必ずやっておいてください。 はいではせっかくなんで先ほど 00:22:38.770 --> 00:22:44.290 ブログ記事上で解説したものを実際にやってみたいと思います。 00:22:44.290 --> 00:22:53.890 一旦最適化する画像を見つけたいので 無効化します。この操作は特に覚えなくて ok です。 00:22:53.890 --> 00:23:06.340 これは新規の画像を入れます。 この状態で 00:23:06.340 --> 00:23:15.140 有効化します。 するとですね、最適化の画像を検出してくると思いますのでそれを確認します。 00:23:15.140 --> 00:23:20.990 ここをクリックですね。 ここですね。 00:23:20.990 --> 00:23:29.590 最適化できる画像がありますということでこちらをクリックしてください。 これ完了ですね。 00:23:29.590 --> 00:23:37.830 画像数によってはもっと時間がかかりますので、いきなり待ってください。 実際にやってみてください。 00:23:37.830 --> 00:23:45.110 これからのものについては勝手に自動で最適化してくれます。 というものですね。 00:23:45.110 --> 00:23:52.030 使い方はとても簡単です。あと設定法も 簡単なんですが一応念のためですね 00:23:52.030 --> 00:23:58.470 調べていただければと思います。 もしかしたら画面が大きく変わるっていうことも今後あり得るので、その際に 00:23:58.470 --> 00:24:01.830 こういう調べ方もありますということで 00:24:01.830 --> 00:24:07.230 設定2020ですね。 プラグイン名設定2020 00:24:07.230 --> 00:24:12.750 最近のブログ記事の傾向としまして、こういうプラグイン系の記事ですね。 00:24:12.750 --> 00:24:23.590 2020年版とかっていうふうに記載されていますので 結構変わるからですね。その都度変わるのでこういうふうにタイトルをつけている方が多いです。 00:24:23.590 --> 00:24:31.550 それを確認してみてください。 すると同じ画面だったりするので比較的ですね。 00:24:31.550 --> 00:24:35.750 そうすると設定しやすいと思います。 00:24:36.550 --> 00:24:42.190 ということで このイメージオフティマイザーですね。EWWイメージオフティマイザー 00:24:42.190 --> 00:24:51.910 については以上です。他のやつはですね、正直 使えなくなっていた時のためというので補足です。余談です。 00:24:51.910 --> 00:25:02.190 簡単なのでぜひやってみてください。次は アプリの方を解説していきます。これはダウンロードするタイプのアプリになります。 00:25:02.190 --> 00:25:08.750 私のPCはMacなのでMacから解説を進めていきます。 こういうものがありますね。 00:25:08.750 --> 00:25:16.110 jpeg miniですね。ライトいらないですね。 イメージオフティマイザー。PingUですね。 00:25:16.110 --> 00:25:25.230 これPing専用なんですが一応ロゴ画像なので使うのでPing画像も全く使わないというわけではないので一応覚えておいてください。 00:25:25.990 --> 00:25:33.230 これはですね、jpeg miniで解説を進めていきたいと思います。 この背景に映っているサイトが 00:25:33.230 --> 00:25:36.790 そうですね、公式のサイトになります。 00:25:36.790 --> 00:25:42.990 これで、このget the trialをクリックしてください。 00:25:42.990 --> 00:25:52.550 するとアプリがダウンロードされます。このアプリのインストーラーですね。 インストーラーがダウンロードできましたら 00:25:52.550 --> 00:26:00.350 これをクリックしてください。 そうしましたらこれを移動させるという作業をしてください。 00:26:00.350 --> 00:26:05.870 僕の場合はもうすでに入っているのでこの作業は割愛します。 00:26:05.870 --> 00:26:13.430 あとはそのドラッグ&ドロップですね。先ほどの移動作業が終わったらこのように共有されますので 00:26:13.430 --> 00:26:19.550 これがjpeg miniになります。これを起動させてください。 00:26:19.550 --> 00:26:28.390 そしたらこちらをクリックですね。 次の画面で名前とアドレスを入力するような画面が出てくるかもしれません。 00:26:28.390 --> 00:26:37.030 出てきます。そしたらそれに従ってください。すると この画面が出てきます。この画面が出てきたらもうやり方はとても簡単です。 00:26:37.030 --> 00:26:43.550 ここに圧縮したい画像をドラッグ&ドロップするだけですね。 ここに例えば 00:26:43.550 --> 00:26:50.070 この画像ですね。今94KB これをドラッグ&ドロップします。 00:26:50.070 --> 00:27:00.990 コンティニューをクリック。するとこのようにファイルサイズが下がります。 先ほどのものよりちょっと下がりましたね。 00:27:00.990 --> 00:27:03.590 69KB 00:27:03.590 --> 00:27:12.070 これで かなり圧縮されますので覚えておいてください。圧縮後は視点ともサイズが下がっていますので 00:27:12.110 --> 00:27:21.150 特に再度その圧縮した画像をダウンロードするという作業は発生しません。 なのでとても便利です。やり方簡単なのでぜひ 00:27:21.150 --> 00:27:25.190 Mac の方は使ってみてください。 例えばこの画像もですね。 00:27:25.190 --> 00:27:32.670 移動させるだけで、このようにかなり下がりましたね。 こういうツールを使ってですね 00:27:32.670 --> 00:27:41.950 やってみてください。圧縮したら 圧縮後にですねワールドプレスのメディアの方にアップするっていう形になります。 00:27:41.950 --> 00:27:52.670 一応念のため、メディアのアップロード作業はこちらからできます。 新規追加ですね。これもですねファイルをドロップしてアップすることができます。 00:27:52.670 --> 00:27:57.510 選択していただいても ok ですね。 で、ガイドのページで配置する。 00:27:57.510 --> 00:28:08.190 そういう使い方になります。 というのがこのアプリの使い方ですね。他のものもとても簡単に利用できると思いますので 00:28:08.230 --> 00:28:15.750 そのようにやってみてください。使い方もほぼ同じだと思います。 Windows の方はこういうアプリが 00:28:15.750 --> 00:28:23.030 ありますので、名前だけでも置いておいてください。 Windows の方は、もしくは 00:28:23.030 --> 00:28:32.870 アプリ以外でも、ダウンロード型のアプリ以外でもブラウザのアプリがあります。 これもすごく簡単にできますので 00:28:32.870 --> 00:28:37.950 一応これもご紹介します。 これでもいいぐらいですね。 00:28:37.950 --> 00:28:47.990 アプリがいろいろ圧迫してしまうので、多少なりともこちらの方が良かったりもします。 00:28:48.470 --> 00:28:55.310 こちらなんですが、 jpeg 圧縮ですね。ここにこれも同じです。 00:28:55.310 --> 00:29:04.390 ドラッグ&ドロップで移動させるだけですね。 するとまた変換してくれますので、変換したらダウンロードをクリックですね。 00:29:04.390 --> 00:29:11.550 このようにやってください。これもやり方はとても簡単です。 他のツールも同じように使えます。例えばこれですね。 00:29:11.550 --> 00:29:19.870 I love image なんですが、これも画像の圧縮ができます。 その他のサイズ変更とかリサイズとかそういうのもできます。 00:29:19.870 --> 00:29:25.950 あとこれですね。これも同じような感じです。 といった感じで 00:29:25.950 --> 00:29:33.510 似たようなツールがありますので、これも検索すれば出てきます。 その都度ですね、これも無料で使えるものでずっと 00:29:33.510 --> 00:29:41.190 永遠に使えるとは限りません。 なのでその都度今回ご紹介したもの以外にもありますし、 00:29:41.190 --> 00:29:53.670 同じようなツールが出てくるかもしれませんので、その都度検索をかけてください。 一応そういうものがあるっていう存在だけでも知っておくと検索ができると思います。 00:29:53.670 --> 00:30:02.270 Windows の方はこのブラウザーアプリでもいいですね。 あんまり個人情報的なものをワードプレイスのサイトに 00:30:02.670 --> 00:30:10.030 アップロードするっていうことは考えられにくいので、 なのでこちらでも大丈夫です。 00:30:10.030 --> 00:30:20.990 その他画像を圧縮で検索すれば類似するアプリというのが多数あります。 全然今回ご紹介したものは検索すればたどり着けるような情報ばかりですので、 00:30:20.990 --> 00:30:26.270 そんなにですね高度なものではないです。 といった感じで 00:30:26.310 --> 00:30:33.270 こういうツールを使ってですね画像を圧縮してからワードプレイスの方にアップロードしましょう という話になります。 00:30:33.270 --> 00:30:40.190 するとですね ページ速度の影響を限りなくですけど少なくすることができます。 00:30:40.190 --> 00:30:49.990 簡単ですので手間ですが実践してみてください。 では最後にですねページ速度の速度を計測するときの注意点 00:30:49.990 --> 00:30:59.590 と仕方を解説します。仕方はシンプルにその該当のページにアクセスしていただいて 自分で数えていただくっていうものがあります。 00:30:59.590 --> 00:31:07.270 その際に注意点としまして クリアキャッシュを使ってから測定するようにしてください。 00:31:07.270 --> 00:31:14.750 これはブラウザの方のキャッシュですね。 これをクリア、消去してくれるという拡張機能になります。 00:31:14.750 --> 00:31:19.710 使い方はとても簡単で 導入したらですね 00:31:19.830 --> 00:31:26.710 こういうマークが出てきますのでアイコンが出てきますのでそちらをクリックする。 クリックしたら 00:31:26.710 --> 00:31:32.870 ちょっと光ります。 その状態で画面を更新してくださいという 00:31:32.870 --> 00:31:41.550 簡単な使い方になります。 このクリア、キャッシュをクリアにしていただいた後に測定するようにしてください。 00:31:41.550 --> 00:31:46.990 キャッシュっていうのはその 一時的にですけど 00:31:46.990 --> 00:31:54.750 ページの画面を保存してくれるような機能です。 それをやると多少ですけどページ速度が上がります。 00:31:54.750 --> 00:32:01.430 なので1回アクセスするとその2回目以降はちょっと早くなるっていう そういう機能なんですけど 00:32:01.430 --> 00:32:11.750 ほとんどの方が初めてそのページにアクセスしてくるっていうことを想定されるので 正確なものをこれを使って測ってください。 00:32:11.790 --> 00:32:18.710 他にもですねこういうGoogleの サービスでページスピード 00:32:18.710 --> 00:32:25.310 インサイトっていうものがあります。 これはGoogleページスピードで検索していただければ出てきます。 00:32:25.310 --> 00:32:32.470 使い方は簡単で該当のウェブページのURLをこちらに貼り付けて分析をクリックするだけです。 00:32:32.470 --> 00:32:38.670 するとこのように出てきます。 数字が出てきて点数みたいなものですね。 00:32:38.750 --> 00:32:42.670 この点数は こういう 00:32:42.670 --> 00:32:48.670 LINEにいますよっていうものですね。 色で簡単に分かると思うんですけど 00:32:48.670 --> 00:32:54.350 このぐらいだったらちょっといいですねって感じで このぐらいだったらまあまあですね。 00:32:54.350 --> 00:33:01.070 このぐらいはちょっと危険ですねっていう形になりますね。 これデモサイトでやったんですが 00:33:01.070 --> 00:33:08.630 やっぱりプラグインがどうしても入れすぎているので 解説の関係なんですけど 00:33:08.630 --> 00:33:15.390 こういう数字になっています。 これも余談なんですけどもし仮にですね 00:33:15.390 --> 00:33:22.510 仮にこれをやっとけばほぼほぼ極端に遅いっていうことはないと思うんですが 00:33:22.510 --> 00:33:28.150 こういう対策をやっているのにも関わらず ちょっと遅いなっていう場合はですね 00:33:28.150 --> 00:33:37.110 それはちょっと素人がどうにかできる領域ではないので 誰かにお願いするとかになってきます。 00:33:37.110 --> 00:33:42.830 コードとかそのデータベースって言われるものとかそういう話になってくるので 00:33:42.830 --> 00:33:48.790 これ以上はですねちょっと導入もできないので これ最低限のものだと思っていてください。 00:33:48.790 --> 00:33:54.530 極端に遅くなければいいので 00:33:54.530 --> 00:34:01.410 そのようにこれも参考だと思ってやってみてください。 00:34:01.410 --> 00:34:09.890 ただですねこれをやっとけばそんな極端に遅くなるということは ほぼないという形になりますね。 00:34:10.050 --> 00:34:13.890 最後にまとめですね。 00:34:13.890 --> 00:34:17.050 このページ速度を改善する方法 00:34:17.050 --> 00:34:21.250 要因とデメリットとしましてはこういうものがありましたね。 00:34:21.250 --> 00:34:26.530 プラグイン入れすぎ、テーマを使っていないのも関わらず入れている場合は削除。 00:34:26.530 --> 00:34:29.210 過去に使ったものはもちろん削除。 00:34:29.210 --> 00:34:31.810 サーバー会社、これ x サーバーにしてください。 00:34:31.810 --> 00:34:36.010 もし仮に今現在違うサーバーを利用している場合はですね 00:34:36.010 --> 00:34:42.170 引っ越しするっていうのも一つの手なんですけど、難しい場合は 00:34:42.170 --> 00:34:46.770 現在のサーバーでこういう他の工夫を行ってください。 00:34:46.770 --> 00:34:51.610 もしどうしてもしたいという場合はですね、部分的にここならとかで 00:34:51.610 --> 00:34:55.260 外注するという形になりますね。 00:34:55.260 --> 00:34:58.740 あとキャッシュが影響ですね。これはサイト側のものですね。 00:34:58.740 --> 00:35:01.380 ワードプレス側のシステム側のキャッシュ。 00:35:01.380 --> 00:35:04.220 こういうプラグインで処理できます。 00:35:04.220 --> 00:35:07.180 今回メインとして開設した画像の圧縮ですね。 00:35:07.180 --> 00:35:12.660 あとファイルサイズに気をつけていただくっていうものですね。 00:35:12.660 --> 00:35:14.660 デメリットとしては 00:35:14.660 --> 00:35:18.260 サイトからの離脱が上がってしまう。SEO的に良くない。 00:35:18.260 --> 00:35:19.940 というものですね。 00:35:19.940 --> 00:35:21.700 ファイルの種類は 00:35:21.700 --> 00:35:26.380 この3つになります。主にこの2つだけでも 00:35:26.380 --> 00:35:31.020 気をつけていただければいいっていうものでPingとJPEGですね。 00:35:31.020 --> 00:35:34.500 Pingは主に背景を透明化したようなロゴ。 00:35:34.500 --> 00:35:38.180 JPEGが画像素材ということになります。 00:35:38.180 --> 00:35:43.180 もし使用したい場合、画像がPingになった場合は変換してください。 00:35:43.180 --> 00:35:49.180 あとはツールを使って画像を圧縮してからワードプレスにアップしてください。 00:35:49.180 --> 00:35:54.180 プラグインとアプリがありましたねということですね。 00:35:54.180 --> 00:35:57.380 ということで今回のこの内容ですね。 00:35:57.380 --> 00:35:59.900 に関しては以上になります。