Bloggerの「js」「css」を「GitHub」で外部ファイル化した場合のキャッシュ問題を「RawGit」の「CDN」で解決

概要

 Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう


…ってな記事を書きました…「Page Speed」で高スコア狙いで導入しましたが

「browser caching」は…10分で…充分とは言えません…とも書きました…

単純に「 GitHub Pages」から参照しただけでは…当然ながら…

「Page Speed」では…ブラウザのキャッシュを活用しろ
「Leverage browser caching」

「YSlow」では…ファイルサイズがデカイんだから CDN 使えよ
「Use a Content Delivery Network (CDN)」

…ってな感じで叱られます…

直書きの方が速いのに高スコア狙いで外部ファイル化したのですから…

関連する…これもまた…改善はマストです…

「 GitHub」に外部ファイル化したのを前提でチマチマやってみましょう…

「GitHub」に置いた「js」「css」を「RawGit」で「CDN」にのせる

RawGit  


無料の「CDN」を…あれこれ試すより…「 GitHub」が前提ですから先ずは…

アカウント作成などの手間が無い「RawGit」を使ってみるのが良いでしょう…

ご自身の…「 GitHub」のダッシュボードから…

GitHub-1

GitHub-2

RawGit-1

RawGit-2

作成済みの「Repository」をクリック…
■GitHub-1

「CDN」にのせる「raw file」を右クリックして…

リンクアドレスをコピーすれば…

「 GitHub」での作業は終了です…
■GitHub-2

上記「RawGit」に移動して…

「Paste a GitHub raw file or gist URL here.」という…

入力フォームにコピーしたアドレスをペースト…
■RawGit-1

「Production」に表示されたアドレスで…

「raw file」を「CDN」経由で呼び出せます…
■RawGit-2

おわりに…

「Use a Content Delivery Network (CDN)」などと脅されると…

何やら…ハードルが高そうな印象を持ってしまうでしょうが…

結構お手軽に解決できるでしょ

冒頭の「 GitHub」の記事にも書きましたが…「CDN」ですので…

「 GitHub」で外部化するファイルは…完全な静的ファイルじゃなければ…

必ず…バージョン管理をして下さい…

今回は…「raw file」でお手軽に「CDN」にのせてみましたが…勿論…

「Paste a GitHub raw file or gist URL here.」となっていますから…

「GitHub Gist」でファイル管理をしているならば「gist」でも OKです…

以上です…最後までお読みいただきましてありがとうございます…

Universal Header Sidebar Main Footer Current-Label : Tips