Google Pagespeed 를 사용하여 사이트 최적화하기 (캐시서버 구축하기)

HYEONG HWAN, MUN/ 7월 18, 2022/ 미분류/ 2 comments

https://blog.lael.be/post/11272

이 글을 통해 소스코드를 바꾸지 않고 나의 웹서비스를 최적화 하는 방법에 대해 알아보도록 합시다.

어느정도 리눅스를 다루어본 경험이 있다고 가정하고 설명합니다.

 

웹서비스의 가장 끝단에 필터를 설치하여 최적화를 진행합니다. 이렇게 동작하는 서비스 예시로는 Cloudflare가 있습니다.

사용자 <=> 필터(또는 프록시) <=> 웹서버 결과물

 

1. Ubuntu OS에 Apache, PHP 설치

Apache 만 설치해도 됩니다. 다만 일반적으로 PHP 웹서비스와 함께 사용합니다.

MYSQL 같은 DB는 설치하지 않아도 됩니다.

- Ubuntu 18.04 LTS - https://blog.lael.be/post/7264
- Ubuntu 20.04 LTS - https://blog.lael.be/post/10608
- Ubuntu 22.04 LTS - https://blog.lael.be/post/11072

 

2. MY CDN 소스코드 설치

사용 예제 코드입니다. 이것을 사용하지 않고 나만의 웹사이트에 바로 적용할 수도 있습니다.

- https://blog.lael.be/post/7605

 

3. Google PageSpeed 설치

공식 사이트 : https://www.modpagespeed.com/doc/download

Google PageSpeed 프로젝트는 Google 에서 적극적으로 개발하고 있는 Open source Project 입니다.
Google Pagespeed -> Apache PageSpeed (Incubating) -> Apache PageSpeed 가 될 예정입니다.

Apache Incubator 재단의 후원을 받고 있습니다. Apache 메인 프로젝트가 되기 위해 노력중입니다.

 

pre-apache stable 버전이란, apache pagespeed 로 이름 바꾸기 직전의 프로그램(google pagespeed)라는 뜻입니다.

공식 apache project 에 등록되면, ubuntu main repository 에 등록될 것이므로, 공식 프로젝트 승격 전까지는 google pagespeed 를 쓰시고, 공식 등록되면 apache pagespeed 를 사용하세요.

 

이 패키지는 Google 팀에의해 최신버전으로 유지보수가 됩니다.

Ubuntu 에서 설치파일의 확장자는 .deb 입니다. 다운받습니다.

 

pagespeed 패키지가 있는지 확인

apt-cache search pagespeed

pagespeed 다운로드

wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb

pagespeed 설치

dpkg -i mod-pagespeed-stable_current_amd64.deb

 

추가된 저장소 코드는 여기에 있습니다.

cat /etc/apt/sources.list.d/mod-pagespeed.list

 

pagespeed 모듈 켜기

a2enmod pagespeed

 

아파치 재시작

service apache2 restart

자동 적용 됩니다.

 


결과

 

확인

pagespeed 적용됨 : http://pagespeed.lael.be/

pagespeed 적용안됨 : http://pagespeed.lael.be/no-pagespeed/

페이지의 소스보기 후에 비교해 보세요.

 

 

환경 설정은 다음의 위치에서 할 수 있다.

vi /etc/apache2/mods-available/pagespeed.conf

 

환경설정 값 설명

https://www.modpagespeed.com/doc/config_filters

기본 ModPagespeedRewriteLevel 값은 CoreFilters 이며, pagespeed 개발팀이 미리 선택한 안전한 필터들로 구성되어 있다.

 

< 위의 pagespeed.conf 설정에 의해 기본적으로 전체 사이트에 자동작동한다 >

 

< 원본 코드 >

 

< 자동으로 변경된 코드 >


실무 적용 팁

모든 사이트에 대해서 동작하는데, 별로 좋지 않더라.
꼭 필요한 사이트에서, 꼭 필요한 옵션만 사용하는 것을 권장합니다.

 

1. pagespeed 끄기

# vi /etc/apache2/mods-available/pagespeed.conf

ModPagespeed off 로 변경

 

2. Apache 재시작

# service apache2 restart

 

3. 원하는 사이트 위치에 .htaccess 파일 생성

<IfModule pagespeed_module>
    ModPagespeed on
    ModPagespeedRewriteLevel PassThrough
    ModPagespeedEnableFilters remove_comments,collapse_whitespace,
    ModPagespeedEnableFilters rewrite_css,rewrite_javascript
    # ModPagespeedEnableFilters remove_quotes
    ModPagespeedEnableFilters responsive_images,resize_images
    # ModPagespeedEnableFilters lazyload_images
    # You need to understand what the options mean.
</IfModule>

위의 코드로 저장하세요.

 

4. 옵션 설명

pagespeed option
no 옵션 설명
1 ModPagespeed on Pagespeed 모듈 켜기
2 ModPagespeedRewriteLevel PassThrough 기본 필터 사용안함
3 remove_comments html 코드에서 주석 제거
4 collapse_whitespace html 코드에서 불필요한 공백 제거
5 rewrite_css (가능하다면) css 를 minify. 인라인 및 파일정리.
6 rewrite_javascript (가능하다면) js 를 minify. 인라인 및 파일정리.
7 remove_quotes html에서 따옴표 제거 후에도 해석이 가능하면 따옴표 제거.
8 resize_images img 태그에 크기옵션 (width or height) 속성이 있으면 리사이즈된 이미지로 표시
9 responsive_images 화면 픽셀 밀접도(2x for retina. 3x for ipad)에 따라 적절한 이미지로 표시. 모든 화질의 이미지를 준비함.
10 lazyload_images lazyload 사용. 화면에 보이는 이미지만 로드함.

 

최적화 옵션 예제 설명

< remove_quotes >

< resize_images, responsive_images >

 

2 Comments

  1. 안녕하세요 라엘님

    항상 좋은 글 많이 보고 있습니다

    요즘 nginx에 대한 글이 많이 없어서 apache로 넘어가야하나 고민도 있습니다 ㅠㅠ

    다름이 아니라 시간 나실 때 혹시 nginx에도 사용할 수 있게 글을 작성해주시면 안될까 해서 여쭈어 봅니다

    그럼 좋은 하루 되세요

    1. 이 글을 apache 환경으로만 작성한 이유는, nginx 환경에서의 구축 방법은 번거로워서 세팅과 유지보수에 문제가 있을 것으로 판단했기 때문입니다.
      nginx 버전 글 작성은 조금 더 생각해보겠습니다.
      감사합니다.

이민호에 답글 남기기 응답 취소

작성하신 댓글은 관리자의 수동 승인 후 게시됩니다.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*