遅いブログパーツを高速表示する方法
ブログパーツの表示が遅いと、ページ全体の描画が止まってしまいますよね。 ブログパーツを「非同期化」してしまえば、ストレス無くページが表示されるようになりますよ。 非同期化とは、ページの一部分を、全体のページから独立して描画させる方法です。 方法はいろいろあるのですが、今回はJavascriptの「setTimeout()」関数を利用しました。 setTimeout()は、メインの描画とは別に、指定した時間後に命令を実行する関数です。時間を0にすれば、非同期で動作させることが可能です。 ブログパーツは、主に3つの形に分けることができます。各々の形ごとに、高速化する方法を紹介します。 ●タイプ0 <iframe src=”http://hogehoge.com/blogparts.cgi”></iframe> iFrameのタイプは、すでに非同期化されているため、特に対策は必要ありません。 ●
document.writeを使った遅いブログパーツ（例えばzenback）を非同期化してサイトを高速表示する方法 | ゆっくりと…
広告やソーシャル系のサードパーティー製ブログパーツを張りたいんだけど、サイトの表示速度が遅くなるのって我慢なりませんよネ。こういったブログパーツの多くが JavaScript で作られています。自サーバーに設置したスクリプトならまだ手の打ちようはあるし、本サイトでも JavaScript 読み込みを高速化するための非同期化ネタを幾つか扱ってきました。例えば Google Analitics の非同期トラッキングスニペット や LABjs、HEAD JS などの非同期ローダーが有名なところでしょう。 ところが困ったことに、こういったサードパーティ製スクリプトに document.write が使われていると、Google Analitics のようなテクニックや非同期ローダーでは、ほとんどの場合でページが白紙となってしまい使えません。Twitter や Facebook など超有名どころは既
Don’t docwrite scripts | High Performance Web Sites
April 10, 2012 5:29 pm | 32 Comments In yesterday’s blog post, Making the HTTP Archive faster, one of the biggest speedups came from not using a script loader. It turns out that script loader was using document.write to load scripts dynamically. I wrote about the document.write technique in Loading Script Without Blocking back in April 2009, as well as in Even Faster Web Sites (chapter 4). It look
YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 - bathtimefish's blog
先月のHTML5など勉強会で、Yeoman超入門を発表したときに、Yeomanはフロントエンド開発専用にlocalhostサーバー立ち上げるからサーバーサイドとの同時開発はちょっと工夫がいるよね〜みたいな話題があって、参加されてたnode.jsに詳しい方からhttp-proxyつかってapiの部分リダイレクトかけたらいいよみたいな方法を教えてもらった。 なるほどそれは便利だなと思って実際書いてみたら手軽に使える感じにできたので書いておきます。ちなみに今週水曜日にGoogle Developers Liveに出演してYeomanのことを喋らせていただく機会に恵まれたので、その時の参照にも使えるかと思って。（ライブのスライドはこちら） Yeomanは $ grunt server で開発用のWebサーバーを起動することができる。デフォルトで http://localhost:9000/ 以降フ
PeerCDN
PeerCDN is an open-source, distributed CDN that will make the web faster, more reliable, and help sites to reduce bandwidth costs.It's still really early days with WebRTC, but we hope to have the above screencast powered by PeerCDN in a week or two. Check back soon! Meet PeerCDN. A new kind of CDN.PeerCDN is a peer-to-peer distributed CDN that will make the web faster, more reliable, and help site
JavaScriptを使ったリアルタイムA/Bテスト·Abba MOONGIFT
AbbaはJavaScriptを使ったUIのA/Bテストを行うソフトウェアです。 Webサイトの良いところは変更コストがとても小さい所にあると思っています。ちょっとしたテストを行うのが簡単で、戻すのもそれほど難しくありません。そこでWeb上でA/Bテストを行う際に遣ってみて欲しいのがAbbaです。 管理画面です。この右側に出ているコードを実行することでA/Bテストを行えます。 測定結果はリアルタイムに反映されます。 Aの方が反応が良いといった結果が簡単に分かります。 Abbaの仕組みとしては、A/BそれぞれについてJavaScriptを実行します。例えばボタンの配置を変えたり、CSSのクラスを変えて見た目を変更できます。そしてその結果クリックなどのイベント対してテストが完了したというアクションを実行する仕組みです。 AbbaはRuby製、MIT Licenseのオープンソース・ソフトウェア
Frontred vol.4に参加してきました | STUDIO KINGDOM
サイバーエージェントさんが主催するフロントエンド向けの勉強会「Frontrend vol.4」に参加してきました。 前回のvol.3に引き続きの参加で、今回のテーマは「javaScript」でした。 この記事では個人的にピックアップしたい内容だけを紹介しています。全体を通した内容は下記リンク先が非常に参考になります。 Frontrend/04 – Toggeter Frontrend Vol.4に行って来ましたメモ – < /gecko > 「JavaScript Development Tools – JavaScript開発の効率アップ」 Crhrome Developer Tools まずはChromeのデベロッパーツールですが、同じくサイバーエージェントの吉川さんが既に発表(下記スライド)されていたので、それをふまえつつ、おさらい＋追加情報的な感じ。 Chrome DevTool
Web SQL Databaseと一緒に使いたいライブラリ·WebSQL.js MOONGIFT
WebSQL.jsはWeb SQL Databaseを使いやすくするJavaScriptライブラリです。 惜しくもHTML5の仕様からはもれていますが、新しいWebブラウザの機能にWeb SQL Databaseがあります。そんなWeb SQL Databaseをより使いやすくしてくれるライブラリがWebSQL.jsです。 デモです。データを追加したり、削除したりできます。 さらに追加しました。再読み込みしても再現します。 WebSQL.jsはデータベースの作成、テーブルの作成、データのCRUD操作、テーブルの削除が行えます。さらにトランザクションやSQLの実行も可能です。各メソッドはチェーンでつないで実行させることも可能になっています。 WebSQL.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Web SQL Da
身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編 | DevelopersIO
Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
最近のMVCとJavaScriptのMVCについて まとめ - webとかmacとかやってみようか R
ここ最近のWebアプリの進化に伴い、ネイティブアプリ並のUIを持ったWebアプリへの期待が高まっています。jQueryなんかで簡単にDOMを操作できるようになりましたが、ある程度の規模のアプリを作ろうとすると jQuery だけでは厳しいものがあります。 そこで、JavaScript でも MVCパターンを適用し、モデルとビューの分離して、開発・保守しやすい設計にする、という流れになってきています。MVCは、元々は Smalltalk で GUI アプリを作るときの設計指針として考えられました。デザインパターンの一つでもありますが、Singleton や Observer といった GoFのデザインパターンよりも抽象度の高い、ソフトウェアアーキテクチャです。 そして時は流れ、Webの時代になると Strutsなどで代表されるWeb3層モデルとして、Webアプリの設計パターンとして一世を風靡
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
[JS]ローカル環境でも利用できるダミー画像を生成するスクリプト -Holder.js
サイズやカラーをテキストで指定するだけで簡単にダミー画像を生成できる超軽量（4KB）のスクリプトを紹介します。 Holder.js -GitHub [ad#ad-2] Holder.jsのデモ Holder.jsの使い方 Holder.jsのデモ 対応ブラウザ Holder.jsはcanvasとdata URI schemeを使用しているため、下記のブラウザでご覧ください。 Chrome 1+ Firefox 3+ Safari 4+ Internet Explorer 9+ Holder.js [ad#ad-2] Holder.jsの使い方 使い方は、2ステップです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="holder.js"></script> Step 2: HTML ダミー画像を設置したい場所にimg要素で記述します。
Webサイトの品質をアップさせる便利ツール＆機能のまとめ | ベイジの社長ブログ
成熟市場においては、品質の高さでは優位性を築けなくなると言われます。しかし、だから品質にこだわらなくても大丈夫、と考えるのは早計です。裏を返せば、品質の高さが当たり前になっているため、少し品質が低いだけでブランドを大きく傷付けやすい環境になっているとも言えます。 そういった考えもあって、今年行っている当社のブランド再構築活動の中では、高い品質を担保するためのレギュレーションの整備に力を入れてきました。あわせて、当社として利用する品質を維持するためのツールや機能も改めて洗い出してみました。今日はこの内容を公開させていただきます。 JavaScriptエラーを無くす JavaScriptのエラーは、大きな問題が起こっていないように見えても、大事な機能が動かなくなったり、スペックの低いマシンで極端に挙動が遅くなったりすることがあります。各ブラウザのデフォルト機能で簡単にチェックできますので、エラ
「Meteor」で来れ、1億総Webアプリ開発者の時代（1/2） － ＠IT
ものになるモノ、ならないモノ（47） 脅威のフレームワーク「Meteor」で 来れ、1億総Webアプリ開発者の時代 山崎潤一郎 2012/5/16 文系で印象派人間の筆者でも「これならWebアプリ開発、できるかも」と思わせてくれるフレームワークが登場した。技術的な視点からの開設は他所に任せ、ここでは、非プログラマの視点から、Meteorがどんな可能性を切り開いてくれるかを予想したい。 「1億総Webアプリ開発の時代到来か」「これなら印象派人間の俺にも開発できるかも」「『リーンスタートアップ』しちゃおうかな」……。 いま、「Meteor」という名のWebアプリケーション用フレームワークがエンジニアの間で話題になっている。この新しいフレームワークのサイトやそこで紹介されているビデオを見て、脳内ヘビロテ状態でグルグルとループ再生されたのが、冒頭のフレーズだ。 簡単でスピーディな開発を可能にした脅
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」:phpspot開発日誌
WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」 2011年12月12日- Web-Based JavaScript Spreadsheet Software - dhtmlxSpreadsheet WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」。 次のような綺麗なデザインのテーブルを簡単に配置できます。PHPとJavaScriptで書かれていて、データなんかも自分のサーバ上においておけるのが特徴 データベースからのバインディングができたり、PDFやExcel形式でのエクスポートに対応しています。 WordPressプラグインもあるみたいなのでWordPressな方にも使いやすい 色を変えたりSUMしたりと多機能。 関連エントリ これは凄い、Excelの関数
WebKit サーバーというものを作ってみた - IT戦記
みなさん お久しぶりですヽ(´ー｀)ノ夏休みの宿題終わりました？ 毎日が夏休みの最終日みたいな生活してるあまちゃんです！ さてさて 今日は WebKit サーバーというものを作ってみたので、紹介してみます。 WebKit って何？ WebKit っていうのは Chrome や Safari の中に入ってるブラウザのエンジンのことです！ 実はブラウザっていうのは、エンジン部分と見た目の部分（タブとかボタンとかね）に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー｀) ブラウザのサーバーってどういうこと？ 要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。 今まではそういうのなかったの？ 実は、今までは JavaS
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
