똑같은 삽질은 2번 하지 말자

[SEO] 웹 성능 개선 참고 본문

SEO

[SEO] 웹 성능 개선 참고

곽빵 2021. 4. 5. 00:17

웹이 그려지는 과정과 최적화 방법에대해  자세히 나와있음

ui.toast.com/fe-guide/ko_PERFORMANCE

 

성능 최적화 | TOAST UI :: Make Your Web Delicious!

성능 최적화 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께

ui.toast.com

Core Web Vitals

구글에서 Core Web Vitals지표를 보고 검색랭킹에 반영한다는 발표를 2020년에 함

brunch.co.kr/@bamchi/14

 

Core Web Vitals에 대하여 (SEO)

구글은 검색순위를 정할 때 Core Web Vitals 지표를 중시한다 | 구글은 검색 노출 순위를 정할때 페이지 탐색 경험 지표를 사용한다고 합니다. 좀 더 상세하게 설명하자면 사용자가 웹 페이지 이용

brunch.co.kr

Google Search Console 지표 설명

seopack.jp/seoblog/searchconsole-cls-lcp-fid/

 

サーチコンソールで目にする「CLS」「LCP」「FID」ってなに?改善方法は? | SEO Packの最新SEO情報

SEO Packのブログ「サーチコンソールで目にする「CLS」「LCP」「FID」ってなに?改善方法は?」の記事です。

seopack.jp

leap-in.com/ja/use-passive-true-avoid-janky/

 

passive: trueでなぜパフォーマンスがよくなるの?簡単な説明と使い方! | LeapIn

スクロールした際のパフォーマンスが悪い場合(スクロールがカクつく場合)にはpassive:trueの使用を検討しましょう。この記事ではイベントリスナーにpassive:trueというヒントを使うことで、

leap-in.com

자바스크립트의 이벤트 루프(함수가 실행되는 원리도 설명하고있다.)

asfirstalways.tistory.com/362

 

[JS] JavaScript의 Event Loop

[JS] Javascript 작동 원리에 대해서, Event Loop Javscript를 공부하다 보면 이런 말을 종종 듣는다. 싱글스레드 기반으로 동작하는 자바스크립트 이벤트 루프를 기반으로 하는 싱글 스레드 Node.js 이런

asfirstalways.tistory.com

wheel, mousewheel, touchstart, touchmove 이벤트 최적화

amati.io/eventlisteneroptions-passive-true/

 

{ passive:true } 의 진정한 의미 - amati.io

addEventListener는 대상에 지정한 이벤트가 들어올 경우 호출할 함수를 등록하는 method입니다. 자바스크립트를 하는 사람이라면 누구나 아는 기초적인 method이죠. 하지만, 과거에는 addEventListener가 웹

amati.io

웹캐시

hahahoho5915.tistory.com/33

 

웹 캐시(WEB Cache)란 무엇인가?(특징)

개요 > 웹 캐시(WEB Cache)가 무엇(What)인가? > 웹 캐시(WEB Cache)를 사용하는 이유(Why)? 멋대로 요약 캐싱 기본 개념 : 캐싱(Caching)은 애플리케이션의 처리 속도를 높여준다. 이미 가져온 데이터나.

hahahoho5915.tistory.com

Vue 퍼포먼스 개선

devhyun.com/blog/post/20

 

Vue Devtools 퍼포먼스 개선 포인트 찾기 - 데브현

아래는 Qiita에 개재된 「Vue Devtoolsでパフォーマンス改善ポイントを見つける」를 번역한 내용입니다. 다소 의역이 있어 어색한 부분이 있어도 양해 부탁드립니다. 🙉 원문 보기 이 포스팅은 Vue.

devhyun.com

laravel.kr/docs/5.8/blade

 

라라벨 5.8 - 블레이드 템플릿

라라벨 한글 메뉴얼 5.8 - 블레이드 템플릿

laravel.kr

이미지 최적화

1. 이미지 CDN 을 통해 최적화된 크기로 전달하거나

2. 언스플래쉬 

https://unsplash.com/documentation#supported-parameters

 

Unsplash API Documentation | Free HD Photo API | Unsplash

Getting started This document describes the resources that make up the official Unsplash JSON API. If you have any problems or requests, please contact our API team. Creating a developer account To access the Unsplash API, first join. Registering your appl

unsplash.com

이런식으로도 가능

3. static 리소스면 직접 수정

 

bottlenect 코드 탐색?

 

google tag manager prefetch preconnect

paranishian.hateblo.jp/entry/2018/11/02/183724

 

Resource Hintsの対応をしてWebPageTestの点数を改善した - paranitips

はじめに いま開発チームでサイト速度改善に取り組んでいて、 その一環でResource Hintsの対応をしたので、調べたこととリリース後の効果をまとめます🙌 調べたこと まずはResource Hintsについ

paranishian.hateblo.jp

 

이미지 최적화 사이트

imagecompressor.com/ko/

 

온라인 이미지 최적화기

Optimizilla는 궁극의 이미지 최적화기로 당신의 JPEG과 PNG 포맷을 가능한 최소 크기로 압축합니다.

imagecompressor.com

 

 

 

번들 최적화에 대한 기사

medium.com/shard-labs/how-to-drastically-reduce-your-bundle-size-and-load-time-in-vue-js-54370d513fdf

 

How to drastically reduce your bundle size and load time in Vue.js

Performance is one of the most important aspects when it comes to web applications. Here’s how we improved our Vue.js app’s performance.

medium.com

 

CLS 수정 방법

www.alta.co.jp/blog/post-582/

 

CLS(Cumulative Layout Shift)を計測してみた! | 株式会社アルタのごった煮ブログ

マークアップエンジニアのアシュリーです。今日は、Core Web VitalsのひとつであるCLS(Cumulative Layout Shift)の話。 Core Web Vi...

www.alta.co.jp

 

LCP 에 관한 article

web.dev/optimize-lcp/

 

Optimize Largest Contentful Paint

Largest Contentful Paint (LCP) can be used to determine when the main content of the page has finished rendering on the screen. Learn how to optimize LCP by improving slow server response times, resource load times and client-side rendering.

web.dev

 

클라우드 플레어

www.ridicorp.com/story/cloudflare-dos-and-donts/

 

Cloudflare 도입 후기 - 리디주식회사 RIDI Corporation

5년간의 Cloudflare 사용 후기를 공유합니다.

ridicorp.com

 

Core Web Vitals 에 관한 가이드 

https://www.contentkingapp.com/academy/core-web-vitals/

 

The Ultimate Guide to Core Web Vitals

Give your users a better user experience!

www.contentkingapp.com

 

Comments