マークアップエンジニアの中村です。
Webサイトにとって表示速度というのは避けては通れない問題です。
「コンテンツの内容・デザイン」と「表示速度」のバランスは切っても切れない問題でそのバランスの取り方がWeb制作では重要になってきます。
専門書によれば「Webページの読み込みに3秒かかると、53%が離脱？」なんて書かれてましたが、3秒くらいじゃ離脱しない我慢強い私でも、速いに越した事はないと考えます。
私の経験からして表示速度の遅さに大きく関わるのは3つだと感じています。
・重い画像（1MB以上のjpgやpng）
・SNSや動画の読み込み（YouTubeやFacebookの読み込み）
・日本語のGoogleフォントの読み込み
大体この3つの対処とlazyloadとキャッシュ対応をすれば、ほとんどのサイトは
GoogleのPageSpeed Insightsでも緑色を示してくれると思います。
逆に言えばこの3つがある以上、絶対に速度は速くなりませんので、対処するなり、本当にそのコンテンツや仕様が必要か検討する必要があります。
その「対処」として代表的なのが「圧縮」です。
主に大きくて重い画像の圧縮、あとはCSSやJavaScriptのMinify(ミニファイ：ソースから改行やコメントを除きファイル容量を減らす事)になりますが、正直CSSやJavaScriptのMinifyで速度が大きく変わるというのは実感としてないです。もちろんしないよりした方がいいんですが。
というわけで今回は画像やファイルの圧縮に使えるソフトをいくつか紹介します。
【画像圧縮】
・Antelope (Windows用フリーウェア)
https://boldright.co.jp/products/antelope/
Windows専用ですが、ドラッグ&ドロップしたらボタン一つで変換でき設定変更も簡単で使い安いソフトです。
・ImageOptim (macOS用フリーウェア)
https://imageoptim.com/mac
こちらはmacOS用ですね。使い方・機能はAntelopeとほとんど同じかと思います。
・TinyPng(Windows & macOS)
https://tinypng.com/
こちらはソフトでなくサイトになりますね。パンダさんが有名で使ってある人も多いのではないでしょうか？こちらもドラッグ&ドロップだけで圧縮できるので簡単です。
・Imsanity（WordPressプラグイン）
https://ja.wordpress.org/plugins/imsanity/
こちらはWordPressのプラグインになります。ちょっとビジュアルが怖いですが、使いやすいプラグインです（笑）アップロードする画像のサイズの頭打ちを指定する事で、それより大きい画像をアップロードしたら、自動で圧縮してくれます。
画像サイズなどにあまり理解のないクライアントが記事を更新したりするような環境で設定しておけば、デジカメで撮った横6000pxあるような画像をバンバンアップされたりした際にリサイズし、サーバーの負担を和らげてくれます。
一応コードファイルのMinify用サイトも紹介しておきます。
【CSS】
https://syncer.jp/css-minifier
紹介するまでもないくらい有名でしょうが（笑）
「縮小前のコード」にCSSをコピペして下の「Minifyする」を押したら右の「縮小後のコード」にMinifyされたコードが表示されるのでコピーするだけです。
こんなサイトもあります。
【JavaScript】
先ほどのCSSMinifyと同じ方が作成されたものかと思いますが、使い方も同じです。
https://javascript-minifier.com/
こちらも同じくこんなサイトもあります。
【PHP】
こちらはPHPをMinifyしてくれるサイトですが、他にもCSS、JavaScript、HTMLなどもいけるオールインワンなのでここだけ使ってもいいかもしれません。
以上、皆様のWebサイトの高速化のヒントになればと思います。
