자유게시판

코드를 쥐어 짜넸더니 이런 결과가 나와버렸습니다.

Hanam092019.07.17 23:42조회 수 204추천 수 1댓글 12

  • 2
    • 글자 크기

팀원들이 WIX로 홈페이지 하나 만들겠다고 해서 만들었는데  엄청 느리고 최적화가 답이없어서 제가 다시 밑바닥부터 만들었습니다


제 최초로 팀원들을 위해  NProgress 라이브러리 하나 사용하고 스크립트,CSS,HTML,PHP 짜네서 올리고

테스트하니 저런결과 나오네요. ㄸ


최적화하나를 위해서 코드를 진짜 쥐어  짰는데, 와... 이런결과가 나오다니  감동입니다.


HTML은 최대한 가독성있게 짜올리고 JS부분에서는 PJAX를 이용하여 극적인 속도 향상을, PHP부분에서는 AJAX로 요청하는지 판단하여 AJAX일경우 본문만,

아닐경우 본문을 포함한 HTML소스코드 전체를 반환합니다. 또한 브라우져가 크로미움 기반일때는 이미지 파일은 webp형식으로 보내어 용량을 절감하고 속도를 향상시킵니다. 아닐경우 첫 요청때 png 파일형식으로 보내고 webp지원여부를 JS로 다시 확인하여  쿠키로 지원여부를 저장해서 다음연결부터 webp로 보내집니다. .htaccess부분에서는 캐시를 담당(폰트 이미지 파일 캐싱)합니다. CSS는 로컬에 폰트가 있는지 확인하고 없으면 서버에서 내려받아 사용합니다.

 

이런점수를 받아 기분이 좋았습니다.

 

안녕!

 

  • 2
    • 글자 크기
