はい改めまして皆さんおはようございます今日のオンラインマークショップへようこそ今日はキャッシュについてしろワードプレイスサイトのキャッシュ設定ちょっとテクニカルな内容なんですけれども多分ワードプレイスサイトを運営している中でキャッシュという単語が出てくるので一旦改めてキャッシュは何なのか仕組みを理解してキャッシュ設定で考えるべきことまたどういうプラグインがあるかというのを説明できたらいいなと思っていますはい改めまして私ベントいますこちらにTwitterとまた個人ブログのリンクもあるのでぜひ見てみてください2014年からワードプレイスユーザーです9年目になりますけれども今年はワードプレイスのトレーニングチームというチームの代表に選ばれましたのでこういうオンラインワークショップを始め色々公式学習協材の作成をされている方々を聴いているというか導いているというかそういうことを行わせていただいています個人的に何か教えたり共有したりしている時に誰かがなるほどと理解する瞬間が良いですので皆さんもこのワークショップの中でなるほどということがありましたらぜひズームのチャットなどにそれを入れていただければ私もそれをエネルギーにして頑張っていこうと思いますはいこのオンラインワークショップとは何かということなんですけれどもこれはワードプレイスのトレーニングチームがワードプレイスプロジェクトの公式イベントとして行っているものですコンセプトは共に学ぶ場というもので私の方で今回ネタを用意してはいるんですけれども正直全部を知っているわけではないので皆さんの経験とか知識もお互いに共有していて私も皆さんから学べたらいし皆さんもお互いに質問に答えたりお互いに学ぶことができたらいいなと思っています質問はいつでもOKです音声でもズームチャットでも尋ねてくださいそして質問に答えるのも誰でもOKです別に私である必要はないので他の方のズームチャットの質問にお互い答えてOKですそして内容は録画されて後日ワードプレイスドットTVにアップされますので差し遣いない方はカメラつけてくださって全然大丈夫ですしエンドしたいなという方はズームチャットとかで積極的に参加していただけたらと思いますオンラインマークショップのほかにワードプレイスプロジェクトはオンラインのコースとか5分から10分くらいの短いチュートリアルビデオなど様々な教育教材を作成してますのでぜひこのラン.wordpress.orgというこのサイトを活用していただけたらと思いますそういえばですね今日のスライドを用意してますので皆さんと言われるを共有したいと思いますこれからズームのチャットに入れますこれでいけるかなこれで大丈夫なのかな問題があったら教えてくださいさてさて今日始めるにあたって皆さんに一つお尋ねします今日は実は2つ質問を用意しているのでまず1問目キャッシュの仕組みについてどれくらい知っていますか1から5の5段階評価で皆さんズームチャットの方に入れてほしいんですけども1は今日初めてキャッシュというものを聞きますという本当に初心者の方そして5はバッチリですわかってますむしろ私の情報も今日皆さんと共有しに来ましたくらいご存知の方1から5で言うと皆さん50分は何番くらいだと思いますか32322いいですね私も正直3くらいだと思います仕組みとか肉質というのは割とわかっていると思ってるんですけども実際の世界で運用するということそういう経験がちょっと足りないのでもしそういうお話も皆さんあればお!三沢さん5番さすがですでも質問は全部三沢さんに皆さん今日まで聞きますぜひ教えてください今日2つ目の質問なんですけどご自身のサイトでキャッシュ設定をしていますか皆さんブログとか何か会社のサイトとかご自分のサイトを持っているとしてキャッシュ設定を意識してされたことがありますかもししているならば簡単にどういう設定をしているかあるいは心がけているかそういったことをちょっとチャットの方に入れてもらえたらと思いますご自身のサイトでキャッシュ設定をしていますかはい 川上さんしていません宮城さんしていません三沢さんもしています経験5の三沢さんがどういう設定をされているのかぜひ聞きたいなと思うんですけれども石原さん一部でプラグインを入れていますでもデフォルト設定です石原さんページキャッシュのみヘルスチェックで入れるように言われるためなるほどページキャッシュっていう単語が出ましたね田井さん基本的には自分ではしていませんはい私は今までワードプレイス.comっていうホスティングサービスを結構使っていてそこもデフォルトでレンタルサーバー側がキャッシュ設定を色々してるんですねなので結構意識してなかったというか任せてたところがあって最近桜サーバーの方で一つ自分のブログを立ち上げて今回はあえてレンタルサーバー側の設定はあまり使わずに自分でプラグインとか入れてちょっと勉強してみよう研究してみようっていう感じであえてちょっと色々設定を維持っていますので私もまだまだ卵なんですけどキャッシュ設定を勉強中という感じですはいありがとうございますではいよいよ今日の内容に入っていこうと思うんですけれども今日の内容キャッシュについてしろまずそもそもキャッシュとは何かそれからさっきページキャッシュという単語が出たんですけどキャッシュって色々種類があるんですねなのでそのどういう種類があるかその次キャッシュ設定の注意点こういうことを気をつけましょうということを話して最後にワードプレイスのキャッシュをプラグインいくつか今日もテストサイトにインストールはしているのでその設定画面を皆さんと一緒に見ていこうかなと思っていますはい始める前に質問とか大丈夫でしたか大丈夫そうですねではいざいきましょうまずキャッシュとは何ですかとで多分日常生活でキャッシュというと私すぎるフレジットカードのカードローンとかああいうキャッシングをどうしても想像しちゃうんですよねあれは英語だとCASHというスペルで今日見ていくのはCABHEという英語だとスペルが全然違うんですけどキャッシュでキャッシュとはITの世界でよく使われる単語なんですけど語源を辿るとITに限った単語ではないですキャッシングという動作は何か資源を将来またアクセスしやすいように保管することを英語ではキャッシングと今何か資源を将来またアクセスしやすいように保管することキャッシュというのはその資源の保管場所ということになりますちょっとこれだと曖昧なので例えとして皆さん卵を想像してください皆さん朝起きて卵焼きを目玉焼きを食べようと思った時にお庭の鶏のところまで行って卵を拾って役人は多分珍しいと思います多分多くの方は冷蔵庫を開けて冷蔵庫の中から冷蔵庫はこの場合一つのキャッシュなんです後から卵をアクセスしやすいように自然に皆さん買ってきて一旦冷蔵庫に保管してそして冷蔵庫から卵が出せるようになるとだから冷蔵庫は一つのキャッシュです皆さん冷蔵庫の卵をどこから持ってくるかというと多分多くの方はスーパーなんですねスーパーも一つのキャッシュなんですわざわざ私たちが農場まで行って買わなくていいように利便性の高いところに立っていて彼らが一旦卵を集めてそこから私たちがそれを冷蔵庫に持ってきてそしてそれで料理をするとなのでこの一つ卵の例をとっても冷蔵庫スーパーというふうに二つのキャッシュがすでに次元の発生元と利用する私たちの間に入っているわけです似たようなことがコンピューターの世界でも起きているんですサーバーでサーバーにそのホームページのデータがあるんですけれども実際に私たちの画面に表示させる間に何かしょうかでそのデータが一時的に保管されていてそれぞれをキャッシュと言います保管場所が違ったり保管している内容が違うのでこれは色々なキャッシュの種類ということになっているわけですこの卵の例私が考えたものではありませんこれは別な方から聞いたんですけどすごいわかりやすいなと思ってぜひ皆さんと共有しようと思いましたとりあえずこのキャッシュとは何かというこの説明は大丈夫でしょうかでデニーさんわかりやすいありがとうございますキャッシュには必ずキャッシュ向こうかという操作がくっついてきますつまりキャッシュに保管している資源を消去すること一時的に保存はしていたんだけどそれを消去するこれをキャッシュのクリアとかとも言いますまたその卵の例を出しますとだいたい卵には日本の側に消費期限っていうのがある意味キャッシュの期限なんですねなので皆さん一時的に例外に保管はするんですけど何かの事情で卵が古くなった場合にはその卵を捨ててしまいますそこに認知されている消費期限というのがある意味キャッシュの期限なんですねこの期限を過ぎた場合はキャッシュをクリアしてくださいということを私たちはもうすでにやっているんです生活の中で期限がついていてその期限が到達するとキャッシュをクリアする消費をしてもう一度坂登ったところから持ってくるということが行われていますその期限が長いとか短いとかいろいろ設定できるんですねそれはそれぞれのサイトに合わせて設定するのであとでもう少し説明しようと思いますはいちょっと絵にした感じなんですけれども左側で皆さんが何かブラウザで閲覧をしているときにサーバーの方にwebページのリクエストを出しますURLを叩いてこのURLのページデータを送ってくださいとリクエストを出しますそのリクエストが届いたらワンドブレースはHP言語とかそのプログラムがそこで本来は始めるんですこのURLのページを求められたからじゃあそのページを作成しようといってPHPが動き始めてデータベースからデータを持ってきてホームページがHTML言語を作り上げてESSとかJavaScriptと一緒にそのデータを皆さんのパソコンまで送り届けますこういう流れなんですねこれが一瞬のうちに行われるわけなんですけどこの過程いろいろプロセスがあるので時間がかかるんですなので様々なところでキャッシングが行われて少しでもこのプロセスを早くしようということが行われていますそのWebサーバーの中でもキャッシングは行われますし皆さんのパソコンでもキャッシングは行われますしもっと言うなら送信過程でもキャッシングが行われることがよくありますなのでもうすでに3種類4種類このキャッシングがありそうだなということを分かってもらえたらいいなと思いますここからは具体的にどういうキャッシングが行われているかを見ていこうと思いますキャッシングを利用するメリットそもそもなんでキャッシュという仕組みがあるかというとただ一つサイトの表示を早くするためですサイトURLを叩いてホームページがプログラムを走らせてWebページを作って送り返してきて遅いと皆さん待ってられなくなって別なページに飛んじゃうんですよねご自分で何かホームページを開いてもし2、3秒画面が真っ白で開かなかったら多分もう諦めて戻って別なホームページを開こうってすると思うんです私たちの集中スパンで2、3秒できれるんですねなので特にコードなホームページとか実際その通信とホームページのデータ作成で2、3秒以上かかることも結構ありますそうなってしまうとお客さんがいなくなるので少しでも表示を早くするためにキャッシュという仕組みができましたでそれが一番なんですけどそこに不遂にしていろんなメディットが出てきます例えばサーバー側がお客さんがアクセスする度にPHPを走らせてホームページのデータを作っているとその1回のページができ上がるまで次のお客さんの対応ができないんですねなのでサーバーの能力って処理速度にかかってるんですタッシュの1つに毎回毎回お客さんがやってきたときにページを作るのではなくて事前にアクセスの多いページのデータを作っておいてお客さんがアクセスしたらまずはPHPを走らせないで保存していたそのデータをすぐ送り返すということが一つありますタッシュとしてこうするとサーバーが処理できるアクセスの数がどんどん増えるんですねなのでキャッシュは皆さんのサイトが多くのプラフィックを処理できることにつながります正しくキャッシュを設定すればここに3つ目として検索エンジン最適化SEOの向上につながると特に最近Googleはアクセスしてからホームページが表示されるまでの時間を計測してそれで検索結果のランキングにも影響させているんです特に3、4秒くらい超えちゃうと検索結果のランキングが下がってしまいますその表示速度は運用的にも非常に重要なものです最後ユーザーの体験が良くなる正直これが一番かもしれないですね皆さんせっかく自分のサイトに誰が訪れてくれたときにいい体験をしてほしいわけですよ早くサクサクといろんな情報が出て進めるのが一番いいので皆さんのお客さんもいい体験ができるということでキャッシュにはコンボ的にはサイトの表示を早くするというメリットなんですけどそこに不遂していろんな他のメリットも出てきますはい三沢さんコアウェブバイタルSEOの話ですねそのウェブサイトの健康っていうんですかねそのウェブページのどれだけ早く読み込みができるかとかこれを示す指標としてコアウェブバイタルというのがあります他にもスピード以外にもあるんですけれども非常に大事ですまたニューザー体験これが高速化の最大メリット不可要素としてSEOを向けとして考えたほうが幸せな流感そうですねこのスライド僕の順番入れ替えてほしいですかねもうここで例えばですけどそしてこんな感じですかねやっぱりサクサク皆さんもサイトに来た人がいろいろ情報が拾いたらいいなと思うと思う皆さんありがとうございます一旦これがキャッシュの概要なんですけど質問とかなかったでしょうかはいレニーさんありがとうございますよくわかりましたよかったですではキャッシュの種類に行きましょうもうすでにいくつかの種類がありそうだなということは説明してるんですけれども今日は大きく4つをお話しします多分もともとあると思うんです技術的なものがただ一般ユーザーとしてとりあえずこの4つを抑えておけばいいかなと思うのでこれを取り上げますCDNコンテンツコンテンツデリバリーネットワークCDNなんですけれどもこれはもうそのPHPとかがまわり終わって作成されたウェブページデータ HTMLとかJavaScriptとかを物理的に離れている様々なサーバー上に保存しいざユーザーがリクエストしたときにはユーザーに最も近いサーバーからウェブページデータを配信する仕組みです極端な話皆さんが例えば東京のサーバーにご自身のウェブサイトを持っていてそこに例えばロンドンの方がアクセスしたときにロンドンから東京まで01が飛ばなきゃいけないんですね今は光通信とかで早くなったとは言えやっぱり時間はかかるんです長けば長くほど時間はかかりますなのでそういう方のために例えばヨーロッパにCDNサーバーっていうのを一つ置いといてホームページのPHPとか本体は東京のままなんですけどそこで作成したHTMLとかウェブページデータをヨーロッパのCDNサーバーにも保管しておくと例えばロンドンの方がアクセスするときにはヨーロッパのそのサーバーにアクセスすればいいのでより早くデータの配信ができるという仕組みになります要するにこれは通信時間の節約ですこれはたぶんさっきの卵の例で言うとスーパーマーケットに一番近いと思います農場までわざわざ行くんじゃなくて農場がそれぞれの住宅地にあるスーパーに一旦卵を置いといて私たちはそのスーパーにさえ卵が変えるという状況ですねこれがCDNになります正直CDNを使わない理由はあまりない気がします有料無料いろんなサービスはあるんですけれどもご自身のサイトも特に世界中からアクセスが来る場合日本の一部の地域だけならそんなに必要ないかもしれないですけどアクセスがある場合はCDNの利用はぜひ検討したほうがいいと思います次元さんもなるほどありがとうございますぜひですけれどもオブジェクトキャッシュオブジェクトキャッシュというのはこれはウェブサーバーの中の話ですウェブサーバーがPHPを回してホームページを立ち上げる時にデータベースを参照したり何かしら計算をしたりします例えばデータベースにデータを取りに行くというのも案外時間かかるですよ何か計算をしなきゃいけない今日の日付とかを計算する場合も計算1個1個に時間がかかりますオブジェクトキャッシュというのはページ作成の過程でサーバーがよく参照する情報とかよく計算する変数の計算結果をアクセスしやすいメモリに格動しておくという話です例えば例えばさっきの卵の例で卵の農家さんが出荷工場を持ってスーパーの方に送りますスーパーの方に毎日卵を送るので電話でスーパーの話をしてくださいスーパーが重症を教えますわかりました翌日また電話して重症をしてください重症をもらってまた出荷してて多分やってないんですよ出荷工場はどうするか一番最初契約の時点で重症をしてください重症を知ったらそれを極端な話風船に書いてそのところにその情報を書き止めるわけです自分がよく使う情報なのでこのスーパーの送り先の重症は身近なところに書いておこうこれがオブジェクトキャッシュです皆さんのウェブサーバーがよく参照するそのデータは毎回毎回データベースに教えて教えてって言わなくていいように身近なところに書いておいてそこを参照できるようにする仕組みなのでさっきは通信時間の節約だったんですけど今度は計算時間の節約のためのキャッシュになりますはい分かったでしょうかちょっとテクニカルなんですけど計算時間の節約のためにサーバーでオブジェクトキャッシュが働く水沢さんがコメントくださっているのでちょっと読みますけど基本的にCDNは対象ですCSS ジャバースクリプトWPが生成するルートドキュメントはフルページキャッシュに対応していない限りCDNで配信されないので列乱者とサーバーの距離があればあるほど表示は遅いままでなるほど画像データとかCSS ジャバースクリプトがCDNで保存されてHTMLは対応していない限りやっぱりサーバーの方から持ってくるとありがとうございますいいですねありがとうございます石原さんのなるほど多分はいでクラウドフレア後で出ますので少しお話ししますけどとりあえずラッシュに戻りますさてCDN オブジェクトキャッシュ続いてページキャッシュこれもきょうもうすでに何回か出てますねウェブページっていうのは今話したとおりPHPが走ってワードベースの場合ですよワードベースの場合はPHPが走ってデータベースからデータを持ってきてその処理の結果がホームページが出来上がりますさまざまなデータが組み合わされてできるウェブページを事前に1つのHMLファイルとして保存しておく仕組みがページキャッシュですもう1つのウェブページを作っておくそして作ったウェブページをサーバーに保存しておいて要求がきたらそれを送るとなのでこれもまた計算時間の節約ですねいちいちプログラムを回さなくていいように節約するで例えばスーパーの例にしてるんですけれどもスーパーに行くと皆さんフルーツの盛り合わせを売ってたりするの見たことありますかなんかギーストコーナーとかで皆さんが1個1個バナナとリンゴとブドウとってスーパーを回ってカボに入れて買うことも全然できるんですけどそれを全部1つのセットにして買う人が多いのでもうそれを1つのフルーツ盛り合わせのバスケットとして置いておくと皆さんのものの時間が節約できるだろうスーパーはいろいろやっているわけです時々例えばカレーセットとかいても嫌えたジャガイモと玉ねぎと人参がパックに入っているとかありますよねこういった感じで同性一緒に使うものたちなので皆さんの買い物の時間節約のために一緒にパックしておきましたっていうのがページキャッシュみたいなものですページキャッシュはこのものを組み合わせたこのホームページを欲しいからだろうからこっちで1つパックに来て1回1回箱に入れたりしなくていいようにサーバーが用意しておくというイメージがどうかなと思いますここらへんまも私の考えなので想像なので分かってもらえたらいいなと思っていますはいそしてデニーさんありがとうございます今日4つ目これはサーバーとかの話ではなくてユーザー側のパソコンが保存をするキャッシュを作る組みですユーザーのブラウザー大体のブラウザーはデフォルトでキャッシュを取ってまいこれは冷蔵庫の話ですね皆さんが一番身近な冷蔵庫に食材を入れておくのと同じでブラウザーがそもそも中心とかをしなくてにようによく見るデータを保存しておこうという話です例えば実際の世界はどうかわかんないんですけどウェブサイトのロゴマークウェブサイトのロゴってそんなに変わらないんですよね結構例えば皆さんのブラウザーのブックマークバーにもロゴを表示したりローカルでもいろいろ使うデータなんですなのでサイトのロゴはブラウザーがキャッシュをしていることが多いと思います実際にウェブサイトのロゴが変わっていてもブラウザーの方では変わってなくて古いロゴが表示されるということが時々あるんですけどブラウザーキャッシュの仕組みですねでこちらは少し通信時間の節約がメインになります現実にはちょっと計算時間の節約も入ってるかもしれないですけど一番の節約は通信時間の節約そもそもリクエストを送らなくてもデータを持っているというためのキャッシュですなので先ほども見せたこの通信過程に戻ってくるとそれぞれのキャッシュがどこで働いているか入れてみましたまず皆さんのパソコンにブラウザーキャッシュが入ってますキャッシュにない情報はページをリクエストしますウェブサーバーはそのウェブページを作成して送り返すはずなんですけれどもその時にまずページキャッシュがあればページがもう出来上がっていればそれをそのまま送り返します出来上がっていなければ何かしら計算をするんですけどその計算過程でオブジェクトキャッシュというのも使いますデータを返すんですけどCDNCDNってたぶんこっちですかねこっちかなもし通信の途中でCDNサーバーを検入していればそれがデータを持っていればそもそもサーバーにアクセスしなくてもいいこういう感じですかねブラウザーが提供を出してCDNサーバーが私持ってますよっていうデータはそもそもウェブサーバーに行かずにCDNが送り返すって感じですねこういった感じでこの4つのキャッシュが働いていますはいここで提示してみなさん質問とかコメントとか三沢さんも補足があれば何でもぜひ教えてください三沢さんCDNの一番必要なサーバーの間ですねうんうんここにもう一個サーバーの絵を描いてもいいのかもしれないですよここら辺にCDNがあると思いますここら辺に石原さんブラウザーキャッシュはユエザーの環境に依存するのでしょうかはいほとんどイエスが答えだと思いますウェブサイト作成者側としてコードの中にこれはブラウザー保存しといて保存しないで一部指定することもできるはずですが結局ある意味それを尊敬するかどうか皆さんのブラウザーがそれに従うかどうかなのでユエザーの環境に依存することが多いと思います例えばワードプレイスでよくあるのは何かページを変更してみたとかテーマを変更してみて正しくできたかなどうかなってみたときにこっちの形態で見たら正しく変更されているのにこっちの形態で見たらまだ変更がされてないとかワードプレイスは結構あると思うんですねこれはブラウザーのキャッシュが大きく関わっているのでキャッシュをクリアしてもう一回読み込むみたいなことが必要です例えばキャッシュプラグインで私が読んだ話だと管理者がログインしているときのブラウザーはキャッシュを細めにクリアするという設定を持っているプラグインもあるようですなので管理者の自分は何か変更をしてサイトの表面を更新してみてみるとプラグインが管理者はキャッシュしないとしているからきれいに見えているんだけど友達のパソコンで見てみたら更新されてなかったとかということはあるのでやっぱりユーザーの環境に依存する部分もあるかなと思うデニさん強制的にブラウザーにキャッシュさせないようにすることも可能ですよね私は強制読み込みみたいなのは知ってるんですけどデニさんが言っているのはそもそもキャッシュを保存させないということですかクロムとかの機能にそれがあるってことですかねデニさんのヘントを待ちますが石田さんさはりはなかなか忘れてくれないですよねと宮城さんキャッシュのため新しい表示がされない場合に強制リロードしてくださいとお願いするのですがブラウザーキャッシュをクリアするということでしょうかおそらくそうですおそらくそうだと思います間のCDNとか間のサーバーがキャッシュをしているってこともあり得るのでたぶん99%の場合はブラウザーのキャッシュクリアのことだと思います宮城さんプラグインの話で管理者はページキャッシュ、ブラウザーキャッシュは動かすっていうのがありますねやっぱりそういうことはあるんですねデニさんジャバスクリプトとかで強制的にブラウザーにキャッシュさせないようにするジャバスクリプトはキャッシュさせないとか確かに設定ありますねブラウザってジャバスクリプトもホームページを作り上げる一つのプログラムなんですけれどもそれはキャッシュさせないとかHTMLタグでもキャッシュ禁止とかありますねなるほどこういった感じでなのでやっぱりサイトを作ってる側でできることにもちょっと限界はありますやっぱりそのユーザー側もトラブルがあるので確かにありました私もカスタマサポートしていたときにまずはキャッシュをクリアしてみてと言ってみることもやっぱりよくあったんではいそんなこともありミサワさんほとんど使いませんがワードプレイスでブラウザーキャッシュを意図的に無効果にするクラグインがある開いてみましょうそのユーザー皆さんがブラウザーキャッシュしないようにするプラグインということですねなるほどなるほどこんなのもありますで思い出してほしいんですけどキャッシュは表示の読み込みを早くしてユーザーの体験を向上させるのが目的なのでもちろんこういうプラグインでキャッシュを止めることはできるんですけどやっぱりスピードとかトレードオフになるので50分のサイトで必要かどうかというのは検討していくべきかなと思いURLのまつびに無意味なパラメーターをつけると別なページと認識されてキャッシュクリアされたと聞いたことがありますこれはそうだと思います例えば今私もこのページ開いてますけど果てない位置でいけるかな果てない位置とかつけるとこれ別なウェブページとして認識されてキャッシュがクリアされています確かにそういうことあります多分だからこれをまた果てない位置1位とかどんどんこの番号を変えるとブラウザそのたびに自分は別なページを読み込んでいると認識していますねデニーさん昔はよく書いていたHTMLのメタタグですねコンテンツのキャッシュというのが入っていますみさまさんキャッシュクリアというよりキャッシュされていないページが返される確かに石原さんに対してここに何か無意味なパラメーターをつけるとキャッシュがクリアされているのではなくてキャッシュされていないページを保存するだから多分今僕のブラウザには単純なURLと果てない1のバージョンと果てない11のバージョンとむしろ3つキャッシュがこれで保存されたことになるんですかねそれがだからキャッシュのないバージョンが読み込めるそういうことですいいですねいいですねちょっと時間があれなので先に行こうと思うんですけれどももし他にコメントがあったぜひチャットの方に入れてくださいキャッシュ設定の注意点いくつかあげようと思いますまずキャッシュはサイトの拡張機能に過ぎないということを覚えていただきたいつまりサイト自体の構想がめちゃくちゃで例えばですよ読み込みがものすごい時間かかっているからキャッシュのプラグを入れれば全部問題が治るかというとそういうわけではないんですねやっぱり拡張機能であって本体の質を高めるものではないです何か自分のサイトが問題がある場合はもちろんキャッシュのプラグインを入れたいするのも効果的かもしれないですけれどもそもそも自分のテーマがどうかとか今持ってるプラグインの組み合わせがどうかとかその本体の構造仕組みもぜひ検証してくださいはい2番目入る量には限界があります皆さんもそうですけど冷蔵庫って限りがあるので冷蔵庫に入る量っていっぱいになると多分皆さん古いものから捨ててくるんですよねキャッシュも一緒でCDNだったりオブジェクトキャッシュだった色んなキャッシュがありますがいっぱいになると古いものから捨てるという仕組みに基本的にはなってキャッシュを始めると例えばですけどデベロッパーさんとかはあれもキャッシュに入れてこれもキャッシュに入れてこれもキャッシュに入れてってやっていて実際その戻ってキャッシュされたものを使いたいときには古いものがなくなってるからただただ時間を送ってしまうということが極端な話あり得ますなのでキャッシュは効果的に使うように計画的に使うようにしましょう何でもかんでもキャッシュに入れればいいという3番サイトの性能と情報の新鮮さのトレードオフがあるさっきちょっと話したわけですけれどもキャッシュは読み込みスピードをよくしてが裏返すとキャッシュがクリアされない限り新しい情報は読み込まないのでその情報の新鮮さとのトレードオフがあります例えば極端な話私の個人ブログは週一ぐらいしか投稿しないので週一キャッシュがクリアされればその投稿のタイミングでキャッシュがクリアされれば十分なわけですが例えば新聞社のサイトとかニュースサイトっていうのは15分に1回30分に新しい記事が出てくるので1週間もキャッシュを取ってれば昨日しなくなるわけですねなのでやっぱりサイトによってどれくらい頻繁にキャッシュをクリアすべきかっていうのが変わってきます一概に皆さんこうすればいいってことはないので自分のサイトに合わせた最適なキャッシュ設定を見つけていくことが大事になります4番目ユーザーごとに異なる動的コンテンツはキャッシュしない先ほども性的コンテンツっていうのが出てきたんですけれどもユーザーごとに変わる情報をキャッシュするとこれひどい問題になりかねないよく例として出るのがオンラインサイトイーコマースサイトなんですけれども例えば例えば買い物カートの中身を極端な話キャッシュした場合1人目が4個買い物をしてそれがキャッシュされてたら次の人がサイトにアクセスした時に買い物加護に1個しか消費に入れなかったのに消費されてた前のお客さんの4個も入って5個に買い物加護がなっちゃったみたいなことが起こりかねないわけですねとか最後の購入確認画面よく皆さんの住所とかクレジットのしも4桁とか出ますけどあのページをもしキャッシュしちゃって次のお客さんにも出してしまったら前の人の個人情報が労衛するそれは例えばサーバー側のキャッシュだけじゃなくてブラウザーキャッシュの時も同じ端末をログアウトして別の人がログインした時にブラウザーキャッシュで前の人の情報が出てしまったりするとこれは大問題ですねなのでそういったページはブラウザーにもキャッシュしないようにっていうのをやっぱりはっきりと伝えなければいけないわけですねなので特にそういう個人情報を扱っているサイトを運営している場合はキャッシュのせてをつけてくださいあと2つです5番各キャッシュに対して2つ以上の仕組みを導入しないつまりどういうことかというと例えば皆さんのサーバーでページキャッシュを取っているとしますCDNでもページキャッシュを取ることにしますさらにプラグインでもページキャッシュを取ることにしますみたいな感じでそれぞれのキャッシュのクリア時間を1日とした場合に極端な話例えばプラグインが生成したページキャッシュを今度はサーバーがページキャッシュしてそれがCDNがページキャッシュして1日でクリアするはずだったのが3日間保存されちゃうみたいなこともあり得るわけなんです例えばページキャッシュを利用するのであればページキャッシュを担当しているものはただ1つオブジェクトキャッシュを担当しているのもただ1つというふうに各キャッシュに対して2つ以上の仕組みを導入しないことが基本になりますなのでまず1つサーバー会社が提供しているキャッシュの仕組みを把握することが大事ですご自分が使っているレンタルサーバーがそもそもどういうキャッシュサービスを出しているかをまず確認しましょうもしサーバーが提供していればある意味その部分はプラグインでカバーしなくてもいいわけですねそのサーバーのサービスに頼ったりするのがいいと思いましてあともう1つたまにこれカスタマサポートの時に見たんですけどサイトが遅いからキャッシュプラグインを3つ入れたのに全然早くならないみたいなお客さんもいたんですねそれぞれのプラグインが勝ち合ったりするのでプラグインも基本的に1つ1つで自分のやりたいことを全部まかないようにするというのがキャッシュ設定の注意点になると思うで最後6万キャッシュ設定時には複数端末で確認をする実は新しくキャッシュのプラグインを入れてみたとかした時にはさっきも話した管理画面管理者の画面だとキャッシュが保存されなくて出るみたいなことがあるのでいろんなブラウザいろんな端末で確認をするのが重要になっているかなと思いますはい ちょっとチャットの方にいくつか流れていましたデニさんJavaScriptやCSSの古いキャッシュが使われないようにするにはの意味の文字列使いますねクライアントに強制リードをしてもらわなくても良くなります以上ですねJavaさん 大抵のMWプラグインはプライベートキャッシュ機能があって個別ユーザーごとにキャッシュが保存されますただECに関してはパートなどはキャッシュしない方が不安ですなるほど だから一応個別ユーザーごとにキャッシュしているはずだけどキャッシュしない方が一応不安と特に新情報路営になった場合の技術をつけましょうそして最近国内のレンタルサーバーはキャッシュ機能を提供していますが除外設定もないですしキャッシュプラグインとかできることが好きとすっぽんですっていうのは全く一緒だって表現ですかねあとブラックボックスすぎてユーザー側でコントロールできないまあ聞いてもいいですしねレンタルサーバーのサポートにサポート会社によってサポートスタッフがどれだけ答える力があるかちょっと変わってきそうな気もしますけれどもはいなので日本の場合はレンタルサーバーに任せてもいいのかなっていう感じですかねはいちょっと時間見てる先に行けますけれどもこの次にキャッシュをプラグインをいくつか紹介しますその時にキャッシュプラグインなんだけど実はキャッシュと違う機能を提供しているプラグインも結構あるんです一緒になのでちょっとその他のサイトパフォーマンスに関わる概念を簡単にいくつか紹介しますまず縮小化というこれ技術があるんですけれどもさっきはその通信の速度を短くするとか計算の時間を短くするという話をしたんですけれどもそもそも通信をするそのデータの量を減らすっていうことができるんですけどすごい縮小化ですそもそも送ったりしなきゃいきなりデータを減らす縮小化がここでは3つやり方を書いていますまず1つは行動の圧縮例えばご自分でテーマを書いたりテーマファイルを書いたりする時にコメントを結構使うことがあると思いますこれは正しいことです自分でプログラムコードを書く時に他の人も読んで分かるその可読性のためにこの部分は何をやっている部分ですこの部分は何をやっていますっていうコメントを入れたいすることが基本ですがウェブサイトを閲覧するユーザーにとってこのコメントは不要な情報なのでわざわざそれを送信して入れるとその送信量が増えてしまいますなのでコードの圧縮という技術がそういったユーザーが不要なコードを省いたりそもそもユーザーはプログラムコードを見ないので改良とか空白とかもいらないんですよコンパクトにギュッとコードを短くするというのがコードの圧縮技術です続いてファイルの結合なんですけれどもウェブページを構成するファイルが例えば10個も10個20個も30個もある場合画像が多いとそうなんですけれども1個1個ファイルを送らなきゃいけないわけなんですねこのファイルの結合というのはわざといくつかのファイルを1つのファイルにしたって1口で送れるという仕組みですこれはブラウザがあれも頂戴これも頂戴というリクエストの回数を減らす技術になります3つ目リソースの圧縮これは画像の圧縮動画の圧縮そもそもプログラム画像ファイルを書き換えちゃうんですよく皆さんもJPEGとかPNGとかいろんな画像形式でサイズが変わるという話はたぶんどこかで聞いたことあると思うんですけど事前にだから全ての画像を一番圧縮されたファイル形式に変換しておくというこういうこともできますもう1つこれ英語だとレイジーローディングとか言うんですけれどもウェブページがスクロールして下の方が出てくるんですけど一番最初の読み込みはスクロール以下の部分はそもそも読み込まないまずはとりあえず画面に表示される部分だけはすぐに読み込んで表示をさせてお客さんが進めた事件でこのスクロール以下の部分を読み込むという技術ですこれはワードフェースのテーマだったりプラグインでいろいろ入れられますちょっとサイトの構造によっては問題を引き起こす場合もあるので全部のサイトが使ったほうがいいというわけではないんですけどこういう技術もありますはい二沢さんファイル結合はHTTPに以降は必須性で多くのキャッシュプラグインでも機能は従来のまま提供していますが基本的に使わないでというスタンスが増えていますそうなんですねありがとうございますこれですねファイルの結合ですね例えばCSSファイルをいつつも送るんじゃなくてそれは1個にまとめとくとかそれ程度だったらいいんですかねなんかすみません私ここ細かいことはちょっと分からないのでただ最近は必須性ということなので皆さんここは必須性と書いておきましょうはいさてキャッシュをプラグイン時間がちょっとこれ伸びそうですもし11時までという方がいらっしゃればログアウトサイトも大丈夫ですけれども最後ここを簡単に見ていきたいと思います何度か言ってますがプラグインの前にまずプラグインを入れるとサイト早くなりようというブログとか結構出てますけれどもプラグインを入れる前にまずレンタルサーバーが提供しているキャッシュ機能を確認してくださいサーバー会社によってはキャッシュの機能が一部有料だったり無料だったりすることもありますキャッシュ機能をつけるためには巻きつかくいくら増えるけれどももしかするとそれでできるかもしれないのでまずはレンタルサーバーが提供しているキャッシュ機能を確認しましょう特にレンタルサーバーがCDNも提供しているなんてこともあり得ますのでそしたらCDNの契約もいらなくなるので買ったりみましょう日本のレンタルサーバーこのキャッシュという単語を使わずにアクセラレーターという名前でキャッシュ機能を提供している場合もありますキャッシュ以外にもサイトを早くする機能をたくさん盛り込んでいるのでまとめてアクセラレーターって多分読んでいると思うんですけれどもなのでご自分のサイトレンタルサーバーもしキャッシュでドキュメントが出てこなければアクセラレーターで検索をするといいと思います先ほどもう一個クラウンドフレアという単語が出てこれはやっぱりないと思うんですけれども世界の最大のCDNサービスですねそして青い点がおそらくクラウドフレアさんが持ってる全世界のCDNサーバーたちだと思いますCDNの他にもセキュリティーの機能も提供していますしなんだろうサイトの保護と配信って書いてますけどセキュリティーとより良いパフォーマンスを総合的に提供している外部サービスになりますこちらはワードペース限定ではないですのでワードペースじゃないサイトでも使えるサービスになっていますが無料プランもあって個人ブログ程度のサイトだと無料プランで十分いろんな機能が使えるものになっていますクラウドフレアさんは世界のたくさんのサイトを持っているので例えばボット判定とかリードス攻撃とかも判定しやすいんです私のサイトと全く関係ないあっちのサイトが攻撃されていた時にその攻撃元のIPアドレスが私のサイトにも攻撃をふっかけた時に向こうで悪さしているからこっちもいかせないってクラウドフレアさんが止めてくれるんなんでそもそも私のレンタルサーバー会社は知らないこともクラウドフレアは知っていて世界を守っているというそういうサービスですちょっと一人人名感もちょっとあるんですけれどもなのでこれを使うかどうか皆さんに任せますけどとりあえずこういうサービスもありますキャッシュ設定用プラグインいよいよやってきましたキャッシュ設定用プラグインこれも皆さんのスライドに入ってますしいろいろリンクをつけてますのでぜひこれ見ていただきたいと思います今日も日本のレンタルサーバーはレンタルサーバー側でキャッシュを提供しているという話も結構あったのでどれがいいかはご自分で見るのがいいと思います日本語翻訳ありで見るとスーパーキャッシュっていうのはオンオフくらいの設定しかなくてある意味一番単純なので使いやすいトータルキャッシュWCトータルキャッシュというのはものすごい設定が多いです私も使わないですし本当にキャッシュに詳しい人が微調整して細かい設定をしたいっていう時に使えるプラグインその中間くらいがファーステストキャッシュファーステストキャッシュは日本語のブログとかグーグルで検索をしても使い方を説明している方が出てくるのでこの辺りかなと思いますあとはオートオプティマイズとかWPオプティマイズっていうここら辺も西洋県では結構人気で使われていますこのキャッシュエネイブランも割とワンクリックで見れたオンオフするみたいなプラグインなので単純に設定したい方は英語だけになりますけどこういうのがあるかなと思いますで簡単にこの3つだけ今日見ましょうスーパーキャッシュファーステストキャッシュトータルキャッシュ一応これテストサイトですローカルのテストサイトに実際にキャッシュのプラグイン色々入れたんですけど基本キャッシュプラグインは1個しか使わないというルールなので入口化をするとキャッシュプラグインでよくあるのはここにキャッシュを削除するボタンが付きますなので自分でいろいろサイトを更新していて表面で何かうまくいってないなという時にはこのキャッシュを削除っていうのをスーパーキャッシュの場合はこれでもう削除されたはずですツールの中に出てくるのかな設定か設定ですね設定にWPスーパーキャッシュっていうのがあってこれでキャッシングを利用するか停止するかこれでキャッシュ設定のおしまいという感じですね一応その高度な設定とかCDNとかいろいろこっちにもあるんですけれども基本的にスーパーキャッシュはこのオンオフでうまくいきますスーパーキャッシュを削して今度このトータルキャッシュ行きますトータルキャッシュを有効化するとここにパフォーマンスっていうのが出ましたもう見て分かるとおりこんなにメニューが追加されているんですこんなに合いますさっきと似ていて上の方にキャッシュをクリアするボタンはあるんですけれどもこれも設定がいろいろありますねどういうキャッシュをクリアするかみたいなことが書いていますトータルキャッシュこの用こそ画面はすごくシンプルで分かりやすそうなんですけどヒップしてみるといろいろつなげてみましょうとか一般設定一般設定を押すとここにこんなにタブがあってそれぞれのタブに対してこんなに設定があってという感じです間に合くな方はぜひ使ってみてくださいけど私のおすすめはこれも向こうかしてファーステストキャッシュこれですかねファーステストキャッシュを押すとちょっと怖い猫の絵がついてますけどまたここにキャッシュ削除というのが出てきますここは2個だけですね全てのキャッシュを消去するか縮小したファイルを消去するか猫ちゃんの設定を開くとちょっと設定多いんですけどたぶんこのページで大体の設定はできると思いましたこのページで25くらいあるのでかなり日本語化もされてますしこれを設定すればOK少し細かいのを見たいなと思ったら画像の最適化とかちょっとプレミアム機能になるんですけどもこの無料のこれでも結構いってるかなというのが私の完食ですなのでスーパーキャッシュは単純トータルキャッシュはタキンのファーステストキャッシュは人気があるという感じになっていますここで一旦皆さん質問とかないでしょうかミサーさんの方もたくさん情報をくださっているのでこれをなんとか後でどうしようかなスライドに盛り込んじゃっていいですか色々録画公開するときにスライドも公開するのでちょっとミサーさん名前は出さないんですけど情報は後でもし含めてよろしければ入れたいと思いますミサーさんデニーさんがhttp2でファイル結合が必須以上になったのは並列でダウンロードできるから結合しない方がいいということですかと並列でダウンロードっていうのは私の理解が正しければ複数のファイルを同時にダウンロードできるからわざわざ結合しなくてもいいというそういう意味だと思います基本的な解釈としてはおしゃれとファイル結合はエラー率が高いのでフォード内容を理解できる人が使うなら別ですがなるほど例えば日本なんかの場合は光通信でそもそも通信速度が早くなったのでもしかすると効率がそもそも変わらないそういうこともあるのかもしれないミヤケさんアクセラレーターのオンオフが私の使っているサーバーではできますどういうことか分かっていなかったのでよく分かりましたありがとうございますああ良かったですアクセラレーターはい、こういう機能ですので理解してもらえて良かったですさてミサバさんクラウドフレアはロリーポップこのファイルを併用するとエッセンセイル発行ができなくなるのでサクラXサーバーCパネル系サーバーだと併用しやすいですなるほどなるほど1、2年前の状況なので年のためGMOKはサーバーに取らせてくださいそうですねクラウドフレアとうまくいかないサーバーもあり得るのでもし使う場合は一度レンタルサーバーに確認するといいんでしょうそしてキャッシュプラグインを紹介する無料記事で正しい情報ははっきり言ってゼロですなんと!というのもサイトごとにやるべきは違うのでとにかく自分のサイトを知って使いたいプラグインをごとの調べしかないです紹介できるのはあくまで代表的な設定でということですそれはそうだと思います今日のワークショップが皆さんの助けになったらいいなと期待してますのでこれを見てじゃあプラグインちょっと1個1個読んでみようというのがいいかもしれないですねトータルキャッシュは多分無料ではライトスピードについて機能放負なのでかなり成れないと大変なやつですありがとうございますありがとうございます今日ミサワさんがいて本当に助かりましたいろいろ時間ちょっとオーバーしてますけど皆さん最後に何かこれだけ聞きたかったとかコメントとかなかったでしょうかミサワさんも何か新しいこといられました?この時間私たちは見てくださってすごい助かったんですけどぜひ次回のワークショップも来てください次回のワークショップなんですけど私たちで紹介しているんですけどすいませんまだ日程が決まってませんが8月にメガネさんがやってくれるみたいなことを言ってるので情報が分かり次第またミートアップ.comでなかします私のツイッターとかブログでも紹介しますので情報見つけた人からもどんどん拡散してぜひ多くの人を誘っていただければと思います今日は長い時間皆さん集まっていただきありがとうございました最後のコメントでにさん勉強になりました責任さん人と理理解が進みました香りさん苦手なキャッシュのこと分かりやすい例えのおかげでよく分かりましたありがとうございますというわけでここで今日のワークショップをしまいにしたいと思います皆さんありがとうございました