구글 스피드 Pagespeed 페이지 스피드 성능 개선 인라인과 지연에 대해 알아보기
본문
1. 인라인
--css--
<head>
<style>
body {
backgrlund-color:#3a3a3a;
}
</style>
</head>
--js--
<head>
<script>
function myFunction() {
alert("Hello, World!");
}
</script>
</head>
위와 같이 페이지 내에 (중요한)스타일 코드나 자바스크립트 코드를 직접 삽입하는 방식입니다.
이러한 방식은 웹페이지 성능 향상에 유용하게 사용될 수 있습니다.
보통
tak2님의 댓글
tak2 아이피
(192.♡.0.1)
작성일
`defer`와 `async`는 둘 다 스크립트 로딩의 동작을 변경하는 HTML 속성이지만, 각각 다른 방식으로 작동합니다. 어떤 것이 더 성능에 도움이 되는지는 사용하는 상황에 따라 달라질 수 있습니다.
**1. async**
`async` 속성이 있는 스크립트는 페이지의 파싱과 동시에 병렬로 다운로드되며, 다운로드가 완료되면 페이지의 파싱을 멈추고 스크립트를 실행합니다. 이는 스크립트 로딩과 실행이 페이지 로딩을 차단하지 않도록 하지만, 스크립트의 실행 순서를 보장하지 않습니다. 따라서 서로 의존성이 없는 스크립트에 적합합니다.
**2. defer**
`defer` 속성이 있는 스크립트는 페이지의 파싱과 동시에 병렬로 다운로드되지만, 페이지의 파싱이 완료된 후에야 실행됩니다. 이는 스크립트의 실행 순서를 보장하며, 페이지 로딩을 차단하지 않습니다. 따라서 실행 순서가 중요한 스크립트, 예를 들어 jQuery 플러그인 같은 스크립트에 적합합니다.
결국 어떤 속성을 사용할지는 스크립트의 특성과 웹사이트의 요구사항에 따라 결정해야 합니다. 페이지 로딩 속도를 최적화하기 위해서는 이러한 기법을 적절히 활용하는 것이 중요합니다.
2kat님의 댓글
👍