[保存版] PageSpeed InsightsでWebサイトを高速化するまでのすべて。0点→90点へ改善！ 今日はGoogleが提供しているPageSpeed Insightsを使って、サイトの高速化・最適化を行うまでを紹介します。今回の、記事はめちゃ長いです。 表示スピードは訪問者離脱につながりますし、検索エンジンにも影響がある要素。早いにこしたことはありません。PageSpeed Insightsを使えば、あなたのサイトについてアクセススピードという点からみたチェックを行うことができます。 イリテクのサイトスピードは0点だった…PageSpeed Insightsでは、PCとスマホでページのパフォーマンスを測定してくれます。85点以上いけばパフォーマンス高の評価。ちなみにGTmetrixも有名です。 …ちょっとこれはマズすぎるでしょう。ありえません。早速バリバリ改善していきましょう。

CloudFlareのキャッシュについて調査メモ。 何かあれば、随時追加していく用。 HTMLファイルはデフォルトではキャッシュされない。 デフォルトだと、HTMLファイルはキャッシュされない。 詳しくはこちら デフォルトでキャッシュされるのはは、画像とかJS、CSSファイルとか。 詳しくは、こちら。 キャッシュする為には、「Page Rules」として設定する。 オリジンサーバーのレスポンスにCache-Control、Expiresなどのヘッダーが設定されていたらキャッシュされない。 詳しくは、こちら (9のとこ)。 Expiresに300（5分）とか入れてみたりしたけど、取り敢えずヘッダーが設定されていたら、キャッシュされないみたい。

アクセスが上がらない 申し込みが増えない これらの理由は「記事が少ない」「充実していない」「動線が悪い」 etc… 色々と原因はありますが、一つの要因としてホームページが重すぎること、いわゆる読み込みに時間がかかっていることが原因かもしれません。 先日、出張サポートにてアドセンスからの収入があるときから落ちたという相談を受けました。 Webサイトの読み込みスピードを確認できるツールでみてみると、確かに遅くなっている要因を発見。 そこで今回はこのような状況を改善するべく僕の環境でテストしたところ、読み込みにかかっていた時間が54%ダウンし体感でもかなり早いと感じるように！ ツールの使用方法からスピードの確認、原因の突き詰めと解消方法まで実例を交えてご紹介します。 まずは現在の状況と読み込み速度を確認 Googleが社内で使っていたページ高速化のツール、PageSpeed Insightsを使

.htaccess の書き方（リダイレクト編） .htaccess の書き方（アクセス制御編） .htaccess(Apache) の Order Allow,Deny(またはDeny,Allow)について .htaccess の書き方（スピードアップ編） .htaccess の書き方（設定変更編） Webサイトの表示速度を上げることはアクセス数アップにつながる。昔から人は３秒で判断すると言われており、実際に速度が原因で半数以上が離脱するというデータもある。３秒以内だから安心というわけではなく、速ければ速いほどユーザーの滞在時間は長くなるという調査結果がある。 Amazon：100ms 遅くなると売上が 1％ 低下した。 Google：読み込み時間が 500ms 遅くなることで、検索件数が 20％ 減少した。 Yahoo!：読み込み時間が 400ms 遅くなることで、ページが読み込まれる前

前回（SEO効果あり！ページ表示速度の改善方法）に引き続き、ページの表示速度改善を実例を含め紹介していきたいと思います。 GTmetrixを使って問題点を洗い出そう http://gtmetrix.com/　を利用し、チェック結果を元に最適化を進めていこうと思います。 URLを入力し、GOボタンで結果を表示します。このブログで確認したところ･････ ひどい！ Googleで【C】、Yahoo!で【D】です。もう少し上を目指してみようと思います。 Leverage browser cachingってのを改善しよう これ、何が問題だと言っているかというと、キャッシュの保存期間が短いまたは設定されていないから、設定しようぜってことです。 このブログはWordPressのため、W3 Total Cacheプラグインが有名ですね。とりあえず入れてみます。 結果：F(22)からB(86)に改善しまし

