タグ「高速化」［9件］
Wordpressサイトから手打ちサイトに変更するにあたり、作成中のテスト環境では随分と重くて、HTML手打ちサイトは軽いはずなのに…？？と不思議で仕方ありませんでした。
テスト環境ではアクセラレーターをOFFにしていたからかもしれません。（ロリポップの全く同じサーバーです。他に原因が思い当たらない）
本番環境でアクセラレーターがONになったらサクサクになって安心しました。
こういう機能は気休め程度の効果だと思ってたので、ここまでハッキリ体感できるほど違いがわかるのは凄いですね。
とはいえ、リニューアル後の当サイトは、ギャラリーに専用の軽量サムネイルを個別設定していないのと、全体に日本語Webフォントを設定しているので、前のWPサイトと比べても結局トントンくらいの表示速度に落ち着いたと思います。
（特にギャラリーページは初回アクセス時はかなり重いかもしれません。申し訳ないです。）
#高速化 #手打ちサイト #レンタルサーバー
テスト環境ではアクセラレーターをOFFにしていたからかもしれません。（ロリポップの全く同じサーバーです。他に原因が思い当たらない）
本番環境でアクセラレーターがONになったらサクサクになって安心しました。
こういう機能は気休め程度の効果だと思ってたので、ここまでハッキリ体感できるほど違いがわかるのは凄いですね。
とはいえ、リニューアル後の当サイトは、ギャラリーに専用の軽量サムネイルを個別設定していないのと、全体に日本語Webフォントを設定しているので、前のWPサイトと比べても結局トントンくらいの表示速度に落ち着いたと思います。
（特にギャラリーページは初回アクセス時はかなり重いかもしれません。申し訳ないです。）
#高速化 #手打ちサイト #レンタルサーバー
自分のサイトがWordpressを利用していることや、画像のサイズが大きいせいで、はたまたサーバーの安いプランを使っているなどが原因で重かったのだと思い込んでたけど、実際は自宅のネット回線速度がゴミだったことが原因でした…。
何が原因かわかりませんが、いつのまにか5Mbpsとかしか出てなかった。
格安SIMの4G回線より遅いってどういうことよ…。
ルーター再起動したら50Mbps近くまで回復。
他のサイトを見てても特に画像が多いサイトは爆重で、「今Wordpress使ってる人も多いし仕方ないよなぁ、管理人さんはキャッシュが残ってるから読み込み遅くても気づいてないのかな」くらいに思ってましたがそれもあっさり解決。
今になってみればほとんどすべてのサイトが重かったんだからまず自分の環境疑えって話でしかない…。
PCもそれなりのスペックで新調したばかりだったこともあり全く疑ってませんでした…。
Youtubeとかもだましだまし見れちゃってたし…。
でもサイト高速化のためにあれこれやったのは楽しかったので別にヨシです。
いろいろ勉強になったしね。
5Mbpsの回線速度でもそこそこサクサクなふじむら咲のサイトを今後ともよろしくお願いいたします。
何かおかしい時は1にも2にもまず再起動！これ鉄則！
#高速化
何が原因かわかりませんが、いつのまにか5Mbpsとかしか出てなかった。
格安SIMの4G回線より遅いってどういうことよ…。
ルーター再起動したら50Mbps近くまで回復。
他のサイトを見てても特に画像が多いサイトは爆重で、「今Wordpress使ってる人も多いし仕方ないよなぁ、管理人さんはキャッシュが残ってるから読み込み遅くても気づいてないのかな」くらいに思ってましたがそれもあっさり解決。
今になってみればほとんどすべてのサイトが重かったんだからまず自分の環境疑えって話でしかない…。
PCもそれなりのスペックで新調したばかりだったこともあり全く疑ってませんでした…。
Youtubeとかもだましだまし見れちゃってたし…。
でもサイト高速化のためにあれこれやったのは楽しかったので別にヨシです。
いろいろ勉強になったしね。
5Mbpsの回線速度でもそこそこサクサクなふじむら咲のサイトを今後ともよろしくお願いいたします。
何かおかしい時は1にも2にもまず再起動！これ鉄則！
#高速化
爆速サイトへの道③
・ロゴ画像をテキストデータ化
→お遊びでやってみたら意外と効果が大きくて驚く
・ロゴ画像を背景として表示する
→高速化にはおそらく関係ないけど、webフォントの読み込み完了時にロゴ画像の位置がずれてガタつくのが気になったので、上記のついでに修正。
もう切り上げると言ったのに吸い込まれるようにサイトをいじってしまう…。
ギャラリーページと、Youtubeの埋め込みのあるページ以外はもうモバイルでも99点とか出せるようになりました。
もうほんとにいじるのやめます。夢の中でまでサイトいじってることあってちょっとヤバいなってなりました。
ちょっと完ぺき主義気味な傾向があるので、数字で出されるものを気にしだすとほんとキリがなくなってしまうので。
#カスタマイズ #高速化
・ロゴ画像をテキストデータ化
→お遊びでやってみたら意外と効果が大きくて驚く
・ロゴ画像を背景として表示する
→高速化にはおそらく関係ないけど、webフォントの読み込み完了時にロゴ画像の位置がずれてガタつくのが気になったので、上記のついでに修正。
もう切り上げると言ったのに吸い込まれるようにサイトをいじってしまう…。
ギャラリーページと、Youtubeの埋め込みのあるページ以外はもうモバイルでも99点とか出せるようになりました。
もうほんとにいじるのやめます。夢の中でまでサイトいじってることあってちょっとヤバいなってなりました。
ちょっと完ぺき主義気味な傾向があるので、数字で出されるものを気にしだすとほんとキリがなくなってしまうので。
#カスタマイズ #高速化
バナーをつくりました
地味にRetinaディスプレイ対応です。
（↑ここに貼ってあるものはてがろぐ本文でHTMLタグを使えないためRetina非対応です。
Retina搭載端末からご覧の方で表示のされ方の違いに興味がありましたら、Aboutページで表示されているものと比べてみてくださいね。）
【追記】2022.10.18～ サイト改装時に通常の200*40バナーのみに統一しました。
ひと手間かかってしまいますが、もしRetina対応版を使いたい方がいましたらbanner_retina.pngを直リンク（または持ち帰り）していただければ400*80のバナーになりますので、それをHTMLタグやCSSなどでwidth200px height40pxで表示させて使ってやってください。
もちろん、そんなこと一切気にせず通常版のバナーを普通に貼ってもらって全く問題ありません。
高画質版はあくまでただのオプションです。
——
以下は私のサイトだけに関係のある話で、リンクバナーを貼りたいだけの人はあまり気にしなくていいこぼれ話。（読まなくて大丈夫です）
Aboutページにアクセスした端末がRetinaディスプレイであれば高画質版を表示し、そうでなければ通常のバナーが表示されるようになっています。
もし高画質版のバナーだけを表示してしまうと、（高画質版は実のところ”画質”が良いのではなく単に実画像サイズが2倍のものを縮小表示しているだけなので）バナーリンクを貼る作業をする際に必ずリサイズしてもらう手間を取らせてしまうことになり、そのような事態は避けたかったので、閲覧者の環境により表示するバナーを出し分けるという対応にしました。
※Retinaディスプレイは1ドットに4pxを表示できるため小さいサイズのバナーを原寸で表示するとぼやけてしまう。それを避けるには実際に表示したいサイズよりも大きな画像を用意してCSSなどで縮小して表示する必要がある（細かい説明は間違ってるかもなので雰囲気だけ伝わってください;）
今回の作業によりsrcsetというパラメータを初めて知りました。いろいろ進化してんだなぁほんと…。
なおsrcsetは私のサイトでバナー配布するにあたり2サイズのバナーを自動で出し分けしたいという事情のために必要だったものなので、単にリンクバナーを貼っていただく方には関係のない設定です、お気になさらず。
参考：Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法 | ワードプレステーマTCD
これによりアバウトページからiPhoneなどのRetinaディスプレイ搭載端末でバナーを保存すると2倍の大きさのバナーが保存されてしまう（＝iPhoneや iPadから保存した人にはバナーのリサイズを強制することになる）という地味な問題があるかと思いますが、バナーリンクを貼る作業をする人は大体PCからやると思うので、見栄えの方を重視することにしました。
そもそもRetina対応しなきゃいいじゃんというツッコミはなしでお願いします。自分がiPad Lover なので自サイトでぼやけたバナーが表示されるのが落ち着かないというのがそもそもの動機でしたので。Retina対応は本当に単なる自己満足です。
———-
その他やったこといろいろメモ。
・画像の直リンク拒否
今までやってなかったというわけでもないですが、狙った挙動をしていなかったことに気づいたので修正しました。
もし画像表示まわりに不具合があったらメールフォームからお知らせいただけるととても助かります。
なおバナーは直リンクOKです。
・その他
・Wordpressテーマの子テーマを作って親テーマと分離しました。
・dnsプリフェッチというサイト高速化の方法を試してみました。
・タブレット端末以下の画面サイズではハンバーガーメニューを復活させました。
・複数ファイルに分かれていたCSSを1ファイルに統合しました。
本当はタイトルロゴとかも作ってみたかったんですがいったん断念。
次にサイトデザインをがらっと変えることがあればまた検討します。
9月はサイト自体の強化月間になりましたがそろそろ切り上げて、10月からは中身の拡充の方に注力します。
#カスタマイズ #Wordpress #高速化
（↑ここに貼ってあるものはてがろぐ本文でHTMLタグを使えないためRetina非対応です。
【追記】2022.10.18～ サイト改装時に通常の200*40バナーのみに統一しました。
ひと手間かかってしまいますが、もしRetina対応版を使いたい方がいましたら
もちろん、そんなこと一切気にせず通常版のバナーを普通に貼ってもらって全く問題ありません。
高画質版はあくまでただのオプションです。
——
以下は私のサイトだけに関係のある話で、リンクバナーを貼りたいだけの人はあまり気にしなくていいこぼれ話。（読まなくて大丈夫です）
Aboutページにアクセスした端末がRetinaディスプレイであれば高画質版を表示し、そうでなければ通常のバナーが表示されるようになっています。
もし高画質版のバナーだけを表示してしまうと、（高画質版は実のところ”画質”が良いのではなく単に実画像サイズが2倍のものを縮小表示しているだけなので）バナーリンクを貼る作業をする際に必ずリサイズしてもらう手間を取らせてしまうことになり、そのような事態は避けたかったので、閲覧者の環境により表示するバナーを出し分けるという対応にしました。
※Retinaディスプレイは1ドットに4pxを表示できるため小さいサイズのバナーを原寸で表示するとぼやけてしまう。それを避けるには実際に表示したいサイズよりも大きな画像を用意してCSSなどで縮小して表示する必要がある（細かい説明は間違ってるかもなので雰囲気だけ伝わってください;）
今回の作業によりsrcsetというパラメータを初めて知りました。いろいろ進化してんだなぁほんと…。
なおsrcsetは私のサイトでバナー配布するにあたり2サイズのバナーを自動で出し分けしたいという事情のために必要だったものなので、単にリンクバナーを貼っていただく方には関係のない設定です、お気になさらず。
参考：Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法 | ワードプレステーマTCD
これによりアバウトページからiPhoneなどのRetinaディスプレイ搭載端末でバナーを保存すると2倍の大きさのバナーが保存されてしまう（＝iPhoneや iPadから保存した人にはバナーのリサイズを強制することになる）という地味な問題があるかと思いますが、バナーリンクを貼る作業をする人は大体PCからやると思うので、見栄えの方を重視することにしました。
そもそもRetina対応しなきゃいいじゃんというツッコミはなしでお願いします。自分がiPad Lover なので自サイトでぼやけたバナーが表示されるのが落ち着かないというのがそもそもの動機でしたので。Retina対応は本当に単なる自己満足です。
———-
その他やったこといろいろメモ。
・画像の直リンク拒否
今までやってなかったというわけでもないですが、狙った挙動をしていなかったことに気づいたので修正しました。
もし画像表示まわりに不具合があったらメールフォームからお知らせいただけるととても助かります。
なおバナーは直リンクOKです。
・その他
・Wordpressテーマの子テーマを作って親テーマと分離しました。
・dnsプリフェッチというサイト高速化の方法を試してみました。
・タブレット端末以下の画面サイズではハンバーガーメニューを復活させました。
・複数ファイルに分かれていたCSSを1ファイルに統合しました。
本当はタイトルロゴとかも作ってみたかったんですがいったん断念。
次にサイトデザインをがらっと変えることがあればまた検討します。
9月はサイト自体の強化月間になりましたがそろそろ切り上げて、10月からは中身の拡充の方に注力します。
#カスタマイズ #Wordpress #高速化
爆速サイトへの道②
【やったこと】
・ギャラリーに使用していたプラグインを変更
・ギャラリーページを静的HTMLで表示
【プラグイン変更】
VisualPortfolioからFooGallery（＋foobox）に変更。
ギャラリー全体としての初回読み込みの重さはそこまでかわらないものの、
VisualPortfolioでは指定の画像枚数（8枚とか）を読み込み終わるまで待ちが生じるのに対し、
FooGalleryでは1枚ずつ読み込めた順に表示してくれるので、体感の待ち時間は激減した。
これで作品を見てもらえる確率が格段に上がったと思う。
デザイン変更の柔軟性、作品の並べ替え操作などもFooGalleryの方がやりやすいと思いました。
シンプルで大げさすぎない感じや、作品タイトルやキャプションを見るか消すか閲覧者側が自由に選べるのもよい。
VisualPortfolioにあったカテゴリフィルター機能とソート機能がオミットされたけど、フィルターに関しては基本一次創作サイトなのでなくてもあまり問題ないと思いました。古い順にみる人とかもまずいないでしょ。
（もし古い順に見たい方がいましたら、最新絵を拡大表示したあとに左矢印（←）クリックか、画像の上で左から右側にスワイプし続ければ古い順に見れます。）
あとVisualPortfolioの強みは投稿記事から画像だけ取り出してギャラリーを作れること（それもタグなどでめっちゃ細かく条件付けできる）だったけど、私には持て余す機能だったのでやはりFooGalleryのがシンプルで良い。
逆に少しくらい重くなっても構わなくて、作品のジャンルとかで細かくギャラリー分けしたい人とか、普段はブログに画像を載せててそれを半自動でギャラリー形式にまとめ直したいという人にはVisualPortfolioすごくお勧めです。
【静的HTML】
Simply Staticというプラグインで、WPで動的に生成したページをHTMLで吐き出せる。
（参考：WordPressで静的HTMLを生成する方法【便利な使い方から注意点も解説】 | DISPLAY-ディスプレイ）
これを使うとWordpressをHPビルダーみたいな感覚で使えるのかも（ビルダー使ったことないから適当；）
前回試みた軽量化施策のおかげで、いまや重いのはギャラリーページのみなので、そちらのみ静的HTMLに置き換えた。
WPの固定ページを1枚作り、そこにSimply Staticで生成してDLしたHTMLファイルを呼び出して表示させている。
（参考：Wordpressでトップページを静的サイトに index.htmlを共存させる簡単なやりかた - ビジネスのIT化なら合同会社ジリキ）
私の場合は参考どおりトップページをHTMLにするパターンだったのでそのままコピペでいけたけど、ファイル名とパスを変更すれば他のページでもいけそう。
静的ページ化したことで体感は早くなったと感じたものの、Google先生評価は変わらず。
体感が変わったならヨシとする。大事なのは評価よりも自分がどう思うかです。
冗談はさておいても、キャッシュ保持の関係なのか、静的HTML化すると2回目以降の閲覧では表示が非常に早くなるのでやった価値は十分ありました。
なおギャラリー以外のページはわりと頻繁に書き換えているし、既にGoogle先生評価もモバイルで98点とか叩き出せるようになったので動的生成のままとしました。
古いCSSが読み込まれてたりして表示がおかしくなってる人はお手数ですがキャッシュクリアしてみてくださいね。
△あれ、スコアちょっと落ちてる…
#カスタマイズ #Wordpress #高速化
【やったこと】
・ギャラリーに使用していたプラグインを変更
・ギャラリーページを静的HTMLで表示
【プラグイン変更】
VisualPortfolioからFooGallery（＋foobox）に変更。
ギャラリー全体としての初回読み込みの重さはそこまでかわらないものの、
VisualPortfolioでは指定の画像枚数（8枚とか）を読み込み終わるまで待ちが生じるのに対し、
FooGalleryでは1枚ずつ読み込めた順に表示してくれるので、体感の待ち時間は激減した。
これで作品を見てもらえる確率が格段に上がったと思う。
デザイン変更の柔軟性、作品の並べ替え操作などもFooGalleryの方がやりやすいと思いました。
シンプルで大げさすぎない感じや、作品タイトルやキャプションを見るか消すか閲覧者側が自由に選べるのもよい。
VisualPortfolioにあったカテゴリフィルター機能とソート機能がオミットされたけど、フィルターに関しては基本一次創作サイトなのでなくてもあまり問題ないと思いました。古い順にみる人とかもまずいないでしょ。
（もし古い順に見たい方がいましたら、最新絵を拡大表示したあとに左矢印（←）クリックか、画像の上で左から右側にスワイプし続ければ古い順に見れます。）
あとVisualPortfolioの強みは投稿記事から画像だけ取り出してギャラリーを作れること（それもタグなどでめっちゃ細かく条件付けできる）だったけど、私には持て余す機能だったのでやはりFooGalleryのがシンプルで良い。
逆に少しくらい重くなっても構わなくて、作品のジャンルとかで細かくギャラリー分けしたい人とか、普段はブログに画像を載せててそれを半自動でギャラリー形式にまとめ直したいという人にはVisualPortfolioすごくお勧めです。
【静的HTML】
Simply Staticというプラグインで、WPで動的に生成したページをHTMLで吐き出せる。
（参考：WordPressで静的HTMLを生成する方法【便利な使い方から注意点も解説】 | DISPLAY-ディスプレイ）
これを使うとWordpressをHPビルダーみたいな感覚で使えるのかも（ビルダー使ったことないから適当；）
前回試みた軽量化施策のおかげで、いまや重いのはギャラリーページのみなので、そちらのみ静的HTMLに置き換えた。
WPの固定ページを1枚作り、そこにSimply Staticで生成してDLしたHTMLファイルを呼び出して表示させている。
（参考：Wordpressでトップページを静的サイトに index.htmlを共存させる簡単なやりかた - ビジネスのIT化なら合同会社ジリキ）
私の場合は参考どおりトップページをHTMLにするパターンだったのでそのままコピペでいけたけど、ファイル名とパスを変更すれば他のページでもいけそう。
静的ページ化したことで体感は早くなったと感じたものの、Google先生評価は変わらず。
体感が変わったならヨシとする。大事なのは評価よりも自分がどう思うかです。
冗談はさておいても、キャッシュ保持の関係なのか、静的HTML化すると2回目以降の閲覧では表示が非常に早くなるのでやった価値は十分ありました。
なおギャラリー以外のページはわりと頻繁に書き換えているし、既にGoogle先生評価もモバイルで98点とか叩き出せるようになったので動的生成のままとしました。
古いCSSが読み込まれてたりして表示がおかしくなってる人はお手数ですがキャッシュクリアしてみてくださいね。
△あれ、スコアちょっと落ちてる…
#カスタマイズ #Wordpress #高速化
爆速サイトへの道
サイトがスマホやタブレットから見ると激重だったため高速化を試みてみました。
【やったこと】
・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 #高速化
サイトがスマホやタブレットから見ると激重だったため高速化を試みてみました。
【やったこと】
・GoogleFontsの非同期読み込み（参考）と読み込むfont-weightを1つだけにする
・FontAwesomeのファイルDL（参考）と非同期読み込み（参考）
・画像をWebPにする（変換ツール）
・キャッシュの有効期間を長くする
・ぐちゃぐちゃだった追加CSSの整頓
・てがろぐに載せていた画像の多いエントリ（#過去ログなど）を一覧外に下げる（タグや検索などで呼び出した時のみ表示する）
特に赤字の3つは影響が大きかったようでかなりの改善が見られました。
【Google fonts】
Webフォントを使わないという選択肢もありましたが、メニューやタイトル部などにどうしてもこのかわいいフォントを使うのを諦められなかったので頑張りました…。（使ってるフォントはKiwi Maruです）
非同期の効果はとても大きいですが、それ以前に欲張って太さの違う同じフォントを3種類も読み込んでいたのがかなり大きな要因でした。日本語フォント３つも読み込んだら重くなるに決まってる…。一つに絞ったら劇的にサクサクに。
【FontAwesome】
矢印やカレンダーやハートなどの小さなアイコンに使っています。
これもいいスパイスになっているのであきらめたくなく以下同文。
【WebP画像形式】
画像をWebPにしたことで表示速度がちゃんと改善されたことには驚きました。
もともと、jpgの状態でも500kb以下くらいには抑えていたのでそんなに変わらないだろうと思っていたのに実際は目に見えて変わりました。
上からジジジ…と表示されることがほとんどなくなりましたね。
創作サイトは画像が命だからね…。ここに関しては手間を惜しまず過去分も可能な限りWebPに置き換えていきます。
（Wordpressの方は画像アップ時に自動で変換してくれるプラグインもありますが、ギャラリーに使用しているプラグインの方が自動変換に対応していないので結局手動で順次差し替えていきます…。）
そのかわり、てがろぐではWebPの縦横サイズの指定ができないと言われてしまい、画像の読み込みが追い付かない時にガクガクっとなる地味な不具合（仕様）がでるようになりました。
読み込みが早い方が大事なのでここは妥協できる範囲かと思います。
【Google先生の評価やいかに】
△本館はもうちょっと頑張らないとだけど
△てがろぐはもう大丈夫そう
【次にやること】
→SketchはAutomattic社製の公式テーマだったのでとりあえず継続利用してても心配無用そう。
#カスタマイズ #Wordpress #高速化
いやー、サイトが重いですね。私だけ？
画像がメインコンテンツのサイトなのにこの重さではそもそも見てもらえなくなってしまいそうなので早急になんとかしないといけません。
原因予測
①自分の回線。悪天候だとネットが遅くなったことが過去にもあるのでそれかも
②iPadのスペック不足。特にiPadで見た時に異常な重さだから
③サーバーが重い。数日前に503エラーが起きてそれ以降重くなった気がするから十分ありえる。同じサーバー内にトラフィックが大きいサイトがある
④単に画像サイズが大きい
とりあえず画像を数百kb程度に軽量化することで対処してみます。
Wordpressを使ってる部分はプラグインが自動である程度軽量化してくれてますが、てがろぐではそうもいかないので1つ1つ自分でやらないとです。
これから上げる分は軽量化しますが過去分は気が向いた分だけ気が向いたときに対応します。
Webで高画質の絵を載せるメリットってほとんどないですしね。リサイズする手間を省けることくらいしか。
#Wordpress #てがろぐ #高速化
画像がメインコンテンツのサイトなのにこの重さではそもそも見てもらえなくなってしまいそうなので早急になんとかしないといけません。
原因予測
①自分の回線。悪天候だとネットが遅くなったことが過去にもあるのでそれかも
②iPadのスペック不足。特にiPadで見た時に異常な重さだから
③サーバーが重い。数日前に503エラーが起きてそれ以降重くなった気がするから十分ありえる。同じサーバー内にトラフィックが大きいサイトがある
④単に画像サイズが大きい
とりあえず画像を数百kb程度に軽量化することで対処してみます。
Wordpressを使ってる部分はプラグインが自動である程度軽量化してくれてますが、てがろぐではそうもいかないので1つ1つ自分でやらないとです。
これから上げる分は軽量化しますが過去分は気が向いた分だけ気が向いたときに対応します。
Webで高画質の絵を載せるメリットってほとんどないですしね。リサイズする手間を省けることくらいしか。
#Wordpress #てがろぐ #高速化
Webフォント（GoogleFonts）の使用により、フォント表示時のチラつきとサイト全体の重さが気になっていたので対策した話。
欧文フォントだけ使っている時はさほど気になりませんでしたが、日本語フォントをどうしても使いたかったので頑張りました。
Googleフォントの外部読み込みをやめて自サーバーから呼び出すようにした
GoogleFontsからフォントをダウンロード→woff2に変換→自サーバーにアップロードしてCSSの@font-faceで読み込む。
これにより初回アクセス時の読み込みは（たぶん）重くなってしまいましたが、以降のページ遷移はサクサクになったはず。
特にキャッシュを拒否していない環境であれば一度読み込んだフォントは1年間キャッシュされます。
外部からの読み込みだとページ遷移するたびに、端末標準の代替フォントから指定したフォントに切り替わる瞬間の画面のチラつきがありましたがそれもなくなりました。
ローカルにフォントがインストールされていれば読み込むようにした
当サイトでは日本語フォントにKosugi Maruを指定していますが、閲覧者の端末にKosugi Maruがインストールされている場合はそちらを優先して読み込む設定にしました。その場合は問答無用で超サクサクです。
おそらくこのサイトへのアクセスの99%は自分だと思うので、とりあえず自分のPCからKosugiMaruで爆速＆チラつき無しで表示できるようになり大満足。
なおヒラギノ角ゴがインストールされている端末ではそちらが優先されます。これは私がiPadで自サイトを見る時に、KosugiMaruがなんかしっくりこなかったからです；
タイトルロゴがちらつかないようにした
トップページの筆記体風のロゴもWebフォントなのですが、読み込み完了するまで代替フォントとして端末標準のクソデカゴシック体が一瞬チラつくのが気になっていました。
@font-face {
…中略…
font-display:auto;
}
ロゴに使用しているフォントではfont-displayを上記のように設定することで、代替フォントを表示せず、指定フォントで読み込み完了するまでは何も表示しないように変更。
あとはフォントとは関係のない本当に細かい余談ですけど、トップ絵とバナーサンプル画像は文字列変換して読み込み時の一瞬のガク付きが出ないようにしました。
【参考】
#高速化 #手打ちサイト #カスタマイズ