하나의 항목에 HTML 소스의 <style> 혹은 CSS가 여러번 적용이 되어있을 때 웹 로딩 속도

조회수 1589회

안녕하세요

현재 인턴 아르바이트로 HTML+CSS+JSP를 공부해가면서 실무를 하고 있는 학생입니다.

 

저는 저희 회사 내부에서만 사용되는 회사 제품(보안/인증 서비스) 테스트 페이지 개발을 돕고 있는데, 일주일 전에 해당 페이지의 UI를 통일하라는 지시를 받아서 소스를 고쳤습니다.

방식1. 제가 모르는 다른 페이지의 동일 태그 사용 항목들이 변경될까봐 해당 html/jsp 소스의 특정 태그들 안에 직접 스타일을 수정하였습니다.

ex)

<div class="어쩌고">
    <div class="저쩌고">
        <h5 class="이러쿵저러쿵">

<div class="어쩌고" style="float: left;">
    <div class="저쩌고">
        <h5 class="이러쿵저러쿵" style="margin-bottom : 10px">

로 변경

방식2. 해당 html/jsp 소스 내에서만 수정하고 싶은 동일 태그 사용 항목들이 여러개라 소스 앞부분에 스타일을 적용하였습니다.

ex)

<style>
.이거, .저거{
    font-size : 15px;
}
.요거, .죠거 {margin-bottom : 15px;}
</style>

방식3. 모든 페이지의 특정 태그를 수정하고 싶을 때 css 소스 하나에 구문 추가하였습니다.

ex)

header .그거:hover,
header .그거:focus{
    color:#B70000;
    cursor: pointer;
}

방식4. (스타일시트와는 관계 없지만 같이 묶어서 질문합니다) 공통으로 사용되는 부분을 tag파일로 독립시켰습니다.

ex)

기존에 있던 홈페이지.jsp와 나머지 페이지에서 사용되는 bottom.tag 안에서 footer 태그 내용이 거의 비슷해서 따로 footer.tag를 만들고 <tag:footer/>로 불러오게 했습니다. footer 태그에 마지막 페이지 수정 날짜도 들어가기 때문에, 쉽게 찾아서 쉽게 고치게 만들 의도도 있었습니다.

 

그런데 크롬 개발자 모드로 검사 해가면서 소스를 수정해보던 도중, 매 페이지마다 여러 장의 CSS가 적용되어 있고, 해당 CSS 안에서도 안쓰이는 구문들이 상당히 많다는걸 알게되었습니다. 직접 회사에서 만든 스타일시트가 아니라 bootstrap에서 정식 구매한 스타일시트 묶음이라 그런 것 같은데, 그 스타일시트들 안에서도 서로 중복되는 구문들이 많습니다.

그래서 궁금해졌는데, 안그래도 여러 스타일시트가 매 페이지마다 로드가 되는 환경에서, 제가 임의적으로 추가한 구문들까지로 적용되면 웹 로딩 속도가 많이 떨어지지 않을까요? 제가 느끼기엔 별 차이가 없는데, 이게 원래 사용되는 방식이라 괜찮은 건지 많이 수정을 안해서 차이가 안느껴지는 건지를 모르겠습니다.

질문 정리:

  1. 동일 항목을 여러 방식으로 스타일 적용 시켰을 때, 웹 로딩 속도가 사용자가 불편을 느낄 정도로 많이 떨어지는지

    1-1. 그렇다면 스타일시트에서 사용되지 않는 구문이나, 중복돼서 필요 없는 구문을 지워야 할 필요가 있는지 + 쓰이지 않는 구문을 일일이 찾지 않고 한번에 찾아 지울 수 있는 방법이 있는지

  2. 실제 현장 웹 개발자들은 웹 UI 제작시 어떤 방식으로 하는지 (bootstrap에서 구매 후 스타일시트들을 모조리 소속 회사 스타일에 맞게 바꾼다, 안쓰이는 구문이 있어도 냅둔다, 등등)

제가 수정하고 있는 페이지는 네이버 같이 외부 이용자들이 많이 이용하는게 아니라 저희 회사원 열 몇 명들끼리만 쓰는 용도라 최적의 로딩속도가 필수적인건 아니지만, 그래도 궁금해서 질문해봅니다.

1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    극단적인 케이스(과도한 트렌지션을 남용하거나, 대용량 이미지를 사용하거나, inline style을 엄청나게 많이 도배하거나)를 제외하고, inline style을 사용해서 불필요한 중복 코드를 양산해서 좋을 건 없습니다만 보통은 눈에 띄는 속도 저하가 생기지는 않습니다. (물론 수치적으로 느려지긴하지만..)

    다만, 속도보다도 이후에 코드 자체가 더러워지기 때문에, 운영/업데이트할 때 절대 좋을 건 없어요. 따라서 최대한 외부 css파일을 이용하는 게 좋아요.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)