アナタはもう知っていますか？ 今日ご紹介する【Font Awesome】は、全519種類（※Version.4.3現在）のアイコンがセットになっている究極のアイコンフォント。 アイコンフォントはこの【Font Awesome】さえあれば、他は何も要らないんじゃないかと思うほどの膨大な量のデータが収録されています。 早速、公式サイトからデータをダウンロードしてきましょう。 【Font Awesome】：公式配布サイト ダウンロードしてきたZIPファイルを解凍すると「css」「fonts」「less」「scss」というフォルダに展開されます。 このうち、ウェブで使うのは以下の6つのファイル。 font-awesome.min.css fontawesome-webfont.eot fontawesome-webfont.svg fontawesome-webfont.ttf fontaweso

どうだろう？ 画像は多ければ多いほど、http リクエストの数が多くなる。 これから紹介する画像を軽くすること以前に、まずは「画像を減らす」ことにトライしよう。 見た目に工夫は必要となるが、他サイトで提供されるブログパーツやイメージバナーなども、ペタペタ貼りまくったりしないこと。 2. アイコンを Font Awesome で代用する次に、サイト上のメニューやナビゲーションで「一般的なアイコンを多用」しているサイトでは、Font Awesome アイコンの導入により画像からの置き換えができる。 当ブログでもメニューなどで使用しているが、他サイトでも、このスタイルのアイコンは良く見掛けるはずだ。 それもそのはず。Font Awesome はウェブ上で最も人気のアイコンフォント。 CDN 経由で読み込むこともでき、サーバーへの負荷はかからない。なぜか「FontAwesome は遅い」という人も

運営している他のサイトで導入済みなので、多分効果はあるだろうと。 導入したプラグイン1. BJ Lazy Load 導入プラグイン1は「J Lazy Load」です。 Webページの閲覧部分に応じて、画像を遅らせながら表示させるプラグイン。全ての画像を読み込ませないことでページの表示スピードをUPさせることができます。 基本的には 「プラグイン ＞ 新規追加 ＞BJ Lazy Load ＞今すぐインストール ＞有効化」だけでOK！ 直ぐにサイトの表示スピード改善に一役買ってくれます。 しかしLazy Load系のプラグインは画像を遅延表示させる代わりに、Googlebotが画像を認識しなくなってしまう弱さも。 そのためBJ Lazy Load のPHPコードを一部改変してあげる必要があります。 BJ Lazy LoadのPHPコードを改変 「ダッシュボード ＞ プラグイン ＞プラグイン編集

当ブログでも利用しているフリーのアイコンフォントが5.x系にバージョンアップした「Font Awesome 5」が登場しました。 これまでの4.x系と違って色々と変更しているようなので、ブログで利用しながら変更点を見ていくことにしました。 The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

写真はうちのみーこ。 サイト制作でよく使われる以下のライブラリ/CSSに依存したサイトを高速化してGoogleのPageSpeed Insightsで100点を取る方法を説明します。 Google Fonts jQuery Bootstrap FontAwesome 実際にどのぐらい速度に違いがあるのかデモページを設置しました。使っているウェブサーバーはさくらの共有レンタルサーバーです。 高速化前 https://tkosuga.jp/experimental/pagespeed-unoptimized.html 高速化後 https://tkosuga.jp/experimental/pagespeed-optimized.html リクエスト数が8件から5件に。ページの表示完了速度が1.41秒から0.54秒と38%に短縮されました。 諦めがちな PageSpeed Insights の

Twitter・Facebookのサーバーに一時保存されている古いキャッシュを更新する方法を紹介します。 「OGP」と「Twitter Card」の情報を再取得してサムネイル画像を更新できます。 ブログを運営していると、 […]

更新日: 2017年3月9日公開日: 2015年3月25日【要注意!!】WordPressのセキュリティ対策プラグイン6選 "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録 日本国内で生活していると身の危険を感じることはありませんが、ネットの世界は状況が違ってきます。WordPressをインストールし、ウェブに公開した時点で世界と自分のサイトがつながります。慈悲に満ちた世界であればこのような心配はいらないのですが、悪意あるネットユーザーも少なくありませ

