サイトの表示高速化につながる18のこと | knowledge / baigie
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート
Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。 loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていましたが、loading属性という名前に変わる、とのことです。 Native image lazy-loading for the web! by Addy Osmani 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Chrome 75でリリース予定のloading属性 ブラウザがネイティブで遅延ロードをサポート loading属性とは loading属性の
今すぐ対策できる！HTMLで文字化けを直す方法【初心者向け】
文章 → I am a human ASCII (16進数) → 73 32 97 109 32 97 32 104 117 109 97 110 コンピュータの世界で一般的に使われている文字コードに、ASCII（アスキー）があります。 アルファベットや数字や記号など、キーボードで半角入力できる文字のコードを定めるものです。 1文字を2進数8桁以内で表せるので、1文字あたりのデータ量は1Byteになります。 （ASCIIコード表 出展 Wikipedia https://en.wikipedia.org/wiki/ASCII ） ASCII文字は、どのコンピュータやスマホも同じように解読できます。 ASCII文字だけで作られている文章は、絶対に文字化けしません。 HTMLやCSSのコードも、ASCII文字だけで記述しますよね。 ASCII以外の文字コードと文字化け 人間
CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ
ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。 現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。 イラスト: Girls Design Materials CSSでページをアニメーションでスクロールさせる JavaScript単体でページをアニメーションでスクロールさせる プラグインでページをアニメーションでスクロールさせる CSSでページをアニメーションでスクロールさせる CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。 Scroll-behaviorのサポートブラウザ scroll-behavior -MDN web
タイトル未設定 - イラスト制作依頼はタノムノ
こんにちは！閲覧ありがとうございます。篠川もちといいます。 「人とのご縁を大切に」 クライアント様とのコミュニケーションを一番大切にしたいと思っております。 本業との兼ね合いもありますので完成までに少しお時間がかかりますが、その分丁寧に、クライアント様…
Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール
スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。 既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介します。 ※秒数は目安です クリティカル レンダリング パス(Critical Rendering Path)とは、ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になり、この時にブラウザがページの最初のペイントを実行するために必要とするシーケンスのことです。 クリティカル レンダリング パスについて詳しくは、下記を
あなたのブログは大丈夫？ページの表示速度をチェックする簡単な方法
See related links to what you are looking for.
あなたのWebページ表示を爆速にするための、HTTPリクエスト状況分析ガイド（後編） | Moz - SEOとインバウンドマーケティングの実践情報
Webページの表示を高速化するために無料ツールWebPagetestを使って表示パフォーマンスを確認する方法を解説しているこの記事は、前後編の2回に分けてお届けしている。後編となる今回は、「ウォーターフォールの高さを縮める」「レンダリングの開始時間を早くする」方法や、「サーバーの速度」「CDN」などについて解説する。 ウォーターフォール図やWebPagetestについては、前編を参照 高速化ポイント2 ウォーターフォールの高さを縮めるウォーターフォール図が縦に長い場合は、ブラウザがページを読み込むのに大量のリクエストを行わなければならないことを示している。リクエストの数を減らす最善の方法は、ページに含まれているすべてのコンテンツを見直して、そのすべてが本当に必要かどうかを判断することだ。例を挙げてみよう。 CSSファルやJavaScriptファイルがたくさんある場合。 以下はAOLサイトの
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
Webサイト高速化に必要な画像形式の基礎知識 (1/3)：CodeZine（コードジン）
はじめに こんにちは、クラスメソッド株式会社でWebを担当している野中です。前回はWebサイトの高速化を行うにあたり知っておきたい「HTTPの仕組み」について紹介しました。 HTTPの仕組みについて何となく理解できたでしょうか？ この連載で紹介していく高速化テクニックの解説を理解するために必要ですので、都合の良い時に読んでおいてください。 「いつ読むか？ 今でしょ！」なんてね（笑） もう古いですね。 対象者 この記事では、特にWebデザイナーを対象としています。 フロントエンドエンジニアの方はWebデザイナーから受け取ったPSD（Adobe Photoshop Data）ファイルや、AI（Adobe Illustrator Data）ファイルから画像を書き出すこともあると思うので、その際の参考にしてください。 Webデザイナー フロントエンドエンジニア Webディレクター Web担当者 ビ
自分のサイトに設置可能、Googleがスマホウェブ用「コンテンツリコメンド」スタート 【増田 @maskin】 | TechWave（テックウェーブ）
1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 [読了時間: 2分] 米Googleは2013年5月13日、スマホ向けサイトで、サイト内コンテンツをリコメンドするサービスをスタートした。Google+の管理ページで登録を済ませて、特別なコードを自分のサイトに組み込めば、スマホでページ閲覧時にサイト内コン
「Pocket」（旧Read It Later）に追加するボタンをブログに付けよう
そもそも「Pocket」って何？という方のために説明すると、日本のはてなブックマークのような、オンラインブックマークです。 ローカルのブックマークと違って、例えばパソコンのブラウザから追加したURLにiPhoneアプリやiPad等からもアクセスできます。 対応しているアプリケーションが多いので、例えばツイッタークライアントの一部でもPocketに保存することができますので、タイムラインで見かけて「後で読もう」と思ったものをPocketに放り込んでおけば、後からパソコンでじっくり読むという使い方もできます。 とりあえずアカウントを取得して始めてみると便利さが分かるかも。 公式ページはこちらです Pocket (Formerly Read It Later) 始め方や使い方はこちらの記事に詳しいです。（少し前の記事なので一部古いかも知れませんが） 気になるページを保存してあとで別のスマホなどか
隠された HTML コメントを簡単に見る方法。 - 言語ゲーム
同僚の Ted Kaehler さんのアイデアをヒントに、HTML のコメントを表示するブックマークレットを作ってみました。 http://metatoys.org/unveil/ にある Unveil というリンクをブックマークバーにドラッグして使います。一度押すとコメントが表示され、もう一度押すと元に戻ります。サイトによっては、なかなか味わい深いコメントを見る事があります(Chrome, Safari, Firefox で確認済)。例えば、 asahi.com のように高校野球速報の指示が書いてあったり、 楽天トラベルのようにコメントの中に隠されたバナーや選択肢を見ることが出来ます。 コメントのような舞台裏を見るとなかなか背徳的な気分になるものです。HTML の開発時にも役に立つかもしれません。面白いコメントを見つけたら教えて下さい。
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
フリーのボタン素材を作ってみました。 | Design Plus
ウェブサイトは、WordPressテーマで効率よく制作する時代に入っています。 私たちは、この市場のニーズに応え、低コストでハイクオリティ、 そして、驚異的にインパクトのあるサイトが構築できるWordPressテーマTCDを開発し続けています。 美しいデザインのサイトを、どなたでもかんたんに運営可能です。 累計ユーザー数120,000を超える老舗トップブランド「TCD」テーマの威力をどうぞご堪能下さい。 WordPressテーマTCD 3つの特徴 テンプレートの領域を はるかに超越した美しいデザイン 世界で最も先進的で、スタイリッシュなテンプレートを作りたい。その基盤となるのはデザインである、という思いが私たちにはあります。美しく魅力的なデザインはそれだけで読み手の心を掴む力があるからです。デザインは「印象付け」をする大きな要素です。私たちは、あらゆるネットマーケティングのシーンであなたの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
