サイトの表示高速化につながる18のこと | knowledge / baigie
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita
💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの
オタクのタグ講座
ABOUT 「昔サイト作ってたけど…HTML5って何？フレームが使えない…？cssとは…？」と言う古の同人女に向けてのタグ講座です。 ちなみに今回はこのサイトみたいなデザインでスマホ閲覧対応のHPが作れる様にする予定です。 なお、スマホ閲覧対応する場合フレームは相性が悪いので、この講座では使いません。というよりHTML5ではフレームは非推奨属性です。諦めよう！ 1.HTML5とCSS3 ホームページはHTMLタグによって作られます。cssはそのタグを装飾するためのファイルです。 HTMLで骨組み、cssで肉付け、という役割分けが昨今特にはっきりしています。 実際、骨組みだけでも一応コンテンツとしては見られるので究極的にはcssは不要です。 ……でも皆どうせ作るなら格好いいホームページ作りたいよね？なのでcssも勉強します。頑張ろうな。 それでは、まずはHTML5で使う基本の構成を紹介します
WEBデザイナーの転職用ウェブ・紙面ポートフォリオの作り方 | Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜
WEBデザイナーがはじめて転職をするとき、一般的な会社員とは決定的に違うものが１つあります。それが自分の実績と作品を載せるポートフォリオです。WEBデザイナーの転職を成功させたいならば転職に関わるすべてのものをデザインすることが大事です。サンプル用のIllustratorデータをご用意していますので、初めてポートフォリオを作る方はサンプルをダウンロードしていただくと作業が捗ると思います。 基本はWEBポートフォリオ WEBデザイナーとしての実績や技量・得意分野などを転職希望の会社にアピールするために必要不可欠なものです。 WEBデザイナーの経験がある人ならば、リリースされているWEBサイトやサービスなどを「どのように作ったか」をまとめます。 転職活動と同時並行でWEBポートフォリオを作るのはかなりの負担にありますので、転職を考え始めたらWordPressなどで時間の空いているときに作ってい
Webページを作成する時の基本になるHTML5の最小限構成やリセット用CSS、CSS3アニメーションなどのまとめ
Webページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。 HTML5で作成する時の必要最小限のテンプレート スタイルの正常化・リセット グリッドをつくるスタイルシート CSS3アニメーション HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低限の配
Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLでページ内リンク（ジャンプ）をスクロールする方法｜SEOラボ