一時期、webサイトの高速化にハマってました。2017年9月2日このサイトは、自作したWordpressテーマを使っています。これを作っているときに高速化にハマりました。このサイトのスピードは最終的にこんな感じに。この点数が高いほど早い。(いまは別のテーマを使っています。)https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fuetani33.net&tab=mobileスピードをあげるだけならもっといけるんですが、テーマの改造しやすさ・利便性を考えるとこうなりました。アナリティクス入れるだけで、-1点になるので100点で運営するのは事実上不可能ですね。高速化で色々とノウハウを培ったので、今日はそのwebサイトの高速化について。WordPressブロガーの場合:素人ができることは少ないので、サーバーの機能かプラグインを利用しようQ:お前のサイト本当に早いの?A:早いです!自信を持って答えます。Insightsを使って色んなサイト測るとわかるんですが、30〜50点ぐらいのサイトを多く見ます。対策して50〜70点。本気でやって80点以上かなと。※追記:記事書いたときは自作テーマだったのですが、今は別のテーマ使っています。一例:首相官邸https://www.kantei.go.jp/と言う具合に、少なくとも遅くはないのは伝わるかなと。Webサイトを高速化するのにポイントは3つ高速化のポイントは大まかに3つあります。画像をできるだけ軽くして、不用意に大きな画像を使わないgzip圧縮・キャッシュを有効化ここがめちゃくちゃ重要です。画像が一番重いので、画像に気を使うだけでWebサイトはかなり高速化されます。WordPressなら、画像をアップロードする前に必ず軽量化しましょう。Optimizer?あれそこまで軽量化されてない気がするので、Tinypngで軽量化が一番軽くなるなと。軽量化しすぎて画質が怪しくなりますが。html/css/jsのファイルソース側で高速化いわゆるコーディング・フロントエンド側での対処について。ソースを圧縮して1つにまとめるいわゆる軽量化。圧縮して記述量を短くした方がファイルの容量が軽いので、スピードも早くなります。jqueryのプラグインを見ると〇〇.min.jsと言うのがあったりしますよね?あれはこれに配慮しているわけです。css・jsは1つのファイルにまとめましょう。いうのも1つの外部ファイルを読み込む時にhttpリクエストと言うものが発生しています。httpリクエストが1つ増えればサーバーへの通信回数が1回増えます。そこで時間がかかるので、css・jsで複数ファイルがあれば1つのcss・jsにまとめた方が早いのです。圧縮とファイルをまとめる方法gulpなどのタスクランナーで自動で圧縮ファイルを出力するようにするsassを使い、圧縮してcssを生成するようにする(cssのみ)koala・CodekitなどのGUIコンパイラーを使うあたりかなと。エックスサーバーやmixhostならサーバー側の機能で1つにまとめて圧縮できるようです。エックスサーバーならmod_pagespeedでしょうか?当サイトは、エックスサーバーですが、サーバーに負荷をかけたくないのでmod_pagespeedは使っていません。全部手動でやってます。私はkoalaを使っています。シンプルで使いやすく無料でwin・macで動作するので導入ハードルがかなり低めです。gulpは環境作るのがめんどくさい・・・。bracketsでsassを使う方法と設定を初心者向けにまとめてみる【koala使います】css・jsは非同期読み込み普通にcssやjsを読み込むと、読み込みが終わるまでブラウザに何も表示されません。非同期読み込みをすればcss・jsを読みこまなくてもページが表示されます。レイアウトに重要でないcss・jsは非同期読み込みでやると高速化します。cssの非同期読み込みのやり方loadCSSと言うjsのプラグインを使うか、以下の記事のソースコードがいいかなと。freeの方のソースを使わせてもらうのがいいと思います。jsの非同期読み込みのやり方こっちは簡単です。読み込む時に、ansyc・deferをつけてあげましょう。defer></script>ansyc・deferそれぞれ意味が違います。ansyc:複数のソースがansycだったら順番がランダムで読みこまれるdefer:書かれた順番に読みこまれる(上の方から読む)ソースを1つにしてしまえばどっちを使っても問題ないのかなと。このサイトは、jsだけ非同期で読み込んでいます。css全て非同期にするとレイアウトガタガタの状態で表示されてしまうので、それは避けたいなと。完璧にやるなら、cssでhtmlへインラインで骨組みを読み込み、残りを非同期読み込みさせます。このテーマは日々改造しているので、メンテナンスが面倒になることを避けたいので、cssは非同期読み込みにしていません。画像をできるだけ軽くし、適切なサイズで一番の削減ポイントです。画像を適切なサイズできっちり軽量化させましょう。軽量化は、Tinypngを使ってます。無料で使えてブラウザで完結し、かなり圧縮してくれます。海外のツールって動物のキャラクター多いと思うの僕だけですか?それも微妙に可愛くない・・・。Q:適切なサイズって?A:Webサイトで表示される大きさよりも大きい画像を使わないこと。WordPressだとよくありますが、表示されているサイズよりも大きな画像を使っている場合があります。Insightsで一番怒られます。笑なので、適切なサイズの画像を使うように心が目ましょう。サイズが大きいならアップロード前にリサイズを。僕はTh-makerXでリサイズしてます。ドラッグアンドドロップの簡単操作なので、最強におすすめします。※Mac専用アプリなお、Th-makerXは画像の軽量化も一緒にできる優れものです。Macなら使って損しません。人によっては聞きなれない言葉かもしれません。ブラウザでサイトを開くとき、スマホやパソコンにサーバーからデータが送られてくるのですが、そのデータをgzipで圧縮して送信することができます。圧縮したデータの方が早く読み込めるよねという話。キャッシュは聞いたことがあるはず。過去に読み込んだサイトのデータをブラウザ常に保存して、同じサイトならそのキャッシュからデータを引っ張ってくることです。これの設定は、レンサバなら.htaccessから行います。私はエックスサーバーなのでエックスサーバーの場合の.htaccessを記載します。あった記述の下に追加で加筆しています。years"</ifModule>ここへ編集するときは、必ず元のバックアップを取るように。.htaccessの記述間違えるとサーバーが真っ白になってしまうので、不安ならエンジニアにやってもらいましょう。WordPressブロガーの場合:素人ができることは少ないので、サーバーの機能かプラグインを利用しようWordPressでブログをやっている素人の人は、自分でできることがかなり少ないです。サーバーの機能を利用する高速化のプラグインを使うサーバーの機能は、mixhostかエックスサーバー限定ですので、プラグインを使う方法が現実的かなと。高速化するならエンジニアに頼んでテーマやデータを調整してもらうの最強です。【読み放題】kindleアンリミテッドで実は技術書が読めるAmazonに、読み放題のkindleアンリミテッドがあるのですが、実は技術書もあります。3,000円とかが当たり前の値段だったりして結構高いのでkindleアンリミテッドで技術書を読むのも結構アリだなと思ってます。kindleアンリミテッドは月額980円するのですが、全部無料で読むことができるため、本を買うよりお得。月に1冊技術書を読むのなら、確実に得するので、本で勉強するのが好きな人は、kindleアンリミテッドに入るのがおすすめです。初回は30日の無料体験ができて微妙ならすぐに解約できるので、一度登録してみるのはアリなんじゃないかと。...bracketsでsassを使う方法と設定を初心者向けにまとめてみる僕愛用のテキストエディタBracketsでsassを使う方法について。「エックスサーバーを高速化したい。エックスサーバーオススメの理由エンジニア向け最近エックスサーバーから移行しました。