タグ

関連タグで絞り込む (17)

タグの絞り込みを解除

速さに関するhama_shunのブックマーク (36)

  • するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary


    サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報︵新卒・キャリア︶ といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
    するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary

  • TinyPNG が JPEG ファイルの最適化にも対応、TinyJPG もローンチ


    PNG ファイルの最適化 ︵減色 / 圧縮︶ を行うオンラインツール ﹁TinyPNG﹂ が JPEG ファイルの最適化にも対応しました。 これにあわせて、﹁TinyJPG﹂ も立ち上がりましたが、TinyPNG も TinyJPG も、どちらも PNG / JPEG ファイルの最適化を同時に行えるようになっていますので、サイト名が異なるだけで機能的には同じです。 上が元々ある TinyPNG で、下が TinyJPG のスクリーンショット。 使い方は同じで、パンダさんの横の ドラッグ & ドロップ エリアに、最適化したい画像をドラッグ & ドロップすればいいだけ ︵もしくはこの部分をクリックしてファイルを選択︶。同時に20ファイルまで最適化できます。 今までの TinyPNG は PNG ファイル専用で、JPEG ファイルをアップロードすると当然ながらエラーになりましたが、今はJP
    TinyPNG が JPEG ファイルの最適化にも対応、TinyJPG もローンチ

  • 画像の作り方・使い方でファイルサイズを減らす方法

    画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 デザインに左右される方法が多いので使えるケースは限られてますが、知っておくとどこかで役に立つかもしれません。 画像をぼかす jpegはそのアルゴリズムの特徴から通常の画像よりぼかした画像のほうがファイルサイズをおさえることができます。また、これは全体でなくて一部をぼかす場合

    画像の作り方・使い方でファイルサイズを減らす方法

  • サイトに適したリソース配置とasync/defer完全マスター – レンダリング優先のグッド・プラクティス | ゆっくりと…

    タイトル、少し変えました 😉 。 第1部「サイト高速化の「戦略」と「戦術」- GradeAのその先へ」では、YSlow や PageSpeed がアドバイスする Tips のうち、HTTP リクエストの削減を優先すべしという「戦略」の話をしました。 また css や js を束ねて結合し、HTTP リクエストを削減する時の「戦術」の話もしました。 今回は、「サイトの特性に適したリソースの配置を行う」ために、「束ねたリソースをドキュメント中にどう配置するのが適切か」を見い出したいと思います。またそのポイントとなるブラウザの基本的な挙動についても言及します。 ブラウザごとの挙動が確かめられる、実験サイト contentloaded.com を立ち上げたので、以下、同サイトから幾つかの例を引きながら話を進めたいと思います。 リソース配置を決める戦術 基本的な戦術 第1部 では、css や js

    サイトに適したリソース配置とasync/defer完全マスター – レンダリング優先のグッド・プラクティス | ゆっくりと…

  • Network Link Conditioner で回線速度をシミュレートする、の巻 – A Memorandum

    世の中にスマートフォンをはじめとしたスマートデバイスが溢れています。いまどきはLTEなんて速い回線で接続できることもありますが、まだまだ場所によっては3Gの回線になる、さらに不安定な環境ってことも珍しくはありません。 さて、そんな不安定な環境で既存のWebサイトにアクセスすると、当然のことながらページの要素がロードされ表示が終わるまで時間がかかります。まだまだ日本のサイトは全体的にデータサイズも大きく、サイト表示が遅くなる傾向にあると思います。 制作者の人たちは、ローカルの環境でチェックするだけ、もしくは会社の高速な回線を経由して確認しているかもしれませんが、それでは実際の接続環境での状況がわかってるとは言えないでしょう。 既に「Charles」などのツールで遅い回線環境をシミュレートしてチェックしてる人はいると思いますが、何やらApple純正の「Network Link Conditio

  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知


    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

  • Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ - ふろしき Blog


    ﹁HTML5 Advent Calendar 2013﹂の24日目の記事です。 Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようというアイデアが存在感を持ち始めています。それは﹁Web標準﹂です。 そこで今回、Web標準側でできるWebアプリのパフォーマンス改善について、掻い摘んで紹介します。全てを説明となるとキリがないので、キーワードを中心とさせて頂きます。最近になって、結構実用化が進んできているので、悩んだ時には試してみる価値はあるでしょう。 1. リソースを先に読み込む linkタグにてURLなどを指定することで、これから先に読み込ませる可能性が高いWebページのリソースを予め読み込むWeb標準があります。ニュースサイトでは次のページ
    Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ - ふろしき Blog

  • 【Visual Studio Code】1.0 GAリリース予定日、決定！ - 好きな技術を好きと言える幸せ - AYA TOKURA BLOG - Site Home - MSDN Blogs

    In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...

    【Visual Studio Code】1.0 GAリリース予定日、決定！ - 好きな技術を好きと言える幸せ - AYA TOKURA BLOG - Site Home - MSDN Blogs

  • IE11はなぜ速いのか？その理由をMicrosoftの開発者が解説


    先月ようやくWindows7正式対応版がリリースされた﹁Internet Explorer 11(IE11)﹂は、なぜ高速ブラウジングが可能なのかについて、Microsoftの技術者が3つの理由を明らかにしています。 Getting to the Content You Want, Faster in IE11 - IEBlog - Site Home - MSDN Blogs http://blogs.msdn.com/b/ie/archive/2013/12/04/getting-to-the-content-you-want-faster-in-ie11.aspx 今回IE11が高速な理由を明かしてくれたのは、MicrosoftのIE開発者リティカ・カパディア氏とボージャン・ブリンザ氏で、大きく以下の3つの理由でIE11は高速化を実現しているとのことです。 ◆1‥プリロード・プリフ
    IE11はなぜ速いのか？その理由をMicrosoftの開発者が解説

  • フロントエンドチューニングの箇条殴り書き

    普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ

    フロントエンドチューニングの箇条殴り書き

  • 画像圧縮サイト／TinyPNG

    Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now

    画像圧縮サイト／TinyPNG
    hama_shun
    hama_shun 2013/08/09
    PNG軽量化
    リンク

  • Cacoo - Web上で図の作成とリアルタイムコラボレーション

    Online diagramming tool for collaborating on wireframes, flowcharts, and more

    Cacoo - Web上で図の作成とリアルタイムコラボレーション

  • HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan


    Adobe Systemsがロサンゼルスで5月に初旬に開催した﹁Adobe MAX 2013﹂において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演﹁Mobile CSS Performance﹂を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
    HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan

  • 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部構成でしたが、このレポ
    Webサイト高速化のプロセスだって自動化したい

  • 身につけておきたいWebサイト高速化テクニック #2｜検証ツールとそもそもHTTPって何だ編 | DevelopersIO


    第1回のアジェンダ編では、高速化に関わる要因と解決策の全体像を紹介しました。 アジェンダ編にもかかわらず多くのブックマーク、シェアをいただきありがとうございます！ 余談ですが、記事にブックマーク、シェアをしていただくと、このブログでは執筆者に経験値がたまるような仕組みになっています。 たくさん経験値を貯めると四半期ごとに良いことがあるかもしれないので、気が向いたらこの他の執筆者の記事もシェアしていただけるとうれしいです。 言葉にせずとも、わかっていただけると思いますが、この記事も・・・ね？ 右上にあるボタンをちょちょっと。 本題 余談はさておき、本題に入りましょう。 今回は﹁無駄なリクエストとレスポンスの削減﹂に視点を置き、解決策について調査、計測して紹介してみたいと思います。 と思ったのですが、長くなりすぎたため、まずは﹁検証ツールとHTTPについて﹂紹介することにしました。 この記事の
    身につけておきたいWebサイト高速化テクニック #2｜検証ツールとそもそもHTTPって何だ編 | DevelopersIO

  • 遅すぎる日本のスマホサイトの原因を探る (1/4)


    デジタル機器の利用動向で知られるコムスコアの調査によると、2011年12月時点の日本における携帯電話に占めるスマートフォンの割合は16.6%でしたが、2012年6月には23.5%になり、半年で約7ポイントも増加しました。﹁まだ4人に1人の割合じゃないか﹂と思う方もおられるでしょう。 しかし、有名な﹁キャズム理論﹂によれば、普及率がイノベーターとアーリーアダプターを合わせて16%を超えると、一般大衆が技術を受け入れます。2012年12月時点の普及率はまだわかりませんが、すでに半分を超えていてもおかしくありません。スマートフォン未対応の企業サイトは、﹁時代遅れ﹂といっても過言ではないのです。 日本のスマートフォンサイトの問題点 すでにスマートフォン対応を済ませた日本の企業サイトは﹁マーケットに素早く対応して流石だ！是非、お手本として見習おう﹂といえるでしょうか？　先行してスマートフォンに対応し
    遅すぎる日本のスマホサイトの原因を探る (1/4)
    hama_shun
    hama_shun 2013/01/08
    連載第一回
    リンク

  • CSS Nite LP23フォローアップ（4）『設計段階から実装まで、今すぐ始める高速化＋ライブデモ』（こもり まさあきさん）｜CSS Nite公式サイト


    CSSNite LP23フォローアップ︵4︶﹃設計段階から実装まで、今すぐ始める高速化＋ライブデモ﹄︵こもり まさあきさん︶ 記事公開日‥2013年1月8日︵火︶ 2012年6月30日︵土︶ 、ベルサール九段で開催したCSSNite LP, Disk 23﹁表示速度最適化﹂のフォローアップとして、こもり まさあきさんの﹃設計段階から実装まで、今すぐ始める高速化＋ライブデモ﹄のスライドなどを公開します。 スライド︵PDF、99ページ、4.2MB︶ 音声︵前半︶ 音声︵後半︶ 当日デモで最適化したサイト 最適化前︵移行しただけ︶のサイト Pingdom Toolsでチェックした結果 メッセージ こもりです。LP23に参加された皆様、関係者の皆様、登壇者の皆様、土曜日は長丁場お疲れ様でした。表示高速化については、石本さんのお話にもあったように、それをやみくもにやるのではなく、その環境や状況
    CSS Nite LP23フォローアップ（4）『設計段階から実装まで、今すぐ始める高速化＋ライブデモ』（こもり まさあきさん）｜CSS Nite公式サイト

  • Webアプリケーションを高速化する50のトリック

    MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。 Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。 1. ネットワークリクエストに迅速に応答する リダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。 メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。 可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。 異なるドメインからのリソースをダウンロードすることによって、同時

    Webアプリケーションを高速化する50のトリック

  • スマートフォン向けWebサイトの表示速度 高速化手法

    対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、

    スマートフォン向けWebサイトの表示速度 高速化手法

  • PNG軽量化の減色と圧縮について | GREE Engineering


    このテーブルの番号は 1 Byte になっているため、0-255 の 256 個しか登録できません。そのため、画像で使用されている色が 256 個より多い場合は、なんとかして 256 個にしなくてはいけません。 この﹁なんとかして 256 色にする﹂というのが減色処理で、なるべく元の画像からの変化を分からないようにしながら色を減らしていくためのアルゴリズム実装です。︵この記事では減色アルゴリズムについての説明は省略します。︶ テーブルを作成したら、画像のそれぞれのピクセルを RGB 形式からテーブルの何番目の色を使うかに置き換えます。 上図のように、1ピクセルあたり 24bit 必要だった画像が1ピクセルあたり 8bit になったので、データサイズは大体 1/3 になります。 ︵パレットのデータに最大 3 Byte * 256 = 768 Byte 必要とか、同じように圧縮されないと
    PNG軽量化の減色と圧縮について | GREE Engineering
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.