現役Webエンジニアの僕が実際に行なっているサイトスピード改善10選

こんにちは！フリーランスWebディレクター兼エンジニアののせっち@nosecchi01です。

僕が実際に行なっているサイトスピード改善施策をご紹介します。

前半は汎用的な内容、後半はワードプレスに特化した内容です。

画像の圧縮

基本中の基本です。画像サイズ圧縮が一番手っ取り早く、かつサイトスピードの直結するので必ず行います。

具体的には下記のようなことを行います。

jpeg(jpg)画像でいけるものはなるべくjpgに変換する

何も考えずにpng画像を使うのは止めましょう。

png形式は背景を透過させることができますが、その分画像サイズは大きくなる傾向にあります。

透過させる必要がある場合を除いては、jpeg(jpg)形式で書き出すようにします。

透過の場合もアイコンやイラストのようなものはsvg形式で書き出すことも検討してみてください。

画像サイズを適切に調整

『画像サイズ』というと容量（バイト）と大きさ（width, height)の両方の意味がありますが、大きさ(width, height)の方です。

画像の大きさ(width, height)は当然ながら容量（バイト）に直結しますので必ず適切なサイズまで小さくします。

SPはretina対応のため2倍サイズにする必要がありますが、むやみに大きくしすぎる必要はありません。

圧縮をかける

適切な拡張子、適切な大きさで書き出したら、必ず圧縮をかけます。

Macアプリならオススメは何と言ってもImageOptimです。圧縮率が圧倒的に高いのでオススメです。

画像圧縮ならImageOptimが最強にオススメです。

✅MozJPEGやOxiPNGといった高圧縮フォーマットを選択可
✅圧縮率を自分で調整可
✅ローカルで圧縮できる(セキュリティ○)
✅圧縮速度早い(神)

❌元画像が上書きされる

jpgが特に得意っぽく、圧縮率高すぎてビビります😊https://t.co/meiQLt221H

— のせっち@Webディレクター兼エンジニア (@nosecchi01) June 26, 2020

『元画像が上書きされる』は僕の認識違いで、ゴミ箱に入ります。（ご指摘ありがとうございます！）

外部サイトだとSquooshかTinyPNGがオススメです。

Squooshの方が高圧縮率（特にjpg)、サイズ調整可、元画像と比較可、ローカルで圧縮（セキュリティ○）で機能面は上ですが、一枚ずつしか圧縮できません。

TinyPNGはかなり定番で、圧縮率もボチボチ高く、20枚までなら一気に圧縮できます。

タスクランナーの『Gulp』を使えば何十枚・何百枚画像があっても一発で圧縮可能です。

詳しくは下記の記事で解説しました。

Gulp4で作業爆速化！オススメ設定を公開する【コピペOK】

Gulp4の簡単な設定方法を知りたいですか？この記事では、node、Gulpのインストールから、便利な設定方法まで全てコピペで設定できるよう纏めました。機能についても詳しく…

flex-box.net

lazyload（画像の遅延読み込み）

ざっくり言うと、ユーザーのスクロールに合わせて画像を読み込む方法です。

サイトが表示されるまでの時間を短縮することができます。

lazyloadはプラグインがたくさんあるのでお好みのものを使えばいいと思いますが、僕はlazysizesを使っています。

採用理由はgithubを見て定期的に更新されていそうだから、ですね。

（公式）lazysizes

http://afarkas.github.io/lazysizes/

Gzip圧縮

Webサイトを表示する際にはいかにhttpリクエストを減らすかが重要でして、Gzip圧縮を行うことで、特にhtml, css, jsなどテキストベースのファイルの通信量を削減することができます。

下記の例では、フォント、xml、svgに関しての記述があります。必要に応じて適宜調整してください。

具体的には.htaccessファイルに下記を記述すればOKです。

# BEGIN Gzip
<IfModule mod_deflate.c>
AddType x-font/woff .woff
AddType x-font/ttf .ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE x-font/ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>

.htaccessの変更前にはバックアップをお忘れなく！

フォントサブセット化

Google FontsやWebフォントを使っている場合はフォントのサブセット化を行いましょう。

