『フロントチューニンガソン 最速を目指すには』
11:10～ 課題ページの確認＆PageSpeed Insightsの実行目的：チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20～ 画像ファイルの最適化目的：画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
逆引き！フロントエンドのイマドキパフォーマンス改善 - 青空コメントアウト
WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。 とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ！パフォーマンスはひとまずできる限りのところまで頑張るよ！となってしまうこともあるかと…。 この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。 というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。 ちなみに、本題に入る前にWebパフォーマ
むずかしくないCSS設計 #scripty06
2016/9/14の勉強会にて発表された資料です。 SCRIPTY#6 ～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/38935/Read less
20160930 フロントエンド高速化 業務編 (社内勉強会)
スタートアップやプロダクトの成功に必要な「アイデア×プロダクト×実行×チーム×運」の 5 つの項目について解説した概要のスライドです。急成長するプロダクトの初期に役立てていただければと思います。 プロダクトマネージャーやスタートアップの CEO の方向けにどうぞ。 ※ Japan Product Manager Conference 2016 の登壇資料です
フロントエンドパフォーマンス向上ルール - Speaker Deck
Transcript Leading Edge Development 勉強会 フロントエンドパフォーマンス向上ルール はじめに ▪Webサイト⾼高速化 / パフォーマンス改善の重要性 【Aberdeen Group Report】 ・Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンする。 ・Googleのページ反応が0.5秒遅くなると、アクセス数が20%ダウンする。 ・⼀一般的に表⽰示スピードが1秒遅くなると、 PVは11%、コンバージョンは7%、顧客満⾜足度度は16%ダウンする。 【Jakob Nielsen】 ３つの重要限界 ・⼼心理理的・感情的な違和感を感じないのは0.1秒まで ・思考の流流れが妨げられないのは1秒まで ・注意⼒力力を維持する限界の時間は10秒まで はじめに ▪パフォーマンス改善の⼿手段 【改善箇所】 ・パフォーマ
神獄のヴァルハラゲートのCSS設計 - I'm kubosho_
CSS Architecture Advent Calendar 2014 9日目の記事になります。 神獄のヴァルハラゲートのCSS設計方法について振り返りつつ、こうしているということや、上手くいったところ、改善したいところを書いていこうと思います。 アプリの規模 ASP.NET MVCを使っていて、View側はRazorテンプレートを使っているのですが、Razorのファイルを検索してみると以下の量となります。 find ./ -name "*.cshtml" | wc -l 1674 実際には、これにフィーチャーフォン向けのファイルや、部分的なViewファイルも含まれています。 なので、実際CSSを適用しているファイルの量は、この検索結果よりは格段に減りますが、それでも、約600ファイルはあると思います。 ちなみに、今年のはじめに同僚の@mayukiが、ソーシャルゲームのフロントエンドと
Webサイトを分析してサイトを高速化させ、AA評価を目指す（お手軽版） - Qiita
GTmetrixやPageSpeed Insightsのスコアを上げを上げるための方法です。 細かい分析は専門家に丸投げしたいところですが、フロント寄りの人でも対応出来そうな、お手軽な項目をまとめてみました。 この記事に関連のあるキーワード： Nginx、Sass（Scss）、JavaScript、HTML5、CSS3、UI 元記事 下記エントリの転載になります。 Webサイトを分析してサイトを高速化させ、AA評価を目指す（お手軽版）- rokuro Fire 目次 GTmetrix、PageSpeed Insightsとは？ フロントエンドの対策 document.writeを一匹残らず駆逐 外部JavaScriptファイルの非同期読み込みと、読み込ませるタイミングの変更 ソーシャルボタン系スクリプトの対策 CSSのファイル数を減らし、@importを駆逐 CSSの圧縮（Compassを
『Frontrend in Fukuoka レポート』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、フロントエンドエンジニアの加藤（@ktknest）です。 1/25（土）、札幌に引き続き福岡にて、フロントディベロッパ/エンジニア向けの勉強会Frontrend in Fukuokaが開催されましたので、そちらのレポートをお届けします。 Fukuoka Frontrend Frogsや、特定非営利活動法人 AIP、サイバーエージェント福岡オフィスの皆さんのご協力の元、関係者を含め200名近くと非常に多くの方々にご参加いただきました！ ・Frontrend in Fukuoka 2014年1月25日（土）開催！ ・当日のツイートまとめ 3ト
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
とあるソシャゲのHTML/CSS設計話
【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから２年半…あっという間だった…。 関与したもの： スマホ版ピグ（リニューアルして面影無し） ピグファンタジア（11月末クローズ） 新規ゲーム ←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います： クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正
フロントエンドな現場でよく使う制作ツールまとめ | Pen
はじめに ふだん仕事でお世話になっているツールたちを徒然とリストアップしていこうかと思います。 中にはもう使わなくなったものもあるかと思いますが、記念的な意味をこめまして、いっしょにならべたいと思います。 そしてほとんど、Mac用のツールです。。。 タスクランナー GRUNT YEOMANでも使われているタスク・ランナーです。使用するにはNodeが必要です。 最近の空気感では、フロントエンド系のタスクランナーでは定番のものになったのではないでしょうか。 使い方はJavaScriptかCoffeeScriptで設定ファイル(Gruntfile)をつくり、そこにタスク(例えばソースを圧縮する、JavaScriptの構文をチェックする、デプロイするなどなど)を登録し、自動実行させるというものです。 また、grunt-initを別途インストールして、対応したテンプレートをインストールすると、お手軽
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