Skip to content

60-minutes.biz

– 時間を縛ることで、時間を味わってみる –

今すぐ簡単にできる!サイトを高速化する為の5つの方法をご紹介。

Posted on 2014年8月19日2014年9月3日 By ハマケン
このエントリーをはてなブックマークに追加
Tweet


こんにちわ、ハマケンです。
お盆の間にちょっとサイトの表示速度を早くしたいなと思い、ちょこちょこ調べて改善してみたら
なんとかPageSpeedGradeでAになる事ができました。
改善前のキャプチャを忘れていましたが、Cランク69%って所でした。

YSlowの方がまだまだなので、頑張らなきゃなりませんがとりあえず体感的に2秒は早くなった気がするのでとりあえず・・。

と言う訳でやった事をご紹介。
チェックサイトは恒例GTmetrixですね。

GTmetrix | Website Speed and Performance Optimization


Advertisement


やったこと

  1. 不必要なプラグインを精査、削除しました。
  2. 記事内サムネイルをリサイズ処理して表示してたけど、100%表示に変えました。
  3. 記事内のimgタグにwidthとheightを明記しました。
  4. ソーシャルボタンのJSを遅延読み込みに変更しました。
  5. htaccessファイルにキャッシュ設定を追加しました。

とこんな感じです。

不必要なプラグインを精査、削除しました。

WordPressを触っていると切っても切れないプラグイン。

でもプラグインを追加すると自動的にヘッダーにJSとかCSSが追加されるケースが大半なので、使えば使うほど重くなっていきます。と言う訳で便利だと思ってたけど、そう言えば使っていないプラグインを洗い出して精査しました。

GTmetrixの「Defer parsing of JavaScript」らへんを見ると、大体どれが重いのかが解ります。一番大きかったのは、TOPに置いていた画像スライダーのJS。

画像自体にリサイズの処理もかけていたので、重くなっていた様です。
あと使っていないプラグインも次々に停止しては、サイトをキャッシュクリアしてリロード。
無事に動いている事を確認しつつ、削除していきます。
結果4つ位削除できました。

記事内サムネイルをリサイズ処理して表示してたけど、100%表示に変えました。

以前はTOPでデキルだけ沢山の記事を表示させたいなと思い、記事サムネイルを縮小して一覧性を持たせる形で表示するデザインにしていたんですが、この縮小がまぁまぁ重いそうで。。

なので、トップページのデザインを初期の60-minutes.bizに戻しました。
記事の一枚目の画像を100%表示にしました。
沢山観れるより、軽い方がストレスは少ないので、未練なく変更!!

記事内のimgタグにwidthとheightを明記しました。

imgタグはwidthとheightを面倒くさくて書いていなかったのですが、レンダリングが遅くなっちゃうから指定した方が良いよとのことだったので、直近の数記事だけではありますが、imgタグにサイズ指定を入れました。

同時にブログテンプレも修正して完了。
この時点でBに格上げされています。

ソーシャルボタンのJSを遅延読み込みに変更しました。

60-minutes.bizではFacebook,Twitter,pocket,はてぶの4つを記事の上下に設置しています。そう言う事もあって、結構レンダリングが終了するまでに時間がかかっていました。

が、この4つを遅延読み込みに変更しました。
まず4つのソーシャルボタンのJSを全てbodyの終了タグ直前に挿入します。

次に各JSに対し、遅延ロードの記述を行います。
記述の仕方はこちらが解り易かったですよ。
Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ | Cappee Design

<script type="text/javascript" async="async">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

htaccessファイルにキャッシュ設定を追加しました。

さて、最後です。htaccessのキャッシュ設定についてはこちらが解り易かったです。
Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法 | OXY NOTES

60-minutes.bizはサクラ使ってるので、mod_expiresが使えます。
キャッシュの設定はこんな感じに。

  ExpiresActive On
  ExpiresByType text/css "access plus 3 weeks"
  ExpiresByType text/javascript "access plus 3 weeks"
  ExpiresByType application/javascript "access plus 3 weeks"
  ExpiresByType application/x-javascript "access plus 3 weeks"
  ExpiresByType image/gif "access plus 6 months"
  ExpiresByType image/jpeg "access plus 6 months"
  ExpiresByType image/png "access plus 6 months"

まとめ

全体的にやり方が解ってしまえばそんなに作業時間はかかりません。
おススメはソーシャルの遅延読み込みとhtaccessのキャッシュ設定ですね。
結構即時性があるのでやってみては如何でしょうか。

それでは。
さーて次はYslowでAランク目指すぞー。

このエントリーをはてなブックマークに追加
Tweet

WEBページ作成系の記事 Tags:wordpress, サイト作り

投稿ナビゲーション

Previous Post: モバイル決済のSquare(スクエア)が京都で実店舗200店舗以上を巻き込んだイベント「COOL KYOTO」を開催中。
Next Post: もはやPCサイトをスマホ最適化するより、スマホサイトにPC最適化の時代だろうと。

More Related Articles

今が踏ん張り時。今週のアクセス報告 Mar. 15th – 21st. WEBページ作成系の記事
wordpessのプラグイン「Head Cleaner」が気持ちよすぎる件 WEBページ作成系の記事
Googleが『検索アナリティクス』をWEBマスターツールでリリース。 WEBページ作成系の記事
ちょっとした変更でPV/セッションと直帰率が劇的改善を魅せた話。 #wordpress #css #webdesign WEBページ作成系の記事
CODEPENで見つけたスタイリッシュすぎるCSSエフェクトをご紹介。 WEBページ作成系の記事
デザイナーの方へ!無料で使えるフラットアイコン7選! WEBページ作成系の記事

検索

最近の投稿

  • 中学受験。偏差値30台から1年で60台まで引き上げる方法 | 夏まで編
  • 中学受験。偏差値30台から1年で60台まで引き上げる方法|塾選び編2
  • 中学受験。偏差値30台から1年で60台まで引き上げる方法|塾選び編
  • TikTokの話は米中貿易戦争の一環に過ぎない。
  • 簡単すぎる!画像サイズを超絶小さくする方法
  • 約4ヶ月の在宅で解った、在宅アイテムBest10
  • コロナを通して知った、フルライフと言う生き方。
  • 【永久保存版】最高の #おうちご飯 をサポートする一流のシェフレシピ8選。
  • 今年も梅雨がやってくる。コンビニ傘からのアップデート「アイカサ」を利用してみてはいかがでしょう?
  • 緊急事態宣言が解けた後に小売業者がやらなくてはならない3つの事。

アクセスランキング

  • SoundCloud(サウンドクラウド)で商用利用可、改変可の音源を探す手順...
  • 【知らなかった】161年前の今日。浦賀に来た黒船の実写真があると知って俺の中で超...
  • Stores.jpが25,000店舗を突破。ショップ一覧を検索する方法も公開!...
  • ウィルス予防に知っておきたいマスクの知識を調べさせていただきました。...
  • 2020年、アパレルのオリジナル商品を作るならチェックしておきたいサイト4選 #...
  • 【動画】まるで「みえっちん」!特定のメガネからしか見えないディスプレイが完成!...
  • 【動画】コカ・コーラのOpen Happinessがカッコよすぎて、なんかヤル気...
  • 知っておきたい検索コネタ12個とStores.jpのショップ一覧を検索表示する方...
  • 仕事とは自分の仕事を無くすこと。上司に学んだ、とても大切なメモ。...
  • オリジナル商品が簡単に自分で作れるサービス7選!...

COVID-19 特集

グッと来た動画PR達

全ての小売店に捧ぐ

Copyright © 2023 60-minutes.biz.

Powered by PressBook Blog WordPress theme