爆速サイトへの道

サイトがスマホやタブレットから見ると激重だったため高速化を試みてみました。

【やったこと】
・GoogleFontsの非同期読み込み（参考）と読み込むfont-weightを1つだけにする
・FontAwesomeのファイルDL（参考）と非同期読み込み（参考）
・画像をWebPにする（変換ツール）
・キャッシュの有効期間を長くする
・ぐちゃぐちゃだった追加CSSの整頓
・てがろぐに載せていた画像の多いエントリ（#過去ログなど）を一覧外に下げる（タグや検索などで呼び出した時のみ表示する）

特に赤字の3つは影響が大きかったようでかなりの改善が見られました。

続きを読む 🔽【Google fonts】
Webフォントを使わないという選択肢もありましたが、メニューやタイトル部などにどうしてもこのかわいいフォントを使うのを諦められなかったので頑張りました…。（使ってるフォントはKiwi Maruです）
非同期の効果はとても大きいですが、それ以前に欲張って太さの違う同じフォントを3種類も読み込んでいたのがかなり大きな要因でした。日本語フォント３つも読み込んだら重くなるに決まってる…。一つに絞ったら劇的にサクサクに。

【FontAwesome】
矢印やカレンダーやハートなどの小さなアイコンに使っています。
これもいいスパイスになっているのであきらめたくなく以下同文。

【WebP画像形式】
画像をWebPにしたことで表示速度がちゃんと改善されたことには驚きました。
もともと、jpgの状態でも500kb以下くらいには抑えていたのでそんなに変わらないだろうと思っていたのに実際は目に見えて変わりました。
上からジジジ…と表示されることがほとんどなくなりましたね。
創作サイトは画像が命だからね…。ここに関しては手間を惜しまず過去分も可能な限りWebPに置き換えていきます。
（Wordpressの方は画像アップ時に自動で変換してくれるプラグインもありますが、ギャラリーに使用しているプラグインの方が自動変換に対応していないので結局手動で順次差し替えていきます…。）

そのかわり、てがろぐではWebPの縦横サイズの指定ができないと言われてしまい、画像の読み込みが追い付かない時にガクガクっとなる地味な不具合（仕様）がでるようになりました。
読み込みが早い方が大事なのでここは妥協できる範囲かと思います。

【Google先生の評価やいかに】

△本館はもうちょっと頑張らないとだけど


△てがろぐはもう大丈夫そう

【次にやること】
・画像をWebP形式に順次差し替え　完了
・Wordpressテーマを軽くてサポートが継続されているものに変更する（デザインは大きく変えずに現状維持）
　→SketchはAutomattic社製の公式テーマだったのでとりあえず継続利用してても心配無用そう。

#カスタマイズ #Wordpress #高速化

本館サイトの方に、てがろぐ記事の抜粋ページを作ってみました。
個人的に、とっても”個人サイト感”が出たと思うのですがどうでしょうか(笑)

この数か月サイトを運用してみてわかったのは、最初からWordpressのギャラリーを埋めるために絵を描いたりするより、まずはこのてがろぐに軽い気持ちでポンポンと投げてみる方が格段にやりやすいということです。
文章も同じですね。いきなり長文コラムを書こうとするより、なんとなく書き始めたら結果的に長くなったから「コラム」として扱う…というような。

続きを読む 🔽はじめから大業を成し遂げようとせず、スモールスタートの精神が合っているようです。

てがろぐはWebでの表現ツールとして優れていますし非常に自分に合っているのですが、見てほしいエントリーとわりとどうでもいい（流してほしい）エントリーの区別は得意でないと思ったので、今回まとめのページを作るに至った次第です。

まとめページを作っておくと、”投稿日”があまり情報として価値を持たなくなるのがいいなと思いました。

－

記事リンクをまとめるにあたり、てがろぐのサイトマップスキンを使って一定のカテゴリのタイトル名のみ抽出する案もあったのですが、

・そのカテゴリーのすべてを抽出したいとは限らない（今はよくても将来ノイズ記事が混ざる可能性がある）
・記事タイトルを手動で変えたい場合がある
・てがろぐの公式スキンの大型アップデートが来たら調整がつらい

などの理由により、素直にWordpressの固定ページに手動でリンクを貼る運用にしました。
記事への補足コメントを書いたりするにも、その方が簡単で柔軟に対応できそうだったからです。

なおこのまとめページはベータ版、お試し運用中ですので予告なく消える場合があります。

#てがろぐ #Wordpress #モチベーション

ひととおりてがろぐのカスタマイズ完了しました。もう崩れないはず。
doさんのmodernというテンプレートをベースに少し手を加えた上で、てがろぐに最適化しました。
往年の個人サイトっぽいミニマル感がちゃんとありつつも、様々なデバイスで閲覧されることを前提とした視認性の良いデザインで本当に素敵です。

サイト全体のカスタムがひと段落したところで、せっかくなのでお世話になったテンプレートなどをまとめておきます。
特にてがろぐがなかったら間違いなくこんなに頻繁に更新してなかったので、てがろぐ本体と関連プログラムの作者さん達には本当に感謝の気持ちでいっぱいですね。

