/** Geminiが自動生成した概要 **/
この記事は、Bootstrapを用いてWebサイトのCore Web Vitalsスコアを向上させる方法を解説しています。具体的には、BootstrapのボタンコンポーネントのCSSのみを抽出し、ページHTMLにインライン挿入する方法を紹介しています。手順としては、Bootstrapのソースファイルから必要なSCSSファイルをサイトディレクトリに配置し、SOY CMS側でSCSSコンパイルの設定を行います。これにより、ボタン用のCSSがページに直接記述され、外部ファイルの読み込みが不要になります。さらに、生成されたCSSを圧縮してインライン化することで、ページ表示速度の向上を目指します。ただし、毎回SCSSをコンパイルするのは非効率なので、CSSやページ全体のキャッシュ化が推奨されています。
/** Geminiが自動生成した概要 **/
SOY CMS用のAVIF変換プラグインがリリースされました。このプラグインは、PHPのimageavif関数を利用し、ページ内のJPG/PNG画像をAVIF形式に変換、HTMLを書き換えます。AVIFは次世代の画像フォーマットで、高画質・低容量を実現します。プラグインはimageavif関数が使用可能なPHPバージョンで動作します。ダウンロードは公式サイトからどうぞ。なお、SOY Shopでは類似機能が「画像フォーマット変換プラグイン」に搭載済みです。
/** Geminiが自動生成した概要 **/
SOY CMS用WebP変換プラグインが登場！ページ内のJPG/PNG画像をWebPに変換し、HTMLを書き換えます。WebPは次世代画像フォーマットで、ファイルサイズを小さくしながら画質を維持します。PHPのimagewebp関数が使用可能な環境が必要です。ダウンロードは公式サイトからどうぞ。なお、SOY Shopには同様の機能を持つ「画像フォーマット変換プラグイン」が存在します。
/** Geminiが自動生成した概要 **/
記事では、PageSpeed Insightsのユーザー補助スコアを100点にするための取り組みが紹介されています。具体的には、記事タイトル下のカテゴリ名のリンクで指摘されていた「背景色と前景色には十分なコントラスト比がありません」という問題を解決しています。解決策としては、WebAIMのConstract Checkerを用いて、背景色と文字色のコントラスト比を調整しました。スライダーで色を調整し、Passになるまで繰り返した結果、問題を解消できました。ただし、サムネイル画像の低解像度に関する指摘は未解決で、別の対応策を検討する必要があるとのことです。
/** Geminiが自動生成した概要 **/
SOY CMS用のユーザー補助プラグインが開発されました。このプラグインは、画像のalt属性が空の場合に自動でファイル名を挿入することで、WebアクセシビリティとSEOを向上させます。PageSpeed Insightsで新たに導入されたユーザー補助項目に対応し、既存記事の修正や新規記事作成時の負担を軽減します。プラグインはサイト管理者の負担を軽減し、ウェブサイトのアクセシビリティ向上に貢献します。ダウンロードは[https://saitodev.co/soycms/](https://saitodev.co/soycms/)から可能です。
/** Geminiが自動生成した概要 **/
SOY CMSのブロック（ラベル、プラグイン）に、カスタムフィールドの拡張ポイント実行有無を設定する機能が追加されました。従来、カスタムフィールドが増えるとブロックのパフォーマンスが低下する問題がありました。今回の更新により、不要なカスタムフィールドの値取得を抑制し、表示速度の改善が可能となります。例えば、新着記事一覧でタイトルとリンクのみ表示する場合、カスタムフィールドの取得をオフにすることで効率化できます。今回の更新は、長期間運用しているサイトでカスタムフィールドが肥大化している場合に特に有効です。ダウンロードはsaitodev.co/soycms/から可能です。
/** Geminiが自動生成した概要 **/
本記事では、SOY CMSのフロントコントローラにおける例外処理の効率化について解説しています。従来のtry-catchによる大域的な例外処理は、パフォーマンスに影響を与える可能性がありました。そこで、例外処理を廃止し、エラー判定を明示的に行うことで、処理の軽量化を目指しました。具体的には、エラー発生時に変数にExceptionオブジェクトを格納し、処理の最後にエラーの有無を判定して対応する処理を行うように変更しました。この変更による目立った速度向上は確認されませんでしたが、ブロックを多用した複雑なサイトでは効果を発揮すると期待されます。
SOY CMSで運営しているサイトの表示速度を向上させたいという依頼があったので、今まで温めていた改修案を組み込んでみた。まずは表示が遅くなっていたサイトのパターンを整理しておくと、ブロックやブログブロックで一度にたくさんの記事を表示していることが原因であった。スクロールする度にAjaxで新たな記事を取得して出力というのがすぐに思い付くが、CMSの開発をしている者として一度に記事を取得するところの改善はしておきたい。ということで、表示を遅くする要因を挙げてみる事にする
先日、Googleの検索アルゴリズムでPageSpeed Insights(Core Web Vitals)の結果を試験的に導入というニュースが流れた。【SEO対策】Core Web Vitalsでも記載した通り、当サイトでもCore Web Vitalsの調査を行っていて、先日までCore Web Vitalsで重要な三要素であるLCP、FIDとCLSはオールグリーンであったが、最近仕様変更があったのか？記事詳細ページで確認してみると、スコアの色がオレン
PageSpeed Insightsに新たに加えられた指標としてWeb VItalsがある。このWeb Vitalsは今年末か来年のサイトの評価の重要な要因となるらしい。Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標要約すると、ページを読み込む時、HTMLを読み込み、CSSを読み込み、DOMで整形という経てブラウザに表示されるわけだけれども、新たなルールとしてDOMの処理を評価に加える
今回の内容は高速化の検証で明らかな差が見られなかったので、あくまで仕組みとして話を進めます。PHPにはOPCacheというコンパイル済みのバイトコードを共有メモリに保存し、PHP がリクエストのたびにスクリプトを読み込み、パースする手間を省くことでパフォーマンスを向上できる機能があります。PHP: はじめに - ManualOPCacheは下記の記事に従って、PHPの環境を構築すれば自動で利用可能になります。さくらのVPSにUbuntu18.04を入れてSOY CMSを動かし
先日公開されたChromeのバージョン85から、CSSのcontent-visibility:auto;でブラウザにそのコンテンツが画面内にスクロールしてくるまでは描画する必要がないことを伝えられるようになったそうです。CSS content-visibility property - Chrome Platform Statusコンテンツの遅延読み込みにより、表示速度が更に向上するとのことで、当サイトで下記のように対応してみました。※今回の対応が正しいかわかりません。
ページの表示速度の改善の一手で画像の遅延読み込みというものがある。遅延読み込みというのはファーストビュー(ページ読み込み時にブラウザに表示される箇所)で出力されている画像以外は、ページの内容をすべて表示してから画像の取得を行うというテクニックです。ページを表示する上で重い画像(動画)ファイルやiframeを遅延させることで、ページ表示が快適になる。この遅延読み込みを利用する方法は、ブログ記事の末尾にある画像の出力箇所で、<img src="/
【SEO対策】Gueztliで画像のファイルサイズの削減の記事でクライアント(サイトを見る側)とサーバ間でのデータのやりとりで、転送量を減らすと良いという内容を紹介しました。ここで今回紹介するHTMLの圧縮を行うと、更に転送量が減らすことが出来ます。2020年6月時点で、表示速度の高速化や転送量はSEOにあまり影響を与えないとのことですが、これから更にデータのやりとりが増えるであろう中で、転送量を減らす取り組みはエコに繋がるはずなので、HTMLの圧縮はやっておいた方が良いはず。
【SEO対策】他のCMS向けの総当り攻撃を避けるまでのSEO関連の記事では、グラフ化や数値化が簡単だったので成果がわかりやすかったが、この記事以降で紹介するSEO対策は、記載する対策によって成果が上がったのかわかりにくいので、あくまでも当サイトで行っていて成果が出てそうだなという認識でお願いします。SEOでよく言われることとして、ユーザ体験(ユーザエクスペリエンス：UX)がある。ユーザエクスペリエンス - WikipediaWebであれば、本当に知りたい内容に到達できたといっ
今回の対策はSEOに直結するかわからないけれども、サイトを運営していてページの表示速度を下げる要因なので触れておく。とあるサイトを公開した後にアクセスログを確認したら衝撃的なログがあった。そのログというのが、https://example.com/wp-loginhttps://example.com/wp-adminへのアクセスだった。このサイトは世界ナンバーワンのシェアを誇る某CMSを使用していないので関係ないといえば関係ないけれども、アクセスログに上記のパスで埋
当サイトの記事詳細ページのコンテンツの末尾辺りにTwitterのツイートボタンやFacebookのシェアボタンを設置しているが、最近、公式から配布されているものから自家製のものに変えた。例えば、Twitterで公式から配布されているパーツを貼り付けると、こんな感じで見栄えの良いボタンや様々な便利な機能が付くけれども、このボタンの読み込みにはJavaScriptが使われており、PageSpeed Insightsの評価が下がってしまう。そこで、自作でボタ
最近のサイトのデザインをする時にCSSを利用することが大半だろう。※私がHTMLの勉強をはじめた頃はテーブルレイアウトという手法？があった。サイト読み込みの時にCSSをどのタイミングで読み込むか？でPageSpeed Insights - Google DevelopersPageSpeed Insightsのスコアが変わる。私がCSSの勉強をしていた頃は、外部CSSの読み込みは、<html><head>&l
IPv6というインターネットプロトコルの報告に目を通していたら、サーバとの通信速度が改善されたという内容を見かけた。わかりやすい記事は“表示爆速”阿部寛さんのサイト、IPv6にも対応済みだった 「デザインより質」ネットで話題 - ITmedia NEWSあたりだろうか。IPv6は設定するだけで、通信速度の改善が見られてSEO上効果があるらしく、設定自体が非常に楽なので、やっておいて損はない対策だろう。というわけでIPv6について見てみることにする。
仕事内容 - saitodev.co当サイトの仕事紹介のページにiframeでGoogle Mapsを表示している個所がありますが、このGoogle Mapsの出力によって、PageSpeed Insightsの結果が80点台になっていました。今回の記事ではGoogle Mapsを遅延出力してみたらどうなるのか？を試した結果を紹介します。遅延出力する前に記載されていたコードは、<iframe src="https://www.goog
SEO対策、データベースチューニングでサイトの表示速度を上げる為にはMySQL等のサーバ型のデータベースを採用して、サーバのメモリが許す限りデータベースにメモリ等の使用を振り分けるという内容を紹介しました。と紹介したものの、当サイトではデータベースはファイル型のSQLiteを使用しています。理由はSOY CMSを利用するであろうユーザのほとんどがMySQLがチューニング出来ないサーバを利用するはずで、SQLiteで高速化が出来なければ意味がないだろうと判断して、SQLiteを使用し続
当サイトでは行っていないけれども、SEO対策としてのページの表示速度の面で絶対に意識する必要があるものがある。それはMySQL等のデータベースのチューニングで、チューニングするとページの表示速度が向上するのがわかりやすい。何故、当サイトではデータベースのチューニングを行っていないか？というと、SQLite Home Page当サイトを動かしているSOY CMSでは、個人的にブログページはSQLiteで運営することを推奨していて、SQLiteはチューニングが出来ないということが理由
SEO対策、キャッシュの利用でデータ転送量を削減までの記事では、ブラウザでサイトを見る時のブラウザからリクエストを送り、レスポンスが返ってくる時のデータの最適化を見てきたけれども、今回から新たな視点を加えてのSEO対策を見ていくことにする。Google製のWebサービスであるPageSpeed Insightsでスコアが100になるためには、ラボデータで各項目がオールグリーンになる必要がある。ここで最後まで苦戦したのが、インタラクティブになるまでの時間と初回入
SEO対策、Gueztliで画像のファイルサイズの削減までの話でブラウザがサーバにリクエストを送信し、サーバからのレスポンスで可能な限りデータ転送量を減らす必要があるという内容を記載した。レスポンスに含まれる画像を含むHTML以外のファイルの大半は一度取得したら再び取得する必要がないものです。再び取得する必要がないファイルは極力二度送らないようにできればデータの転送量を大幅に減らすことが出来る。再送しない、つまりはブラウザ側でキャッシュとして持たせることができれば良いことにな
SEO対策、HTTP/2でデータの転送の仕組みを変えることで、リクエスト数とデータの転送時間の削減を行った。ここからは個人的な解釈なので間違えているかもしれないけれども、HTTP/2によって一度にデータを送信する量が増えた。しかも増えたのはインターネット上で最も容量を占拠していると言われる画像データになっている。回線はみんなで使うものなので、画像データのサイズが無駄に大きかったとすると、回線を圧迫する事になるので嫌だろう。PageSpeed Insig
対応の順番を逆に紹介していましたが、前回のSEO対策、データの転送量の削減の為の圧縮で紹介した圧縮アルゴリズムのBrotliは事前にHTTP/2というプロトコルに対応している必要があります。先にHTTP/2について触れておきます。HTTP/2自身のパソコンのブラウザから遠隔にあるサーバに配置しているウェブサイトのデータを取得することを考えます。サーバは最初にブラウザから送られてきたリクエスト、例えばルート直下にあるindex.htmlファイルが欲しいというリクエストに対して、任
個人事業の開業届けを出してから、当サイトに注力を注ぎ、ほぼお問い合わせのみで事業を切り盛り出来ています。開業してから最も意識していることが当サイトのSEOで、数々の試作を行いました。最近、SEOで行ってきたことを教えてほしいというお問い合わせが数件あるので、良い機会なので行ってきたことを整理してみることにします。先に一番重要なことを挙げておくと、コンテンツの充実は絶対条件で、不器用でも良いから事業主(運営者)の言葉で書き続けることが大事だと思っています。生きた文章こそが人を惹きつけると信