タグ

HTMLと高速化に関するblueribbonのブックマーク (6)

  • デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本

    スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンドエンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド

    デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
  • インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった | 初代編集長ブログ―安田英久

    どれぐらいスゴいかというと、「サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、かなり高速化できちゃう」というぐらいスゴいのです。しかも、どんなサイトでも、どんなCMSを使っていても「インストールするだけ」。 Webサイトを高速化すると、ユーザーに優しいし、場合によっては検索結果での順位にも良い影響が出るかもしれない……それはわかっていても、なかなか格的にサイトを高速化するのは難しいものです。 サーバー側の高速化に加えて、HTMLのつくりや画像のファイルサイズ最適化、さらにはCSSを調整しての画像スプライト化やCSS/JSファイルの結合・最適化によるブラウザとサーバーの通信数削減などなど、実はやらなきゃいけないことがたくさん。 グーグルの提供するmod_pagespeedは、そうしたことの、かなりの部分を自動的に行うものです。 mod_pagespeedはこん

    インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった | 初代編集長ブログ―安田英久
    blueribbon
    blueribbon 2012/11/28
    どんなサイトでも、どんなCMSを使っていても、インストールするだけでCSSやJavaScriptの最適化、画像ファイルの最適化、HTML文書の最適化を自動的に行なってくれるApacheのモジュール。
  • 30分でできる!Webサイトを高速化する6大原則 (1/4)

    Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか? もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション(10段階)、横軸が表示までの時間を表している。1~5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう

    30分でできる!Webサイトを高速化する6大原則 (1/4)
    blueribbon
    blueribbon 2009/09/11
    1.画像は最適化してから使え!2.画像はサイズを指定せよ!3.HTTPリクエストは最小にせよ!4.CSSセレクターは短く最適化せよ!5.CSSは上に、JavaScriptは下に『まとめて』記述せよ!6.プロファイリングツールを使いこなせ!
  • Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法

    Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ

  • Web ページを高速化する

    IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.

    Web ページを高速化する
  • テクノロジー : 日経電子版

    遺伝子を効率よく改変するゲノム編集研究の第一人者で米ブロード研究所のフェン・チャン主任研究員は、エボラ出血熱やジカ熱の早期診断技術を開発したことを明らかにした。ウイルスの遺伝情報が…続き 受精卵のゲノム編集、なぜ問題 優生思想と表裏一体 [有料会員限定] ゲノム編集品 販売容認、条件満たせば安全審査なし [有料会員限定]

    テクノロジー : 日経電子版
    blueribbon
    blueribbon 2009/02/13
    「YSlow」「Smush it」「CSSの一括読み込み」「CSSスプライト」「ファイル圧縮」
  • 1