画像のファイルサイズを適正極限まで落とす！ページスピードインサイトは80点以上確保せよこのツールは絶対にお気に入りに追加！SEOにおいてグーグルがサイトの価値を判断する基準は、まずWebページの読み込みの早さにあります。この読み込みスピードはグーグルの公式ツールであるページスピードインサイトで「数値化され確認」することができます。グーグル公式ツール [ページスピードインサイト][この動画は15分15秒です]自分のサイトのユーザビリティを把握ページスピードインサイトでは4種類の指標で点数評価しています。パフォーマンスユーザー補助おすすめの方法SEO上記の評価で「パフォーマンス」と「おすすめの方法」はサイトの表示速度についての指標となっています。表示速度は画像のファイルサイズの影響を受けます。この事からページスピードインサイトの点数評価を上げるためにシリウス2ユーザーが即対応できる事が画像処理と言えます。当サイトのページスピードインサイトでの点数評価パフォーマンスサイトの表示速度や動作速度が速いほどパフォーマンス性に優れているとグーグルは判断します。つまりサイトがどれだけ速く読み込まれ、ユーザーがサイトをどれだけ早くスムーズに操作できるかを指す指標です。ユーザー補助ユーザーがサイトを閲覧したときに操作しやすいか？記事の内容が把握しやすいか？など要するに万人に対して利便性に優れているかかという指標です。例えばページ移動のためのリンクや画像が視覚的に分かりやすく認識可能で、コントラスト比が適正であるという事などでです。特にテキストは背景色とのコントラストを十分に確保し、視覚障がい者でも読みやすくすると言う配慮が必要になります。文字は解りやすく白黒ではっきりさせる事が基本になりますが、背景色を白以外にする場合は濃い色と薄い色をしっかり使った配色にするべきです。代替テキストであるalt属性は画像に適切な代替テキストを設定するという事もユーザビリティに関係します。また当サイトの動画解説にもありますが、「見出しタグ」をルールに準拠した適切な方法で配置する事も重要です。おすすめの方法画像を最適化画像のファイルサイズを小さくしかつロスレス圧縮することでページの読み込み時間を短縮させる。ページの転送容量圧縮ツールなどでコード量を削減することで表示速度を向上させる。ブラウザのキャッシュを活用ユーザーが再度訪問した際に、必要なデータをブラウザキャッシュから読み込むことで、表示速度を向上させる。サーバーの応答時間サーバーの応答が遅い場合、サーバーの性能を向上させることで、ページの読み込み速度を改善できる。遅延読み込みスクロールせずに見える範囲外にあるコンテンツの読み込みを遅延させることで、ファーストビューの表示速度を向上させます。シリウス2にはこの機能が装備されていて、当サイトの動画掲載ページでは先にテキストが表示され動画は遅延読み込みされています。これによりユーザーは読み込みを待たずにページの操作ができます。SEOページに適切なメタディスクリプション、いわゆる「サイト説明文」を指定する。リンクに簡潔で解りやすいテキストを設定し、リンク先の内容が把握できるようにする。シリウス2内蔵の画像ファイルサイズダウン機能ファイルサイズを小さくする2っの機能シリウス2のリサイズと圧縮[1] 一括リサイズ画像フォルダ内の画像の縦と横の大きさ自体を一括でまとめて調節できる。メリハリ優先で大きなサイズが必要な場合もある。後々での作業の場合は不鮮明な画像が発生する可能性がある。[2] 画像を圧縮し最適化させる画像のファイルサイズを小さくできる。シリウス2内蔵の圧縮機能より多機能で強力なソフトが存在する。画像フォルダを開いた画面シリウス2の一括リサイズ機能シリウス2の一括リサイズでは画像の横幅と縦幅の最大値を決めて、それを超える画像は全て指定したサイズに縮小されるという機能です。しかし同じ画像でもブラウザをプリントスクリーンにしたものや、スマートフォンで撮影した画像、スクショ画像、無料画像サイトなどからダウンロードしたものなど色々な種類があります。またそして使いどころによって必要な画像サイズは変わってきます。例えば画像サイズを大きく設定したいヘッダー画像や、逆にサイズが小さくて鮮明度を期待しなくても良い画像など様々な種類があります。なので私はシリウス2の一括変換に頼るのではなく、自分の感覚で調節しなければならない事もあると考えています。また、この一括変換はバックアップ機能もあるのですが、現在アップロードしているホームページの場合、後でこの機能に気づいて画像を一括変換してしまうと、明らかに鮮明度が不足する画像が発生する場合もあります。なので私は画像のサイズを決める際に「ジェイトリム」を使って 自分で画像の大きさをコントロールしています。バナーやヘッダー画像など、ここぞという時はファイルサイズが大きくなっても十分な幅を確保し鮮明度を優先しています。そして鮮明度を期待しなくてもいい画像は極限までPixel数を落としています。色々試した結果このように場面によって使い分けした方が総合的にみてサイズは落ちています。その結果ページスピードインサイトでは高得点を獲得しています。私が使っているファイルのサイズを落とすためのお勧め無料ソフト画像加工修正ソフト JTrim 窓の杜ダウンロード画像の圧縮してファイルサイズを落とすシリウス2で画像の管理画面から「画像の最適化」を選択すると、開いたタブにホームページ内で利用しているすべての画像ファイルが一覧表示され、それらの画像を一括で圧縮する事ができます。私の場合はこのシリウス2の圧縮機能は使っていません。当サイトの画像の最適化方法は、上記のソフト「ジェイトリム」でサイズの加工した後すぐに、ブラウザ上で使える画像圧縮ソフト「I love IMG」でファイルサイズを落としています。上記どちらも圧縮方法が非可逆圧縮であり画像のデータを書き換えてしまうため、元の画像に戻せない圧縮方法です。 I love IMGは画像の状態にもよりますが、シリウス2での圧縮の最大1.5倍程ファイルサイズが落ちる事もあります。このサイズダウンの幅は画像によって変化しますが、私がネット上で試したソフトの中で一番効果が大きいです。これは画像データ削除の圧縮設定によるものですが、劣化が気にならない範囲で、圧縮比が大きいのでこのソフトを使っています。また、I love IMGは画像の拡張子にかからず複数枚圧縮することが可能になっています。そして圧縮スピードが早く、さらに無料で使えるので何のデメリットもありません。このようにホームページ作成において画像処理の作業は、作成完了後の一括操作ではなく、作成するページごとに一枚ずつ最適化させるのが一番良いと考えていますシリウス2とオンラインソフトとの圧縮率比較元の画像プロパティ サイズ-279kbシリウス2プロパティサイズ-117kbオンラインツールプロパティ サイズ-97.3kb非可逆圧縮で一番バランスが良いお勧めオンラインソフト画像圧縮 I LOVE IMG オンラインツールページの更新日時を記述するページの更新日時の記載もユーザビリティに影響するサイトの更新日時をユーザーに把握して頂く事はユーザビリティーとしてプラス評価となります。シリウス2の独自タグに[公開日時・更新日時]の項目がありますので、「ページ送り」と連結させて「カスタム」に登録しておくべきです。ツールバー→タグ→シリウス2独自タグ→基本設定→[公開日時・更新日時]画像を完全に消す方法画像の居場所は3カ所存在するホームページのパフォーマンスの向上とはあまり関係ないのですが、サーバー上に不要なファイルを残しておかない方が良いです。長くホームページを運営していると画像の差し替えなども含め、ホームページのファイル量が増えてきてアップロードにも時間がかかります。シリウス2は「サイト生成したサイトファイル」をアップロードするため、完全にホームページ上からファイルを削除するには下記3つの場所それぞれで削除の操作が必要になります。そうしないとサーバーに残ってしまいます。シリウス2本体のファイル生成先フォルダのファイルアップロードされているファイル例えばシリウス2のツールバーの「画像」クリックで開く「画像フォルダ」内に存在している画像を消しても、サイト生成先には残っているのでアップロードする際にサーバーの中に入ってしまいます。なのでファイルを完全に削除するには3箇所全て削除する必要があるという事です。1-シリウス2本体画像フォルダ不要な画像を削除してサイト生成されないようにする。2-サイト生成先フォルダアップロードされないように不要な画像を削除3-サーバーフォルダ内imgフォルダをダブルクリックで開き不要な画像を削除
