jQueryを高速に動作させるためのポイント５つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近東京にこなれてきたどうも僕です。何がこなれてきたって？電子マネーさ！東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ！コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ！ そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ！ jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね！開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ！ っというわけで、jQueryを使う上で気をつけたいポイントを挙げて
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
「全自動パラメータチューニングさん」は何であって何でないのか - 昼メシ物語
発表資料: 全自動パラメータチューニングさん // Speaker Deck ソースコード: https://github.com/mirakui/tuningsan これは何なのか ハッカソンイベント「Open Hack Day Japan」にて、24時間の制限の中で開発し、90秒でプレゼンテーションした作品です 2013/2/16〜2/18 にかけてヤフー株式会社で開催された、「Open Hack Day Japan」という大規模ハッカッソンイベントで開発しました。 上記のプレゼンテーションは発表で使用したものです。 Open Hack Day Japan - Yahoo! JAPAN 本作品は、全参加作品の中で唯一のコマンドラインツールであり非常に地味でしたが、ありがたいことに KLab賞をいただくことができました。どうもありがとうございます。 指定した1パラメータの自動調整によって
Webシステムのフロントエンド高速化で最初にやるべきこと - かみやんの技術者ブログ
前回のエントリーで、Dartの次は、TypeScriptを検証する。と書いたけど、なぜか自分のPCでは、VisualStudio for WebにTypeScriptのプラグインがインストールできなかったので、TypeScriptを使うことを諦めました。コマンドラインでコンパイルはできたけど、それでは型付け言語のメリットであるIDEによる補完や参照検索やリネームリファクタリングが効かないので。ちなみにプログラマのPCではあっさりインストールできたとのこと。がっくり。 というわけで、Dartを実戦投入することを決定してDartで開発をしています。 フロントエンド高速化のExpiresヘッダ さて、今日の本題。Webシステムのフロントエンド高速化のお話です。Webシステムの速度の大きなボトルネックとしてDB負荷がありますが、ブラウザ側のレンダリングを高速化する話としてフロントエンド高速化があり
Webサイト高速化のプロセスだって自動化したい
サーバ側にmod_spdyをインストールし、Google Chromeで、HTTP2.0でベースとなるSPDYのデモが行われた「Chrome Tech Talk Night #5」をレポートする。 Webサイト高速化のプロセス自動化と最高のパフォーマンス計測ツール 1月31日、Google 東京オフィスで開催された「Chrome Tech Talk Night #5」の模様をレポートします。Chrome Developer AdvocateのIlya Grigorik（イルヤ・グリゴリック）氏を迎え、SPDY導入方法を含むWebアプリケーションの高速化や、パフォーマンス向上の手法について説明されました。 イベント自体は「Making the Web Fast with PageSpeed」、「Wait, Chrome DevTools can do THAT?」の2部構成でしたが、このレポ
SPDY の紹介と nginx で SPDY を使う方法 - HeartRails Tech Blog
HeartRails Tech Blog ハートレイルズのエンジニア、デザイナーによるブログです。 ウェブサービス、スマホアプリ、IoT デバイスの開発に関連する技術的な情報を発信していきます。 みなさん、はじめまして。昨年末に入社しました やまぎし という者でございます。Twitter 等はやっていない、ということにしておいてください。ともかく何卒よろしくお願いいたします。 さて、十数年もの間 1.1 のまま変わらず有り続けていた HTTP の規格ですが、この頃は新たな風が吹いており、HTTP/2.0 の存在が見えてきました。まだワーキンググループが発足したばかりであり、具体的に変わるのは当分先になるであろうとは思いますが、米 Google 社の提唱している SPDY が HTTP/2.0 に取り入れられる形が濃厚であろうと話されています。 SPDY は先述した通り米 Google 社が
Webアプリにおけるキャッシュ。オレオレ事例 - ゆーすけべー日記
Webアプリにおいて、アクセスやデータ量が多く/大きくなってくると、 バックエンドのパフォーマンスが低下しがちです。 MySQLなどのRDBMSにデータを置いている場合は適切に クエリーを改善する、インデックスを張る、といった策で解決する場合もありますが、 キャッシュを効果的に利用することでより高負荷に対応できる可能性があります。 また、外部APIへの問い合わせなど、どうしてもネットワークや他のリソースのレスポンスタイムに 引きずられる部分に関しては情報を手元にキャッシュしておくと何かとよいでしょう。 今回はWebアプリケーションのレイヤーで最近僕がどのようにキャッシュを使っているのか？ の事例を紹介しつつまとめてみたいと思います。 キャッシュについてとその基本 そもそもキャッシュとは、簡単にふわっと表現するならば、 「一時的に情報を手元の近い場所に置いておいて利用する手法、もしくはその一
NAVERまとめに見る遅延ロードのすすめ « NAVER Engineers' Blog
あけましておめでとうございます。NAVERまとめのフロントエンドを担当している縣です。初詣で引いた大吉のおみくじを握りしめながら今年も張り切っていこうと思います。 今回はJavaScriptの遅延ロードの仕組みをNAVERまとめに導入した際のお話を紹介します。 遅延ロードの検討 昨年NAVERまとめのまとめ閲覧ページや、まとめ編集ページでのJavaScriptファイルの読み込みを遅延ロード化する作業をしました。元々はページ読み込み時に全て読み込ませていましたが、JavaScriptファイルが巨大になってきてパース・実行に時間がかかるようになったことから遅延ロードを検討することになりました。 遅延ロードの利点というとJavaScriptファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
設計から実装まで、今すぐ始める高速化
1. 設計段階から実装まで、今すぐ始める高速化 設計段階から実装まで、今すぐ始める高速化 CSS Nite LP Disk 23 , こもりまさあき 2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき 2. 設計段階から実装まで、今すぐ始める高速化 自己紹介を… こもりまさあき http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大 学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク 関連業務に並行して従事。2001年、会社を退職しフリーランスの道へ。 案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし 近著に『レスポンシブ・ウェブデザイン標準ガイド（MdN刊）』 『WordPress 高速化＆スマート運用必携ガイド（共著・MdN刊）』、など Twitter: @ciph
サーバとiOSアプリのデータのやり取りを〇〇倍高速化する方法 | VASILY TECH BLOG
こんにちは最近一日に一回は波紋のビートを刻んでる村田です。 はじめに スマートフォンアプリの開発では回線状況や端末のスペックなど様々な状況下で動作するため、少しでも高速化できる余地があるのであればなんとか頑張りたいところですよね。 今日はサーバサイドとiOSアプリの間のデータのやり取りを高速化する方法をご紹介したいと思います。 サーバサイドはRuby on Railsを前提にすすめさせて頂きます。 こんな感じでできないか？ 弊社ではアプリとサーバサイドのデータのやり取りをjsonで行なっていました。 レスポンスを受け取ってからパースする部分を高速化するには？ と考えたときパーサ自体を高速なものに置き換えてみたりしましたが、それよりもplistのバイナリをシリアリズして扱えばパースをする処理を省けるので高速化できないかという仮説に達しました。 このようなイメージですね。 実際どうなのよ
CSSファイルをJSから非同期読込する方法
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 （iOS, Androidで動作を確認） (fun
インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった | 初代編集長ブログ―安田英久
どれぐらいスゴいかというと、「サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、かなり高速化できちゃう」というぐらいスゴいのです。しかも、どんなサイトでも、どんなCMSを使っていても「インストールするだけ」。 Webサイトを高速化すると、ユーザーに優しいし、場合によっては検索結果での順位にも良い影響が出るかもしれない……それはわかっていても、なかなか本格的にサイトを高速化するのは難しいものです。 サーバー側の高速化に加えて、HTMLのつくりや画像のファイルサイズ最適化、さらにはCSSを調整しての画像スプライト化やCSS/JSファイルの結合・最適化によるブラウザとサーバーの通信本数削減などなど、実はやらなきゃいけないことがたくさん。 グーグルの提供するmod_pagespeedは、そうしたことの、かなりの部分を自動的に行うものです。 mod_pagespeedはこん
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
スマートフォンWebアプリ最適化”３つの極意”
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説Takao Tetsuro
ユーザー満足度 vs. パフォーマンス指標
ユーザーが一般に好むのは、すぐに使える使いやすいデザインである。しかし、満足度と客観的ユーザビリティ指標の相関は100％ではない。 User Satisfaction vs. Performance Metrics by Jakob Nielsen on October 8, 2012 日本語版2012年10月22日公開 ユーザーが好きなのはユーザビリティに優れたシステムか？ ばかげたことを聞くと思うだろう。しかし、調査結果からわかるのは、詳細に見ていくとこの話は少しややこしい、ということである。 答えをばらすと、そう、ユーザーは70％の確率でユーザビリティ指標が最高のデザインを選んでいる。しかし、100％ではない。 嗜好の評価 その質問に客観的に答えるには、細かいところまでみていく必要がある。私の行ったユーザーの嗜好の評価は次のようなシンプルな質問を基にしている： このウェブサイト（ある
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
conma.me
全自動パラメータチューニングさん
いま知っておくべきWebサービスのための高速ネットワーク技術（後編）
スタートアップ向け！1人日でできるサービスの高速化方法と成果
GitHub's CSS Performance
