dev.toに匹敵する速度を出せるWordPressテーマを開発した話 - Qiita
本日、無料WordPressテーマ Godios. をリリースしました。 公式サイトを見ていただけるとわかると思うのですがページが一瞬で遷移しています。 どうでしょう、dev.toと同じくらい速いんじゃないでしょうか。 この記事ではテーマを高速化するにあたって用いたテクニックを書いていきたいと思います。 圧縮 テーマに含まれている画像・CSS・JSファイルの圧縮。 画像はOptimizilla・TinyPNG、CSSはCSS Minifier、JSはJSCompressを使用しました。 CSS・JSファイルの遅延読み込み レンダリングをブロックするファイルが大量にあると表示が遅くなりますので、JSファイルはdeferまたはasync属性を付与し、CSSファイルはインライン、またはJSで非同期に読み込んでいます。 無駄なSQLクエリを減らす データベースへのアクセスが多いと負荷が掛かる上、速
Page Speed Insightsスコア0から83に上げた方法を公開します〜高速化でSEO強化〜 | きむおばブログ
Page Speed Insightsスコア0から83に上げた方法を公開します〜高速化でSEO強化〜 このブログではアフィリエイト・アドセンス広告を利用しています 当ブログでは、アドセンス・アフィリエイト広告を掲載しています。 消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。 目次（読みたいところへジャンプ！） WordPressで作成したブログのスコアが０とは想定外 今まで、WordPressで企業サイトなどを作成したことはあったのですが、自分のブログを作ったことはなかったんです。WordPressとは年単位のお付き合いだったのに… １週間前にふと思い立って、ブログを作りはじめました。あわよくば、広告収入も狙いたいという欲にまみれているので、アメブロなどの無料ブログには全く興味はなく、独自ドメインを取得してWordPressでのブ
表示速度が“爆速”なサイト、相次いで登場 その背景は
ページの読み込み速度が“爆速”のサイトが相次いで登場している。2017年後半、日経電子版がリニューアルし「表示速度を従来比2倍に」と発表した他、米国のプログラマー向けコミュニティーサイト「dev.to」の表示速度が「速すぎて不安になるレベル」と話題を呼んだ。米Googleによれば「モバイルサイトでは読み込みに3秒以上かかると訪問者の53％が離脱する」といい、表示速度の改善が「長く滞在してもらう」一助になるようだ。 こうしたサイトが利用しているのがCDN（Content Delivery Network）という技術だ。なぜ速くなるのか、CDNを提供しているファストリー（米Fastly日本法人）のチュクロ・ダグ代表取締役、松田未央シニアセールスエグゼクティブに聞いた。 CDNの基本的な仕組みは？ ユーザーがインターネットを経由してWebサイトなどコンテンツを見に行くとき、ユーザーとコンテンツの
WordPressを高速化する12の方法 – 表示速度を上げるテクニック
サイトの表示速度を上げるメリット 読み込み速度を上げることには、大きなメリットがあります。 メリット1：ユーザービリティの向上 Googleの公式調査によると、モバイルページにおいての「読み込み速度の遅延」と「直帰率」の関係は以下のようになるそうです。 読み込みが1秒から3秒になると、直帰率は32%上がる 読み込みが1秒から5秒になると、直帰率は90%上がる 読み込みが1秒から6秒になると、直帰率は106%上がる読み込みが1秒から10秒になると、直帰率は123%上がる これは致命的に感じられますね。もっと言うと、読み込み速度の低下により直帰する訪問者は、ただの他のページを見てくれないだけではなく、すぐに帰っていること予想されます。「3分滞在して直帰」ではなく「5秒待って遅いから直帰」という状態なわけですね。 現在のGoogleは検索順位を決めるうえで、検索ユーザーの動きまで見ている説もあり
阿部寛のサイトを高速化する - Qiita
ちまたで阿部寛のサイトが早いと話題になってます。 dev.toと阿部寛のホームページどっちが速いですか？ dev.toと阿部寛のホームページについてちゃんと計測させてくれ 阿部寛のサイトはベストを尽くしてるのか？ それを調べるために、阿部寛のサイトを高速化させてみたいと思います。 目指すべきスピード 最速はローカルのファイルへのアクセスだと思うのでこれを目指したいと思います。 file:///C:/abe_hiroshi/index.html ChromeのDeveloper Toolでレンダリング完了が「173ms」でした。 まぁここまでは無理だな… 阿部寛のサイトはどんなもん？ 速度はwebpagetest.orgで測ってみます。 レンダリング完了時間は「359ms」です。はえーな S3でホスティングしてみる サーバーを立てるほどでもないので、S3でWebホスティングしてそこにhtml
「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは
「爆速すぎて笑う」「速すぎて逆に不安になるレベル」――「dev.to」という米国のWebサイトの表示速度が異常に速いと、ネット上で話題だ。なぜ速いのか、サイト創設者のベン・ハルパーンさんがサイト内の記事で説明している。 2016年にオープンしたdev.toは、プログラマーが情報を交換したり、議論したりできるコミュニティーサイト。トップページにはユーザーが投稿したブログ記事のタイトルやコメントが、SNSのタイムラインのように並んでいる。このトップページの表示にかかる時間、各記事をクリックしたときのページ遷移が“一瞬”なのだ。 なぜ速いのか。ハルパーンさんが17年2月に投稿したブログ記事によれば、米Fastlyが提供するCDN（Content Delivery Network）を活用している。CDNは世界中にキャッシュサーバを分散配置し、ユーザーごとに最も（ネットワーク的に）近いサーバにキャッ
リニューアルした日経電子版が高速すぎてヤバイ件｜こんぴゅ
日本経済新聞は国内を代表する経済誌だ。その電子版はwebでの継続課金を大成功させ、いまや50万以上の有料会員を擁するモンスターサイトだ。 その日経電子版が11月6日に全面リニューアルしたのだが、公開後、web業界がにわかにざわついた。表示速度が爆速だったのだ。日経公式もモバイルで2倍の表示速度を達成したと堂々と宣言していた。 webサービスは継続率こそ神KPIで、その継続率には速度が大きく影響する。 これはチェキらないとヤバイと感じ、友人のkitakさんとスピードの秘密を調査してみた。 Fastlyをコンテンツキャッシュに使う殆どのデータはFastlyを経由して取得されていた。Fastlyは最近注目を集めているCDN（世界中にエッジサーバーを配置し、高速にコンテンツを配信するサービス）で、非常に高機能でユニークなサービスだ。 一般に、CDNはいったん世界中にコンテンツをばらまくと、それを無
ブログのページスピードの改善には、まずは画像のサイズ調整や圧縮作業から始めよう！ - 元『企業戦士』の1日1歩ブログ ~素晴らしき日常~
はじめに １．まずは自らの状況を確認して見よう！ ２．筆者のブログを参考にすると ３．画面のサイズの確認と調整の方法は ４．画像の圧縮方法は 最後に 追記:Hachi32TKさんのコメントを受けて 再追記：更に画像の選定から高さも改善を加えた結果 はじめに ブログのカスタマイズに集中すると、どうしても凝ってしまい、デザイン性が上がる一方で、ページ自体が重くなりがち。 読み手に対して「読みやすいデザイン」を求めたにも関わらず、ページスピードが遅くなることで、読みづらい環境になってしまったら、本末転倒です。 そして“ページの読み込みの遅さ“はSEO対策としても、評価は低くなる傾向があり、そもそも検索上位に上がりにくくなることもしばしば。 カスタマイズの取捨選択をして、減らす箇所を見つけるのも大事だと思いますが、「まず、どこから手を付ければ？」とお悩みの方は『画像のリサイズや圧縮』から始めてみま
表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命
[レベル: 初・中・上級] 特にモバイル向けサイトでは、ユーザー体験改善のための最優先事項として”スピードアップ”が挙げられます。 現状のモバイルサイトがいかに遅く、遅い表示速度がどのくらい悪い影響をユーザー体験に与えているかを調査した結果を Google が公表しました。 「完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる」「表示速度が1秒から7秒に落ちると、直帰率は113%上昇」など興味深いデータが出ています。 モバイルページは遅い、遅いとユーザーは立ち去る 新しい調査による次のような結果に Google はまず言及しています。 モバイル向けのランディングページが完全に表示されるまでにかかる時間は22秒 完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる 全般的に、とにかくモバイルページは遅いということが明らかです。 にもかかわらず、モバイ
遅いと感じたら導入！WordPressのページ表示速度を高速化できるプラグイン5選
遅いと感じたら導入！WordPressのページ表示速度を高速化できるプラグイン5選 【遅いと感じたら導入】WordPressのページ表示速度を高速化できるプラグインを紹介した記事です。無料で使えるプラグインから、有料の高機能プラグインまで紹介。まずは自社サイトの現在のスピードを把握してから検討。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 WordPressは、HTMLで構築したサイトと違って、動的にページを生成する仕組みです。そのため
CSSの読み込みを遅延させるJavaScriptコード
JavaScriptで外部ファイルの読み込みを遅延させる PageSpeed Insightsでサイトの速度チェックをすると、次のような提案が出てくることがあります。 スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する これは、headで読み込んだJavaScriptやCSSのファイルがコンテンツの表示を遅らせているためです。 ファーストビューに影響が出ないCSSは、コンテンツの描画後に読み込ませた方が良いでしょう。 ということで、外部CSSを読み込むタイミングを遅らせて、コンテンツの表示を速くしました。 当サイトではメインのCSSをインライン化しているのですが、外部ファイルも読み込んでいます。 使っているのは、Google FontsとFont AwesomeのCSSです。 導入方法 あらかじめGoogle FontsとFont A
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
サイトを37倍に高速化した7つの手法 - オールアバウトTech Blog
今回はオールアバウトのnnmrが弊社サイトAll About Japanの速度を高速化した経緯についてまとめます。 All About Japanとは そもそもAll About Japan（以下AAJ）とは何かといいますと、弊社が提供している訪日外国人向けの日本紹介サイトです。 外国人向けサイトで、英語、中国語（繁体字）、中国語（簡体字）、タイ語、韓国語の5か国語に対応しております。 「Anime」「Izakaya」「Ninja」といったような特集や、実際に観光する人向けのモデルルート記事が特色です。 ■ 特集 (url : http://allabout-japan.com/en/tag/sushi/ ) ■ モデルルート記事 (url : http://allabout-japan.com/en/article/222/ ) 技術的な紹介 LAMP環境です。 （サーバー構成は後に記述
表示の遅いブログは損している！ブログを軽量化して訪問者を逃さない誰でもできる対策法 - Life is colourful.
あなたのブログの表示スピード、遅くないだろうか？ 最近自分がブログを始めたこともあり、他人のブログを見る機会も増えたのだが、すごく気になることがある。ブログが表示されるまで待たされることが多々ある。 企業のビジネスサイトなどは専門のWeb屋が作っているので、さまざまな施策で表示速度が最適化されている。でもブログは違う。Webとは無縁の色んなジャンルの人が運営側にいる。 ブログはコンテンツが最重要だけれども、表示スピードが遅いといくら良質な内容でも、それを見る前に読者は帰ってしまう。誰もが欲しがる超高品質な商品を店頭に並べているのに、店舗の玄関前一面に大量のマキビシが撒かれているようなものである。 大きなお世話かもしれないが、ブログ運営者は今一度見なおして欲しい。 画像（写真）に気をつけて 特に気になるのが、ページ内（ヘッダーやサイドバーも含む）に配置されている画像。とくに写真は重くなりがち
確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開 - コムテブログ
TL;DR レンタルサーバでの運用を止め、VPS に移行し、Apache の制約から開放されるため軽量・高速な Nginx に変更し、テーマをカスタマイズし軽めのリニューアルをしました。随分と早く使いやすくなったので、会社 HP とコムテブログに行った高速化への手順を全公開します。 今回のリニューアルに伴い、今回行った高速化処理。ちなみに会社 HPはこちら。 PC は 96 点、アナリティクスとメインの CSS を外せば 100 点が出そうでしたが断念。 Pingdomでは 97。ブログの方は、アドセンスや外部読み込み（こちらで調整できないため）で、どうしても遅くなってますが、これに近づけるようにしていきたいです。 なにはともあれ、サーバのスペックそのものを変えないと駄目だということでさくらの VPS 4G（SSD 4G）をチョイス。コーポレートサイトなら 2G くらいでもよいですが、ブロ
“いきなり1000倍高速”になるWordPress高速化チューニング済み仮想マシン「KUSANAGI」とは何か
“いきなり1000倍高速”になるWordPress高速化チューニング済み仮想マシン「KUSANAGI」とは何か：とにかく速いWordPress（11）（1/3 ページ） エンタープライズ用途での利用が増えている「WordPress」の高速化チューニングテクニックを解説する本連載。今回は、これまで実践してきた高速化テクニックなしに、“いきなり1000倍高速”を実現できるチューニング済み仮想マシン「KUSANAGI」を活用するための「7つのポイント」を紹介します。 連載バックナンバー WordPressは、これまで紹介してきた高速化チューニングを実践することによって、1秒当たりの同時アクセス数（Requests per second）が、デフォルトのLAMP（Linux、Apache、MySQL、PHP）環境の「11.24」から、Nginx＋HHVM 3.12構成で「205.20」に、さらにN
段田商会をKUSANAGI for ConoHaに引っ越ししました。 | 段田商会
サーバーをKUSANAGI for ConoHaに引っ越しました。 元々、共有サーバーを借りていたのですが、たまに５００エラー起きたりと動きが不安定でした。 また、最近はおかげさまでアクセスも増えてきたので、引っ越すことにしました。 月900円から始めることができ、スケールアップも可能で、周りの評判もよかったので、 サーバーはConoHaにしました。 そして、忘れちゃいけない、ConoHaのマスコットこのはちゃん！ かわいいは正義！ そして、ConoHaを選ぶのにもう一つの要因がありました。 それはKUSANAGIが使えることです。 超高速WordPress仮想マシン「KUSANAGI」（以下「KUSANAGI」）は、プライム・ストラテジー株式会社が開発・構成する、WordPressを高速に動作させるための仮想マシンおよびそのイメージです。WordPressの実行時間3ミリ秒台、秒間100
モバイルページの高速化！ AMPの利点と対応HTMLの作り方 - ICS MEDIA
AMP（Accelerated Mobile Pages＝アンプ）とは、2016年2月にGoogleが導入した、モバイル端末（スマートフォン・タブレット）でのウェブページの表示を高速化するためのプロジェクトです。AMP対応のウェブページは従来に比べ平均4倍程の速度で表示できるため、さまざまなメリットがあります。 本記事ではAMP導入のメリットと作り方を紹介します。AMP対応することによってアクセス数が増大した話もありますので、記事のシリーズで紹介します。 導入の利点① ページ表示が超高速になる モバイルブラウザで、AMPページにアクセスしたときにものすごいスピードでウェブページが表示されます。読み込み待ちのイライラがなくなるため、ユーザーストレスの軽減につながります。 導入の利点② 検索結果でAMP（稲妻マーク）が表示される モバイルでのGoogle検索で、AMP対応のウェブページは稲妻マ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dev.toが与えたインパクト
Cygamesを支えるPHPと、その高速化の取り組み
