• 목록
  • 아래로
  • 위로
  • 12
  • Hanam09
  • 조회 수 358

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


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

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


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


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

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

 

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

포함 1명이 추천

추천인 1

작성자
Hanam09 36 Lv. (50%) 106610/109520EXP

 

안녕!

 

댓글 12

joyfuI
+1

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

comment menu
2019.07.18. 09:45

신고

"joyfuI님의 댓글"

이 댓글을 신고 하시겠습니까?

제르엘
profile image

 

 

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

comment menu
2019.07.18. 11:12

신고

"제르엘님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → 제르엘
profile image

wix하고 맞먹네요..

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

comment menu
2019.07.18. 11:56

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → Hanam09
profile image

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

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

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

comment menu
2019.07.18. 11:59

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

제르엘 → Hanam09
profile image

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

comment menu
2019.07.18. 13:05

신고

"제르엘님의 댓글"

이 댓글을 신고 하시겠습니까?

신고

"BVC_Liper_Okbul님의 댓글"

이 댓글을 신고 하시겠습니까?

MySQL
profile image

대단하네요

comment menu
2019.07.19. 18:21

신고

"MySQL님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → MySQL
profile image

감사합니다!

comment menu
2019.07.19. 18:26

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 크롬NUBE
profile image

진짜 대박이네요 bb

comment menu
2019.07.21. 00:29

신고

"NUBE님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리
profile image

오오~ 축하드립니다!

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

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

 

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

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

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

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

comment menu
2019.08.07. 02:01

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → 이니스프리
profile image

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

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

 

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

 

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

 

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

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

 

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

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

 

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

comment menu
2019.08.07. 17:48

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 → Hanam09
profile image
+1

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

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

 

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

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

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

 

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

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

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

 

그럼 굿밤되세요 :)

다시 한 번 감사드립니다!

comment menu
2019.08.07. 23:03

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 마스터 24.02.11.17:21 396
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 마스터 23.01.14.02:23 4075
공지 낚시성 불법도박 홍보 게시글을 주의하세요. 9 image 네모 네모 22.08.09.18:13 459
공지 슬기로운 포인트 벌이를 하는 법 (22.10.11 업데이트) 64 네모 네모 18.06.17.20:25 15360
4768 드디어.. 3 Nginx Nginx 19.07.29.14:23 159
4767 대략 휴가 버킷리스트 4 국내산라이츄 국내산라이츄 19.07.29.13:51 130
4766 낼 면접날입니다 (회사이직 물류) 6 핫슈 19.07.29.12:36 169
4765 안녕하세요 10 Layna Layna 19.07.29.10:38 118
4764 오늘부터 휴가 출발하는데 비가 ㅠㅠ 9 NoYeah NoYeah 19.07.28.10:15 159
4763 어제 또 간만에 신분증 검사 당할 뻔 했쟈나여 12 국내산라이츄 국내산라이츄 19.07.27.22:31 226
4762 ㅍㅂㅉ 1 image 네모 네모 19.07.27.00:20 148
4761 디스이즈 잡담 image 국내산라이츄 국내산라이츄 19.07.27.00:12 141
4760 아침에 비 겁나 퍼붓던데요 ㄷㄷ 3 국내산라이츄 국내산라이츄 19.07.26.14:36 127
4759 오늘 습도가 정말 높네요..! 2 혜임 19.07.25.09:49 759
4758 [생활코딩] 코딩야학 6기를 모집하고 있네요 ^^ 3 image 이니스프리 이니스프리 19.07.23.17:12 224
4757 알라딘 7 image 네모 네모 19.07.22.22:10 230
4756 많이 아물엇습니다 ㅎㅎ 3 image 핫슈 19.07.22.07:01 185
4755 진돗개 하나는 일단 해제상태임다 ㅇㅅㅇ 4 국내산라이츄 국내산라이츄 19.07.21.22:15 121
4754 안녕하세요 10 MySQL MySQL 19.07.19.18:21 175
4753 안녕하세요 3 OAUTH2 19.07.19.16:06 140
4752 담달에 회사 이직 새로 구해야갯내요 ㅜㅜ 8 핫슈 19.07.19.12:16 169
코드를 쥐어 짜넸더니 이런 결과가 나와버렸습니다. 12 image Hanam09 Hanam09 19.07.17.23:42 358
4750 일본제품 목록과 대체재 관련 정보 사이트입니다. 8 칸달프 칸달프 19.07.17.15:48 576
4749 회사 비상사태입니다... 11 국내산라이츄 국내산라이츄 19.07.17.12:38 199