サイトを高速化したらロード時間は1.6秒に、Lighthouseは100を獲得、その際に実施した手順を解説 | コリス

2019/12/17 22 users Lighthouse コリス スコア CSSベース HTML

サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思いま... 続きを読む

ロード時のスピナーとプログレスバー、どう使い分ける？ | UX MILK

2017/01/16 53 users プログレスバー スピナー UX MILK

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。 UX Movement - Progress Bars vs. Spinners: When to Use Which (2016-11-15) お店で誰かに商品の場所を尋ねたとして、その相手がただそこに立ったままだったとしたらどう思うでしょうか。きっとイライラして、その場を立ち去りますよね。同じよう... 続きを読む

[JS]CSS3アニメーションを使ったページが簡単な記述で面白いように実装できるスクリプト -AniJS | コリス

2014/05/12 121 users jQuery コリス ヘッダ トリガー スクロール

スクロールするとヘッダがアニメーションで移動したり、コンテンツが次々とスライドして表示されたり、ページのロード時にふわっと表示したりなど、スクロール、ロード、クリック、ホバー、フォーカスなどのさまざまなイベントをトリガーにCSS3アニメーションを適用できるスクリプトを紹介します。 jQueryなどの他のスクリプトは不要です。 AniJS AniJS -GitHub AniJSのデモ AniJSの使... 続きを読む

[CSS]画像をかっこよく表示し、操作が気持ちいいインタラクションを楽しめる -Fluid twisting image 3D | コリス

2013/11/04 17 users コリス CSS キューブ エフェクト Safari

一枚の画像を使って3Dのキューブをつくり、短冊状にくるくるっと回転させるデモを紹介します。 このアニメーションgifは容量の節約でコマ数を落としてますが、実際はもっと軽やかでキレイです。 実際の動きは、下記ページで確認できます。 Chrome, Safari, Firefoxでご覧ください。 Fluid twisting image 3D ロード時の画像表示のエフェクトもかっこいいですよ。 yug... 続きを読む

x3.js JavaScript rapidly reloader release - latest log

2012/03/25 53 users latest log code.google.com 環境

x3.js というものを創ってみました。 http://code.google.com/p/x3-js/JavaScript コードをキャッシュしておき、JavaScript ロード時に発生するボトルネック/ブロッキングやネットワークアクセスコストをゼロにしようという、ありそうでなかったライブラリです。WebSQL が使える環境なら WebSQL を、だめなら WebStorage にキャッシュし... 続きを読む

ギークが決めるベストブラウザはFirefoxとSafari！ : ギズモード・ジャパン

2012/01/11 25 users ギーク ウェブブラウザ Safari ギズモード ジャパン

Webサービス , ブラウザ ギークが決めるベストブラウザはFirefoxとSafari！ 2012.01.11 12:10 [0] [0] Tweet Check ベストだって。 ウェブブラウザの進化は速い。今、最も良いブラウザも常に変化しているのだろう。そこで、ネタ元のTom's HardwareがWindowsとOS Xで様々なブラウザを使いベストなものを決めてくれました。起動時間、ロード時... 続きを読む