【Les.39】サイトを軽くする方法② 高速でページ表示

サイトの表示をとことん高速化するためのページをつくりました。

サイトが軽くなれば離脱率も下がり、たくさんの人がページを見てくれます。

サクサクページ表示ができれば、とても気持ちが良いです!

ぜひ参考にしてください。
 


 

スポンサーリンク

まずは基本編を習得しよう

基本編を見ていない人は、基本編をまずやってみましょう。

これだけでも十分サイト表示が速くなります。

関 連 【Les.38】サイトを軽くする方法① 重いサイトを軽く

 

これだけで、40/10067/100 になりました!

 

まずはサイトの重さをチェック

さて、まずはサイトの重さをチェックしましょう。

GoogleからPageSpeed Insightsという重さチェックのサイトがあります。

関 連 PageSpeed Insights

 

ちなみにネット副業.comは改善前はこんな感じです。

40/100(!修正が必要)

60/100以上だと軽いサイトという評価になります。

 

アイコンを画像からCSSに変更する

サイトではデザインのために、いろいろなアイコンを使っていると思います。

私も以前はこの画像アイコンを使っていました。

 

そして、今使っているのがコチラ

関 連

 

見た目はほぼ同じですよね?

同じでも、上は画像、下はCSSで作ったデザインなのです。

画像の場合はhttpリクエストが増えるため、ページ表示が遅くなります。

ですので、画像の数をとにかく減らすこと。

これが大切です。

画像の数をとことん減らす方法がCSSスプライトという、1つの画像にたくさんの画像を貼り付け、表示するときに位置を指定して表示するやり方です。

 

アイコンにFontAwesomeを使う

CSSでデザインが難しい人は、FontAwesomeをつかってみましょう。

FontAwesomeのアイコンは、画像ではなくCSS3のWebフォント機能を使って表示できるテキスト(文字)なのです。

関 連 FontAwesome

 

画像の背景を削る

ユーザビリティーを上げるためには、やはり画像の使用は仕方ないと思います。

このサイトでもアイキャッチのために、たくさんの画像を使っています。

画像の大きさを減らすために、圧縮はもちろんのこと、画像の背景を削って白色にしてみましょう。

そうすることによって、画像の大きさがかなり減ります。

 

日本語URLからローマ字URLにする

日本語URLを使っている人はURLが長くなってしまうので、ページ表示に不利になってしまいます。

内部リンクをたくさん貼っているまとめページなどでは、URLだらけになってしまうので、ローマ字や英語表記に変更することをおすすめします。

とても時間がかかる作業ですが、ページ表示にはとても有利になります。

 

ソーシャルボタンを減らす or 非同期表示にする

アクセスアップに必要なソーシャルボタンはJavaScriptのため、表示に時間がかかってしまいます。

Google流入だけを目指している人は良いですが、SNSからの流入も目指して行きたい人は、ソーシャルボタンを減らす or 非同期表示をやってみましょう。

非同期表示にすれば、ページの表示とは別にソーシャルボタンの表示をするため、ページの表示にJavaScriptが影響しません。

詳しくは、このサイトで紹介しています。

関 連 JavaScriptで非同期に取得する方法まとめ

 

他のJavaScriptを/bodyの直前にする

アナリティクスなどで使用するJavaScriptは、通常head内に貼り付けますが、問題なければ/bodyの直前に貼ってみましょう。

/bodyの直前に貼ることによって、ページ表示に最後にアナリティクスのJavaScriptが作動するので、ページ表示への影響がなくなります。

他に使っているJavaScriptがあれば、bodyの最後に貼ってみましょう。

 

これをすべて行なうと

もともと40点だったこのサイトも、これらの全てを行なうことによって84点になりました。
(最初のはモバイル表示でしたが・・・)

あまり極端にやりすぎると、手間がかかりすぎたり、利便性が悪くなったりするので

あくまでユーザビリティーを考えて行いましょう。

 

次記事 【Les.40】アクセスアップの秘訣①

 
 
ネット副業.comトップへ

コメント