BLOGで使うフォントで理解しておくポイント。元々は楽器屋のギター兄ちゃん。趣味でプログラミングしてるうちに本職になってしまった人。javascriptなどは都度必要に応じて。最近Mac買ったのでswift勉強してます。体ぶっ壊して死にかけたので人生RESET中。最新5Gドコモホームルーター!BLOGで使うフォントは速度SEOに影響?!フォントの選択は重要な速度SEOに影響があるのでしっかり理解しておこう。ぶっちゃけどのFONTでどのサイズが正しいっていうのは無い。BLOG始めたばっかりの人は何指定しておけばいいのかわからんって人多いと思う。実際私とかのじーさまは老眼なんで基本細かいFONTサイズを嫌う。細かい文字は読めねぇ。このBLOGも最初なんぞ18pxで指定してたもんね。一般的にはパソコン向けのサイズは16pxが最適だと思うので最近は16px指定してます。自分が使うフォントのロード速度やサイズの意味は理解しておく方がいいかなとこんな記事作ってみました。大きく分けてローカルフォントウェブフォントの2種類に分別される。ローカルフォントそのPCやスマホの中に最初から用意されているフォントの事で特徴としては高速にロードできて非常に快適に使用できるメリットがあります。対速度のSEOではマストな選択になります。ウェブフォントFONTのデーターをWEBからもらってくる手法。WEBから都度FONTを拾ってくるのでどんな機種でもおなじFONTを表示可能で製作者の意図するデザインを美しく維持可能。おしゃれなサイトなんぞよくこれ使ってますけどただ一つ大きな重大な難点があります。表示速度がネットの速度にものすごく依存するし基本的にロードが遅い。表示速は昨今のSEO対策で重要項目であるのでこれは好ましく無い。回避方法はWEBから拾ってくるべきデーターをあらかじめサーバー内にダウンロードしておいてプレロードさせるって技もありますけど一定の手順が必要。CDN-FONTの低速を回避する方法はググればいくらでも出てきます。設定されているのはご存知の方多いと思います。以降ならローカルフォントであるのでどちらのOSでも同じように高速表示できるという素晴らしフォントです。非対応ですがそれぞれ代替FONTで普通に美しく表示しているので良しとします。実際におすすめ順に見てみましょう游ゴシックの場合MacでもWindowsでも「游ゴシック」を優先し、もし游ゴシックがなければMacでは「ヒラギノ」、Windowsで「メイリオ」になるような設定です。游ゴシック16pxみた感じどちらも全く同じように表示してますね。表示も非常に高速でGOODです。ヒラギノゴシック>メイリオの場合ヒラギノ角ゴシックを最優先とする設定。16pxwin11のChromeでヒラギノゴシック>メイリオ16pxこちらは明らかに違いますね。カタカナと文字の縦横比率。よって文字間隔も違って見えますね。場合によっては意図したデザインと雰囲気かわっちゃいますね。表示は非常に高速なので問題ありません。JP」というWebフォントを使用する設定です。ロードが遅いのでおすすめしません。1番しっくりきました。その他のサイズを指定するとFONTの大きさに引っ張られてレイアウトが乱れる事が多くて使いにくいなというイメージです。いえユーザー側でサイズを強制的に変更している場合は意図しない表示になってしまいますが最初からスマホで表示乱れるくらいなら小で表示しておいた方が見た目安定します。いい感じだと思います。指定してる方結構多いですね。ローカル読みしてない場合速度的に不利であることを理解してお使いください。速度SEO的な留意事項Twitterでも呟きましたがあまり重要性を感じてない方も多いかも?って話で注意喚起。モバイルの高速表示が可能なサイトが確実に優遇されます。InsightsなどのTOOLを広く公開してBLOGの速度計測させて速度改善を推奨しているわけですから気にしないのは致命的であると理解した方がいいかな。ページが表示して美しいのですがこれも速度SEO的に不利になるので理解してチェックマークを外しましょう。スコア的に-10くらいガクッと落ちます。使用してスライドしたりふわっと表示するディレイエフェクト系はなにも対策せずに使うと減点される可能性が非常に高いです。実際に使用している方は理解してさらに何らかの対策をおこなって高速化されてると思いますが何も考えずにこのような効果を追加すると大減点の原因になりますので速度的に問題を抱えてる方は外してみるとか対症療法的な処置も必要になると思います。次にFontAwesomeのアイコンを使用している方も多いと思います。現バージョンのSWELLは内部的にFontAwesome6を読み込んで非常に高速に使えますが実はFontAwesomeが使用するall.min.cssが大きいので普通にロード中のレンダリングブロックに引っかかってこいつが減点対象になります。私のBLOGでは最近はFontAwesomeは外してます。最近実装されたボックスメニューのアイコンはFontAswesomeを使用してますがあれはアイコンデーターをSVGで記述できるのでall.min.css使わなくてもFontAwesome使えるのです。普通の人はfunctions.phpは触りません。XcontentsMenu/ProfsearchContentstopcontentsTop閉じるcontents閉じる。