담달에 회사 이직 새로 구해야갯내요 ㅜㅜ (by 핫슈) 일본제품 목록과 대체재 관련 정보 사이트입니다. (by 칸달프)
  • 2019.7.18 09:45

    온갖 최적화 기법을 사용하셨군요..ㄷㄷ

  • 2019.7.18 11:12

     

     

    제 사이트는 모바일 12점 데스크톱 53점 나오네요...

  • @제르엘
    Hanam09글쓴이
    2019.7.18 11:56

    wix하고 맞먹네요..

    wix로 할때는 모바일 17 17점 데스크톱 51점 나왔습니다.

  • Hanam09글쓴이
    2019.7.18 11:59

    그리고 제르님 사이트를 다시한번 측정해보니 이미지 파일 형식만 바꿔도 8초가량 더 빠른 로드를 기대할 수 있습니다

    https://wordpress.org/plugins/search/convert+webp/

    이 플러그인을 참고하세요!

  • @Hanam09
    2019.7.18 13:05

    오, 그렇다면 나중에 WebP 형식을 시범 적용해봐야겠네요.

  • 2019.7.18 23:08

    오오 최적화...!

  • 2019.7.19 18:21

    대단하네요

  • @MySQL
    Hanam09글쓴이
    2019.7.19 18:26

    감사합니다!

  • 2019.7.21 00:29

    진짜 대박이네요 bb

  • 오오~ 축하드립니다!

    저같은 사람은 흉내도 내지 못할 점수인데 정말 ㅎㄷㄷ 하네요! ^^

    아미나 자체 캐쉬 사용하고 이미지 많지 않고 다른 부분은 건드리지 않은 아미나로 제작한 사이트가 40점대 나왔던 것으로 기억하는데요.

     

    SEO도 100점 받으셨는데 혹시 SEO 최적화를 위하여 prerendering 같은 것도 함께 사용하시는지 여쭤봐도 될까요??

    구글봇은 서버 렌더링이 필요없다는 얘기도 있던데 PJAX 사용해보시니 정말 그런가요??

    저도 조만간에 낮은 스펙의 VPS로 억지로 커뮤니티 하나를 짜내야 되는데 벌써부터 골치부터 아프네요 ㅠㅠ

    태풍이 소멸했다고 하던데 그래도 비 조심하세요~!

  • @이니스프리
    Hanam09글쓴이
    2019.8.7 17:48

    일단 구글은 Ajax만으로 이루어진 SPA페이지도 읽어들일 수 있습니다.

    아마 Python 의 Selenium같은걸로 크롤링 하나 봅니다.

     

    저같은 경우는 미리랜더링 시스템은 이용하지 않았습니다.

     

    하지만 서버쪽 랜더링은 부분적으로 사용했습니다.

     

    Ajax로 요청하면 PHP에서 Ajax인것을 판단하여 본문만 반환하고,

    Ajax없이 직접 링크타고 들어가면 페이지 HTML전체를 반환합니다.

     

    일반적으론 SPA페이지에 접속했을때,

    서버쪽 랜더링으로 기본 Page 골격구조와 Ajax가공방식 Script파일 받아오고 또다시 그 페이지의 본문을 받기위하여 1번의 Ajax요청을 해야합니다. 이런 경우 일부 검색엔진에대해 SEO점수가 낮아질 수 있고 또 HTTP요청이 한번 더 발생하기 때문에 저는 Ajax구별해서 응답하도록 했습니다.

     

    이 경우 SEO, 속도, 데이터소비량을 모두 잡을 수 있기때문이죠.

  • @Hanam09

    옙 상세히 답변해주셔서 번번이 감사합니다!

    서버 쪽 렌더링을 하는 것보다 Ajax 구별하여 응답하는 것이 SEO 측면에서나 효율성 측면에서나 장점이 있군요!

     

    그나저나 역시 구글봇은 똑똑하네요~

    Lynx처럼 자바스크립트는 지원하지만 이미지나 멀티미디어 파일은 열 수 없는 브라우저와 유사하겠네요 ㅋㅋ

    말씀하신대로 구현을 하면 네이버나 다음봇을 비롯한 다른 봇들도 문제가 없겠네요 ^^

     

    제가 그동안은 너무나 당연히 Ajax가 정상적으로 작동하는 것을 전제로 코드를 작성해왔고

    if (window.XMLHttpRequest) ~ else로 브라우저 또는 봇이 Ajax를 지원하는지 여부를 확인해본 것이 전부인 수준이라서

    좀 더 공부를 해서 설명해주신 방법대로 구현해보겠습니다~

     

    그럼 굿밤되세요 :)

    다시 한 번 감사드립니다!

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 사이트 정보 등록에 경고로 변경된 분들 참고하세요.7 마스터 2019.06.19 1089
공지 [중요 공지 포함] 사이트가 복구 되었습니다.42 마스터 2019.06.18 1396
공지 호스팅 신청이 다시 가능합니다.18 마스터 2019.04.18 2173
공지 회원 전용 페이지가 생겼습니다.15 마스터 2018.03.20 8033
공지 슬기로운 포인트 벌이를 하는 법45 네모 2018.06.17 2187
4866 드디어..3 Nginx 2019.07.29 79
4865 대략 휴가 버킷리스트4 title: 머그잔(명탐정 피카츄)왕뚠뚠돈까스라이츄 2019.07.29 48
4864 낼 면접날입니다 (회사이직 물류)6 핫슈 2019.07.29 58
4863 안녕하세요10 Layna 2019.07.29 61
4862 오늘부터 휴가 출발하는데 비가 ㅠㅠ9 맛스타 2019.07.28 77
4861 어제 또 간만에 신분증 검사 당할 뻔 했쟈나여12 title: 머그잔(명탐정 피카츄)왕뚠뚠돈까스라이츄 2019.07.27 118
4860 ㅍㅂㅉ1 네모 2019.07.27 60
4859 디스이즈 잡담 title: 머그잔(명탐정 피카츄)왕뚠뚠돈까스라이츄 2019.07.27 28
4858 아침에 비 겁나 퍼붓던데요 ㄷㄷ3 title: 머그잔(명탐정 피카츄)왕뚠뚠돈까스라이츄 2019.07.26 61
4857 오늘 습도가 정말 높네요..!2 혜임 2019.07.25 50
4856 [생활코딩] 코딩야학 6기를 모집하고 있네요 ^^3 이니스프리 2019.07.23 143
4855 오랜만이에용 도토리묵 2019.07.22 50
4854 알라딘7 네모 2019.07.22 110
4853 많이 아물엇습니다 ㅎㅎ3 핫슈 2019.07.22 118
4852 진돗개 하나는 일단 해제상태임다 ㅇㅅㅇ4 title: 머그잔(명탐정 피카츄)왕뚠뚠돈까스라이츄 2019.07.21 88
4851 안녕하세요10 MySQL 2019.07.19 103
4850 안녕하세요3 title: 포토샵포인트폭탄- 2019.07.19 67
4849 담달에 회사 이직 새로 구해야갯내요 ㅜㅜ8 핫슈 2019.07.19 102
코드를 쥐어 짜넸더니 이런 결과가 나와버렸습니다.12 Hanam09 2019.07.17 204
4847 일본제품 목록과 대체재 관련 정보 사이트입니다.8 칸달프 2019.07.17 470
이전 1 2 3 4 5 6 7 8 9 10... 246다음
첨부 (2)
Pagespeed.png
132.0KB / Download 1
performence.png
132.2KB / Download 1
서버에 요청 중입니다. 잠시만 기다려 주십시오...