Sketch テーマ — WordPress.com
　┗本館サイトのWordpressテーマ

お手軽マイクロブログCGI「てがろぐ」：スキン式で複数ユーザ対応 - にししふぁくとりー
　┗ブログに使用しているCGI

modern | do - 創作・同人サイト制作支援サイト
　┗上記のてがろぐに適用しているベースとなるテンプレート。

skin-minimal | do - 創作・同人サイト制作支援サイト
　┗HTMLテンプレートをてがろぐに適用するためのてがろぐ用スキン

【プログラム配布】サムネイルをクリックすると画像がフワッと出てくる「fuwaimg」 | do - 創作・同人サイト制作支援サイト

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選｜サルワカ

【CSSだけ】トップに戻るボタンの作り方【コピペでOK】| マンガでわかるホームページ作成
ついでにソースコードの編集に使ったEmEditorにも触れておきます。
ソースコード内のカラーコードを、カラーサークルを使って視覚的に変更できるのが本当に便利でした！

時間を忘れてHTMLとCSSをいじくって試行錯誤を繰り返して…久々に、昔初めてサイトを作ったばかりのころの楽しさがよみがえりました。
最近はWordpressでテーマを探して、プラグインとほんのすこしCSS追加するくらいでしたので。（それもすごくありがたいことなんですけどね。）

雑な例えですが、レストランで食べた方が実際おいしいってわかっててもキャンプ飯のが美味く感じるみたいなのあるじゃないですか。
個人の趣味サイトのカスタムの世界ってそれに似てると思います。

以前”不便益（不便であることのメリット）”に関する本を読んで面白かったのですが、それにちょっと通じるものがあるかもしれません。

#カスタマイズ #てがろぐ #不便益

独自ドメイン取っておいてよかったなぁと思った話

見てる人には全く関係ないことですが、諸事情でこのサイトが置いてあるディレクトリを変更する必要がありました。
ファイルのバックアップは取っていても、Wordpress製のサイトはちょっとしたことでへそまげて真っ白画面やオレンジエラー画面になって死亡することが結構あるのでドキドキでした…。（経験者）
詳しい人ならファイルさえ残ってればその状態からでも復活できると思うのですが、私には無理ですねおそらく；

続きを読む 🔽で、ファイルの置き場所を変えると、サーバーからもらえる無料のドメインではURLごと変わってしまいますが、独自ドメインとっていたおかげでURLも変わらず、WP側でめんどくさい設定なども特に不要で済みました。

元々独自ドメインを取った動機は、作品（絵や写真）にウォーターマークを入れたくて、その際に無料の長いURLよりは短くてわかりやすいURLを記載したかったからなのです。

ウォーターマークには画像の所有者を明確にするという機能もありますが、どこかで画像を見かけた人がURLを入力してサイトにきてくれる可能性も大いにあると思ったので、手打ちしやすい短いものを…と思ったのです。

ところで”どこかで画像を見かけた人が～”というのは転載される前提のようで、転載しないでくれとお願いしている身としてはちょっと矛盾していますね。
でも正直ネットに公開する以上転載されることは防ぎきれませんから、「大っぴらに許可はしてませんよ」というスタンスと所有者の明示さえしていれば、正直あとは悪意のある使い方さえされなければ上出来かなぁくらいに思ってます。

それから、私はよくハンドルネームやサイト名を変えたくなる癖があるのですが、本来名前をコロコロ変えないって結構大事だと思うんです。
ハンドルネームが変な名前だろうが本人がしっくり来てなかろうが、自分以外の99%の人はそんなこと全く気にしてません。
それよりも、1つの看板（名前）をちゃんと維持して歴史を積み重ねていること自体が、そのまま魅力や信用に繋がるのではと思います。

独自ドメインを自分のハンドルネームにしたことで、「私はこの名前でやっていくんだ」という覚悟を決める意味もありました。
（まぁでも汎用的な単語とのもじりでもあるので、いざとなった時の逃げ道はあるようにしました…ｗずるい）

ちなみに私のハンドルネームは「少女漫画家っぽい名前にしたい」という理由でつけたのですが、今は少女漫画的なものを描くことへの興味は完全に失っているので、すでにちょっとしっくり来なくなってる部分もあります…ｗ

最後に独自ドメイン関係の思い出話を一つ。
初めてPCサイトを作ったとき、短いURLにあこがれて独自ドメイン取ったはいいものの、WhoIs情報の代理設定というものを知らず自分の名前と住所を丸出しにしてしまっていたことがありました…ｗ

孤島みたいなサイトでしたし、すぐに気づいたので多分誰にも見られなかったと思いますが、ありゃもう脂汗もんでしたね；
思えばほかにもネット関係では結構いろいろ危ない橋を渡ってきました。幸い何も大きなトラブルが起きなくて本当に良かったです。

今どきは代理情報公開設定がデフォルト設定になってることがほとんどだと思うのであまりこういうことはないかもしれませんね。

#Wordpress #創作全般 #レンタルサーバー #インターネット #思い出