YSlowスコアを100％達成するために残された項目は、「Use cookie-free domains」のみ。ブログの静的ファイルをCookie Free Domainに対応するだけです。Use cookie-free domainsはクリア不可能なのか？ 対策の概要 Cookie Free Domainに対応する事自体はそんなに難しいものではありません。wordpress自体はすでに対応するコーディングは既に仕込んであり、WP_CONTENT_URLとCOOKIE_DOMAINの2つの定数を定義し直すだけです。そのほかにCookie Free Domainにするためのドメインの準備（サブドメインでも構わない）と過去記事の画像URLの修正をする。 【Cookie Free Domain対応作業項目】 WR_CONTENT_URLの定義 COOKIE_DOMANの定義 Cookie Fre

ウェブサイトを作るうえで大切な前提にページの表示スピードがあります。内容はもちろん大事ですが、そこに至るSEOやUXの観点でも、ページの表示スピードは重要です。 ページスピードはグーグルの検索ランクの評価の一つになっています。 また、スマホがユニークアクセスやページビューの50％を超えるという最近の調査もあるように、サイトを訪れたユーザーの印象は大事です。表示スピードが遅いという悪印象を与えないよう、調整をしていきたいですね。 Defer parsing of JavaScript GTmetrixやPageSpeed Insightsなどで自サイトを調べたとき、下記のように修正項目が提示されることがあります。 JavaScriptに関する文言：Defer parsing of JavaScript Defer parsing of JavaScriptの意味は？ 詳細を見ると、JavaS

[レベル: 上級] この記事では、AMPを正しく設定できているかどうかを検証するための3つの方法を説明します。 Chromeのデベロッパー ツール 構造化データ テスト ツール Search Console それぞれを詳しく解説します。 Chromeのデベロッパー ツール Google Chromeのデベロッパーツールを利用すると、AMP HTMLのバリデーションをチェックできます。 つまり、AMPが定める仕様に従って正しくコーディングできているかどうかの検証に使えます。 手順は次のとおりです。 1. AMPページのURLの末尾に「#development=1」を付けてページを表示させる バリデーションをチェックするモードにChromeを入らせます。 たとえば、AMPページのURLが https://example.com/amp/validation.html なら、https://ex

以下、スペック上の違いを細かく見ていきます。 最低契約期間最低契約期間に関しては、完全にConoHaに軍配が上がります。 mixhostは現在、3ヶ月の最低契約期間があります。しかも、契約が短ければ短いほど月額料金もかなり高くなってしまうのがデメリットです。例えば、スタンダードプランは36ヶ月契約をすると月額880円ですが、3ヶ月契約なら月額1,380円も払わなければなりません。 一方でConoHaには最低契約期間が存在しません。むしろConoHaは時間単位課金を採用しており、1時間で使用をやめたら1時間の料金しかかかりません。非常に自由度が高いです。 CPUとメモリ 数字で見ると、mixhostはCPUが3コア、メモリが2GBなのに対し、ConoHaはCPUが2コア、メモリが1GBです。数字で見ると完全にmixhostの勝ちです。 ですが、前回の記事に書いたとおり、実際に両方のサービスを

メールアドレス登録 「お申込み」をクリック メールアドレス・パスワードを入力 コントロールパネルにログインする SMS認証 SMS認証＞認証ボタンをクリック 携帯電話番号を入力し、送信 認証コードを入力し、送信 すぐに携帯電話にショートメッセージが送られてきますので、それに記載された認証コードを入力します。 氏名・住所を入力 クレジットカード登録 クレジットカードを持っていない人はPayPal／コンビニ／銀行決済による前払い（ConoHaチャージ）に対応しています。 私の場合は試用のつもりでいますから、まとまった額をチャージする気にはなりません。 下手すると数円で使用終了！ 初期費用も掛かりませんのでクレジットカード払いにしました。 クレジットカードの情報を入力 セキュリティコードってのはカードの裏に書いてある３桁の数字です。 以上でアカウント作成は完了です。 まぁ特に特別難しいところはあ