フォントのサブセット化とは使用頻度の少ない文字を除外することで、ファイルサイズを圧縮することです。

Webフォントは重たいです。

特に日本語フォントはひらがな、カタカナ、漢字が入っており、1MBを超えることもザラにあります。

フォントのサブセット化にはMacの場合、サブセットフォントメーカーを使用するといいでしょう。

サブセットフォントメーカー

https://opentype.jp/subsetfontmk.htm

ひらがな・カタカナ・数字・記号 + 漢字は第一水準のみ、のような形で選定します。

具体的には下記のような感じ（長いです）

亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅
為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦
嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎
焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可
嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒
拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔
革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完
官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑
顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻
誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦
魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤
欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲
君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑
欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言
諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公
功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航
荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根
梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂
阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃
賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事
似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜
煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終
繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾
純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭
晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄
状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁
刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄
制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃
節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑
岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬
蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄
騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱
巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑
蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚
長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌
抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬
屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討
謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓
呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼
之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博
拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯
班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美鼻柊
稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨
布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉
糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母
簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌
貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満
漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙
儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷
由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼
雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟
療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾
練聯蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕
　、。，．：；？！゛゜´｀¨＾￣＿ヽヾゝゞ〃仝々〆〇ー―‐／＼～∥｜…‥‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＋－±×÷＝≠＜＞≦≧∞∴♂♀°′″℃￥＄￠￡％＃＆＊＠
§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓〓∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡¶◯１２３４５６７８９ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴ
ＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなに
ぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシ
ジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ
ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийкл
мнопрстуфхцчшщъыьэюя─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂!"#$`"'①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ⅠⅡ
ⅢⅣⅤⅥⅦⅧⅨⅩ㍉㌔㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼
≒≡∫∮∑√⊥∠∟⊿∵∩∪0@P`p!1AQaq"2BRbr#3CScs$4DTdt%5EUeu&6FVfv'7GWgw(8HXhx)9IYiy*:JZgz+;K[k{,<L\l|-=M]m}.>N^n~/?O_o

もし第一水準から漏れているけど必要な漢字がある場合は自分で加える必要があります。

とはいえ、入っているかどうかわからないと思うので、これは実際のサイトで表示を確認し、ないもの（フォントが当たっていないもの）があれば追加するという方法しかないかと…。

大体上記から漏れるのは『苗字』ではないかと思います。苗字は特殊な場合が多いですので…。

例えば

僕の場合『躊躇（ちゅうちょ）』という字を足したケースがありました。

Googleドキュメント等で、自分の『サブセットフォントリスト』を作成しておくのがオススメです。

Webフォントをwoffまたはwoff2形式に（フォントデータ圧縮）

フォントは通常の状態だと「.otf」や「.ttf」などになっています。

これをWebに適した形式に変換することでファイルサイズを圧縮します。

woffよりwoff2の方が圧縮率が高いのでオススメですが、woff2はIEに対応していないため、WebフォントのIE対応については、クライアントとすり合わせが必要です。

サイトスピードを重視するならば、（そもそもWebフォントを使わないという選択肢を除外した場合）woff2形式にして、IEは標準フォント（メイリオなど）で表示する方法も是非検討してみてください。

先ほど紹介したサブセットフォントメーカーを提供しているサイトがWOFFコンバーターも出しているので、そちらを使います。

WOFFコンバータ

https://opentype.jp/woffconv.htm

font-displayを使用する

こちらもWebフォントに関する内容です。

font-display: swapを記述することで、Webフォントが読み込まれるまでの間は代替フォントを読みこんでくれます。

一瞬標準フォントが当たった後、Webフォントが読みこまれるような挙動になる可能性があるので、それを嫌う人は採用できません。

こちらは、CSSに1行追加するだけです。

@font-face {
  font-display: swap;
  font-family: myfont;
  src: url(/path/myfont.woff2) format('woff2'),
}

font-displayはswap以外にもプロパティがありますので、詳しく知りたい方は下記をご参照ください。

（参考）MDN Web docs

https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/font-display

GTMタグ削減

GTM(Google Tag Manager）を使っている場合、あまりにも多くのタグを設定していないでしょうか？

もし不要なタグがある場合は削除しましょう。

GTMタグはheadで読み込むため、読み込むjavascriptコードが多いほど、サイト表示に時間がかかります。

では適切な量は？と言われると難しく、計測のためにどうしても外せないタグもありますのでこの辺りはある程度トレードオフな部分もあるかと思います。

サーバー容量の削減・見直し

基本的に、

エックスサーバーかミックスホストでサーバーを立てれば問題ないと思います。

僕はエックスサーバーを契約しましたが、もし次契約するならミックスホストでサーバーを立ててみたいです。

知り合いのエンジニアさんがミックスホストを使っておりかなり良さそうなので。

ミックスホスト

エックスサーバー

どんなサーバーを使っているか？というのはかなり重要でして、フロント側でどんなに頑張ってもサイトスピードが改善しない場合、実はサーバースペックの問題かもしれません。

一般的なPCと同じく、これらの要素がサイトスピードに影響します。（上記レンタルサーバーならば基本的に問題はないですが。）

僕の事例では、クライアントさんが制作会社さんの自社サーバーを使われており、サーバースペックが弱小だった…というケースがありました。

バックアップデータが容量を圧迫していないか？

また、もしかするとバックアップデータがサーバー容量を圧迫しているかもしれません。ワードプレスプラグインでBackWpUpは個人的に注意が必要と思っています。

ワードプレスでのバックアッププラグインならUpdraftPlusがオススメです。

ワードプレスが重いのはBackWPupのせい？バックアップはUpdraftPlus一択

こんにちは！フリラーンスWebディレクター兼エンジニアののせっちです。 ワードプレスのバックアップといえば、B…

flex-box.net

キャッシュ系プラグインの導入

ここからはワードプレスに関することです。

ワードプレスサイトはphpを用いてmysqlからデーターベースを引っ張ってきて、動的にページを生成しています。

ユーザーがサイトを訪問する度にこの作業を行なうのではなく、キャッシュ系プラグインを使って静的にページを表示できるようにします。

キャッシュ系プラグインはWP Super CacheやWP Fastest Cacheが定番です。

WP Super Cache

https://ja.wordpress.org/plugins/wp-fastest-cache/

WP Fastest Cache

https://ja.wordpress.org/plugins/wp-fastest-cache/

上記プラグインの有効化を外したらサイトがバグった！という例があるようです。
原因はプラグインがwp-contentの中に専用のフォルダを作ったり、スクリプトを書いたりするかららしい。

便利なプラグインですが、外したくなったら必ずバックアップを取りましょう。

CSS（JS）のインライン化

外部リソースの読み込みはサイトスピードに影響し、Page Speed Insightsでも減点対象になります。

CSSやJSファイルをインライン化することで外部ファイルの読み込み数を減らします。

プラグインですとAutoptimizeが有名です。

Autoptimize

https://ja.wordpress.org/plugins/autoptimize/

こちらのプラグインが原因で逆に表示崩れであったり、jsが効かないといった不具合が発生する場合があるので、設定には注意が必要です。

オススメ書籍

HTMLコーダー＆ウェブ担当者のためのWebページ高速化超入門

HTMLコーダー＆ウェブ担当者のためのWebページ高速化超入門

posted with ヨメレバ

佐藤あゆみ 技術評論社 2019年05月01日

楽天ブックス

楽天kobo

Amazon

Kindle

今回ご紹介した知見は、僕が継続でお付き合いさせているクライアントさんからの要望に応える形で少しずつ身につけていったものです。

「本当に効果があるのか・・・？」と手探りで行ってきた部分もあり、随分遠回りだったと思います。

こちらの書籍には、

といった事が学習でき、とても勉強になります。
辞書的に持っておきたい一冊です。

僕が行ってきた施作も入っており、やはり効果あったのか…と安心しました！

オススメです！

HTMLコーダー＆ウェブ担当者のためのWebページ高速化超入門

posted with ヨメレバ

佐藤あゆみ 技術評論社 2019年05月01日

楽天ブックス

楽天kobo

Amazon

Kindle