https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Study > Workshop > 2015-08-29勉強会

2015-08-29 勉強会


今回の課題


  • 課題1. ページスピードの重要性
  • 課題2.サイト内検索の最適化
  • 課題3.フォームでのユーザビリティの向上
  • 課題4.アクションボタンの固定(スマホサイト)
  • 課題5.HTTPSの採用
  • 課題6.HTML5コーディングのルール化
  • 課題7. PCサイトスマートフォンサイトの別URLシステム再考



課題1. ページスピードの重要性


目標
今後重点的に施策開始

ページスピード向上の施策は多岐に渡るため、数ヶ月のスパンで。
今後の課題として、共通のcommon.js、common.css等のコーディングルール作り

<課題1.ページスピードの重要性について>

◆スピードUPにかかわる項目
スピードUPにかかわる項目はたくさんあります。
例)有名どころの提案ルール14
ルール1 : HTTPリクエストを減らす
ルール2 : CDNを使う
ルール3 : Expiresヘッダを設定する
ルール4 : コンポーネントをgzipする
ルール5 : スタイルシートは先頭に置く
ルール6 : スクリプトは最後に置く
ルール7 : CSS expressionの使用を控える
ルール8 : JavaScriptとCSSは外部ファイル化する
ルール9 : DNSルックアップを減らす
ルール10 : JavaScriptを縮小化する
ルール11 : リダイレクトを避ける
ルール12 : スクリプトを重複させない
ルール13 : ETagの設定を変更する
ルール14 : Ajaxをキャッシュ可能にする

◆コーディングの現状でのクリア項目
・ルール7 : CSS expressionの使用を控える
・ルール8 : JavaScriptとCSSは外部ファイル化する
・ルール11 : リダイレクトを避ける

◆スピードUPとは、何を指標にするのか
→GoogleのPageSpeed Insightsによって判断
<ページスピードの計測>
サイトの現状スピードをざっくりと知るなら、スピード判定をしてみてください。
(下記にURLを入力)
スピード判定ツール

◆クロスブラウザ
次ブラウザを範囲に考慮
Chrome・Firefox・IE(9以上)

◆各コーダーさんへのお願い
今まで使用してきたプラグインの情報を集め、新たなプラグインと比較検討して、
新common.js、common.cssを作っていきたいと思います。
新ルールでは、jqueryのバージョン2系を使ったものに統一しようと考えています。
使ってこられたプラグイン情報を、思い出した時に一つずつでも結構ですので、
メールで、「カテゴリ」「プラグイン名」「解説サイト」を教えてください。

「カテゴリ」例
・ドロップダウンメニュー
・アコーディオンメニュー
・サムネイルメニュー
・タブメニュー
・エレベーターメニュー
・サイト内検索
・スマホ画像スワイプ
・画像スライドショー
・画像ズーム
・スムーススクロール
などなど

ページスピード判定ツール



課題2.サイト内検索の最適化


目標
現在の運用状況と展望が???

とりあえず置いておく



課題3.フォームでのユーザビリティの向上


目標
スマホサイトでのForm操作ユーザビリティの向上

スマホサイトでFormの<label>要素使用
・スマホサイトでFormの日付をカレンダーで選択
1番目は実行、2つ目は今後の課題へ



課題4.アクションボタンの固定(スマホサイト)


目標
固定しておくメニューやボタンを採用

CSSでコーディング? OR Javascript?

「CSSでコーディング」に決定!



課題5.HTTPSの採用


目標
Google推奨でSEO評価が予測されるHTTPSの採用

今のところ見合わせる

	・HTTPSの現状
	メリット:個人情報の保護・将来的なSEO効果
	デメリット:運用コスト(独自SSL導入・共用SSLだとクライアント様独自ドメインが変わる不備があり実用不可)
				サーバーへの負荷・ページスピードのダウン
				ユーザーのブラウザ負荷
				
				
	当面は、購入ページなど特に個人情報に関わる部分のみ採用
	ただ将来に備え、全サイトでリンク方法の変更を実施
	
	これまでは、フルパスでのリンクを貼っている場合、
	<script src="http://example.com/common/css/common.css"></script>
	とhttp:を付けたリンク
	↓
	今後は、
	<script src="//example.com/common/css/common.css"></script>
	と、http:を除いたリンクで貼ること
	(ルートパスはもちろん可能<script src="/common/css/common.css"></script>)
				

フルパスは、http:を除いたリンクで貼ること




課題6.HTML5コーディングのルール化


目標
HTML5の新しい描画などCSSを勉強し、コーダー間で共有

今後重点的に施策開始
コーダーさんでの方法作りから。。。


次回勉強会 直近課題


【2015年8月29日 直近課題】
羅列ですみません。


・プラグイン情報集め

・HTML5の情報集めとルール作りの手法

・スマホ転送方法の確定(転送プログラム作成)と、
 PC用・SM用の重複コンテンツページ最適化

・コーディングルールのチェックリスト作成
	include・common・GTMなどルールの統一

・Htaccessへの追加記述
 →php高速化
 →キャッシュ利用

・キービジュアル画像imgタグへの「width」「height」サイズ記述必須

ページの先頭へ



次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会