사라지는 플로팅 레이블 및 녹색 등대 점수

Smashing의 무대 뒤에서는 항상 무언가가 일어나고 있습니다. 지난 몇 달 동안 우리는 사이트의 성능 문제를 해결하기 위해 지속적으로 노력해 왔지만 양식에서 부동 레이블을 제거하고 오류 메시지를 재설계했으며 멤버십 대시보드를 개편했으며 반응형 테이블을 리팩토링 및 조정했으며 새로운 다음 달에 사이트에 게시될 많은 새로운 기사에 대한 저자. 자, 여기 월간 스매싱 업데이트가 있습니다.

플로팅 라벨이 사라졌습니다

부동 레이블이 나쁜 생각인 이유에 대한 Adam Silver의 글을 게시한 후 Twitter와 이에 대한 댓글에서 엄청난 토론을 보았습니다. 확실히 수직 공간을 꽤 많이 절약할 수 있지만 그 비용에는 접근성 및 자동 완성 문제 가 많이 있습니다. 아이러니하게도 2월 말에 해당 기사를 게시하는 순간에도 대부분의 양식에 부동 레이블이 사용되었고, 이를 제거하는 것이 실제로 사이트의 전반적인 경험을 개선하는 데 도움이 되는지 살펴보고 싶었습니다.

따라서 Adam이 제안한 대로 부동 레이블을 제거하고 입력 필드를 재설계하여 레이블을 입력 필드 위에 배치했습니다. 우리는 또한 실제 양식에 약간의 미묘한 조정을 추가할 기회를 사용했으며 여전히 작업 중입니다. 그러나 결과는 이미 더 좋아 보였습니다.

며칠 동안 개선한 후 autofill 과 관련된 스타일 문제를 발견했습니다. :-webkit-autofill CSS 의사 클래스를 사용하여 자동 채우기에 사용되는 글꼴 크기와 글꼴을 조정하고 싶었습니다. 이는 <input> 요소의 값이 브라우저에 의해 자동으로 채워질 때 일치합니다. 하지만 전체에서 지원되지 않습니다. 방문자가 입력 필드를 떠나면 자동으로 채워진 값의 유효성이 검사될 때 솔직히 꽤 번거롭습니다.

사실 우리는 폼 디자인을 위해 다음과 같은 다양한 경우를 살펴봐야 했습니다.

• 데이터가 전혀 제공되지 않으면 어떻게 됩니까?
• localStorage에서 데이터를 검색하고 자동으로 입력 필드에 연결하지만 자동 채우기가 활성화되지 않으면 어떻게 됩니까?
• 일부 값은 자동으로 채워지 지만 다른 값은 자동으로 채워지지 않으면 어떻게 됩니까?
• 인라인 유효성 검사 는 어떻게 되며 언제 유효성을 검사합니까?
• 일부 자동 완성 입력 필드에 오류 가 있으면 어떻게 됩니까?
• 입력 값은 :active 와 :focus 에 어떻게 나타나야 합니까?

솔직히 말해서, 이것은 상당한 토끼 구멍으로 판명되었으며 우리는 현재 이 모든 문제를 여전히 조사하고 있습니다. 우리 독자의 대다수(당신과 같은 훌륭한 사람들)가 자동 완성을 사용하고 있다는 점을 감안할 때 자동 완성과 관련된 경험을 디자인하는 데 시간을 할애할 가치가 있습니다.

약간의 개선을 거친 후 Adam의 초기 기사가 게시된 지 약 2주 후에 변경 사항을 라이브로 푸시했습니다 . 부동 레이블을 제거하는 것만으로 모바일에서 많은 접근성 문제와 레이아웃 문제를 해결할 수 있었습니다. 그러나 그것이 비즈니스 메트릭에 어떤 영향을 미쳤는지 여부는 아직 말할 수 없습니다. 글쎄, 우리는 그것을 보려면 큰 책이 출시될 때까지 기다려야 할 것입니다.

Lighthouse on Mobile의 그린 스코어

성능 개선을 위한 작업은 한동안 SmashingMag에서 진행 중인 여정이었습니다. 작년 말에 우리는 2020년에 성능이 상당히 떨어지는 것을 확인하고 소매를 걷어붙이고 작업에 착수했습니다. CSS 및 JavaScript 제공을 변경하여 데스크탑 보기에서 사이트의 대부분 페이지에 대한 녹색 점수 영역에 도달했습니다. 그러나 모바일에서의 성능은 여전히 ​​상당히 낮았으며 대부분의 기사에서 Lighthouse 점수가 평균 60-70이었습니다.

보다 적극적인 최적화를 위한 마지막 프롬프트는 Google Search Console의 "Core Web Vitals" 대시보드 였습니다. 2월 19일에 데스크톱 및 모바일에서 3590개 이상의 기사가 CLS 점수(>0.25)가 좋지 않은 것으로 표시되었습니다. 우리는 처음에 이것이 최근에 수행한 쿠키 배너 조정과 관련이 있을 수 있다고 생각했지만 높은 CLS에 대해 보다 적극적으로 우리를 처벌하는 것처럼 보이는 Google 검색 업데이트인 것으로 나타났습니다.

그래서 트위터를 통해 우리가 할 수 있는 일에 대해 추가 제안이 있는 사람이 있는지 커뮤니티에 문의했습니다. 피드백은 Twiter의 DM을 통해 제출된 일부 철저한 리뷰와 우리가 할 수 있는 것에 대한 사람들의 일반적인 생각과 함께 전 세계 사람들의 환상적 이었습니다.

Patrick Meenan은 우리가 같은 날 구현한 서비스 워커 설치를 연기할 것을 제안했습니다. 분명히 서비스 워커는 LCP 이전에 설치 및 활성화 중이었고 경합을 일으켰습니다.

Gael Metais는 웹 글꼴을 보다 적극적으로 하위 집합 으로 지정하고 AVIF 파일의 캐싱 문제를 조사할 것을 제안했습니다. 다음 날 우리는 글꼴을 하위 집합으로 만들고 라이브로 푸시했습니다. 현재 미디어 관리가 실행되는 방식으로 인해 AVIF 문제를 빠르게 해결할 수 없었지만 Barry Pollard는 이미지에 base64 인코딩을 사용하는 것이 도움이 되는지 테스트할 것을 제안했습니다.

Base64 인코딩은 HTTP/2 세계에서 약간 이상한 개념처럼 보이지만 도움이 되는지 테스트하기 위해 작은 프로토타입을 만들기로 결정했습니다. 그래서, 그것을 했습니까? 네, 확실히 그랬습니다.

우리는 초기 결과에 매우 놀랐습니다. 몇 번의 반복 끝에 우리는 LCP 작성자 프로필 사진 을 약간 복잡하지만 매우 효과적인 방식으로 제공하게 되었습니다.

 <picture> <source type="image/avif"> <img src="https://.../author.jpg" loading="eager" decoding="async" width="200" height="200" alt=""> </picture>

• 브라우저가 AVIF를 지원하는 경우 AVIF 이미지의 base64 인코딩 문자열을 가져옵니다(브라우저 요청 없음).
• 브라우저가 AVIF를 지원하지 않으면 JPEG 파일(적절하게 캐시됨)을 가져옵니다.
• 콘텐츠 협상은 브라우저에서 <picture> + srcset 을 통해 발생합니다.

이것은 홈페이지와 기사 페이지에 있는 LCP 작성자 프로필 사진에만 적용됩니다. 현재 모바일 트래픽의 약 35%가 iOS 에 있으므로 해당 사용자는 이미지를 더 빨리 얻지 못하지만 큰 JPEG 이미지만 인코딩하거나 AVIF와 JPEG 파일을 모두 인코딩하면 HTML이 불필요하게 부풀려집니다. 피하다.

그런 다음 빌드 시간 동안 자동으로 AVIF 파일용 base64 문자열을 생성하도록 빌드를 조정했습니다(저자 이미지를 AVIF 이미지로 사용할 수 있는 경우). 또한 더 이상 필요하지 않을 때 쉽게 제거할 수 있습니다.

또한 YellowLab.Tools로 중복 및 중복을 제거하고 CSS 감사 도구의 보고서를 기반으로 일부 CSS를 리팩토링했으며 IE10 및 IE11에 대한 최적화를 줄이기 위해 브라우저 목록 구성을 조정했습니다.

전반적으로 우리는 다음을 가지고 있습니다:

• 웹 글꼴 페이로드를 38% 줄였습니다.
• 중요한 CSS의 크기를 14% 줄였습니다.
• JS 파일의 크기를 8% 줄였습니다.
• (아마도) HTML의 크기를 약 1% 증가시켰습니다.

그 효과는 꽤 눈에 띄었습니다! 몇 년 만에 처음으로 모바일에서는 90–95 의 그린 스코어 영역을 찾았고 데스크톱에서는 96–100까지 라운드를 했습니다. 그리고 백그라운드에서 실행되는 React 애플리케이션과 백그라운드에서 발생하는 많은 스크립팅이 있습니다.

특히 JavaScript 세계에서 여전히 해야 할 일이 꽤 많지만 올바른 방향으로 가고 있는 것 같습니다. 게다가 Simon Hearne의 친절하고 관대한 도움으로 f-mod를 막 구현하려고 합니다.

그리고 가장 좋은 점: 모든 크레딧은 Twitter를 통해 제안과 조언을 보내주신 놀라운 커뮤니티 와 관대하고 열정적이며 친절한 사람들에게 돌아갑니다. 그 점에 대해 우리는 매우 감사합니다. 그것이 지역 사회 사람들의 진정한 힘과 친절입니다. 감사합니다! ️

스매싱에 대한 새로운 기사 시리즈

우리는 성능과 UX 최적화뿐만 아니라 바빴습니다. 당신은 아마도 우리가 게시하는 기사 때문에 사이트를 방문할 것이고, 그래서 우리는 새로운 것을 실험하고 있습니다.

3월에 우리는 디자이너 또는 개발자가 작업을 더 잘 수행하는 데 도움이 될 수 있는 도구 및 리소스 전용 기사 시리즈를 새로 만들기 시작했습니다. 당신은 그것들을 좋은 구식 정리로 볼 수 있지만 시간이 지남에 따라 때때로 사용할 수 있는 포인터가 있는 조각을 준비하는 데 시간이 걸립니다 .

우리는 CSS에 대한 도구로 시작했지만 프론트 엔드의 다른 모든 부분에 대해 더 유사한 부분을 기대하십시오. 우리는 그들과 함께 당신의 발가락을 유지하기를 희망하므로 준비하십시오! 그리고 여기 우리가 지금까지 게시한 첫 번째 기사가 있습니다.

• CSS 감사 도구
• CSS 생성기

우리는 또한 진행 중인 프로젝트에서 흥미로운 사례 연구 를 수행할 새로운 작가와 똑똑한 사람들을 초대하기 위해 연락을 취하고 있습니다. 따라서 최근에 흥미롭고 도전적인 프로젝트를 진행 중이라면 접근성, CSS/JS, 성능, 마이그레이션, 리팩토링 또는 기타 거의 모든 것과 관련된 프로젝트에 대해 문의하십시오. 이전에 글을 써 본 적이 없더라도 걱정하지 마세요. 저희가 도와드리고 안내해 드리겠습니다.

또한 오픈 소스 도구 를 출시했으며 이에 대해 더 많은 관심을 기울이고 싶다면 저희에게도 알려주십시오. 여기 매거진에서도 귀하의 프로젝트를 발표할 수 있기를 바랍니다. 물론 피드백이 있는 경우 여기에 의견을 남기고 어떻게 생각하는지 알려주세요!

Smashing에 대한 새로운 온라인 워크샵

거의 1년 전, 우리는 자체 온라인 워크숍을 운영하기 시작했으며, 모든 워크숍은 우리 팀 전체에 놀라운 경험이었습니다. 전 세계의 훌륭한 참석자들이 함께 모여 함께 배우면서 특히 라이브 디자인 및 코딩 세션에서 많은 아이디어가 실현되었습니다.

다음은 다음 달 에 계획한 워크샵에 대한 간략한 개요입니다.

아, 우리는 또한 진행 중인, 예정된 또는 미래에 진행 중인 워크샵에 대해 3, 5 또는 10장의 티켓을 선택할 수 있는 워크샵 번들이 있습니다. 또한 새로운 워크샵이 올 때 가장 먼저 알림을 받고 싶다면 여기에서 구독하십시오. 또한 얼리버드 티켓 도 받을 수 있습니다.

무료 모임:: Smashing Meets에 참여하세요!

4월 27일, 웹에서 일하는 사람들을 위한 친근하고 포괄적인 온라인 모임인 Smashing Meets에서 생방송으로 참여할 수 있습니다. 이 “ Actions Speak Louder ” 에디션은 우리 전문가들이 라이브로 디자인하고 코딩하는 3개의 놀라운 세션을 제공하여 놀라운 NGO가 더 나은 사이트를 얻을 수 있도록 돕습니다.

Smashing Meets는 모두에게 무료 이므로 친구와 동료에게 참여하도록 알려주세요! 물론, 우리 커뮤니티에 가입하고 회원이 된다면 매우 기쁠 것입니다. 스매싱 멤버십은 한 달에 3달러부터 시작합니다. 모든 디지털 Smashing Books, 웨비나에 액세스할 수 있으며 이벤트, 서비스 및 제품에 대한 많은 무료 및 친절한 할인을 받을 수 있습니다.

스매싱 팟캐스트: 음악을 듣고 영감을 얻으세요

작년에 우리는 2주마다 새로운 Smashing Podcast 에피소드를 게시했으며 피드백은 대단 했습니다! 56,000회 이상의 다운로드(주당 1,000회 이상, 계속 증가하고 있습니다!)와 함께 다양한 배경을 가진 34명의 게스트가 팟캐스트에 있었고 공유할 수 있는 내용도 많습니다!

듣고 싶은 주제가 없거나 더 자세히 알고 싶다면 주저하지 말고 Drew McLellan의 호스트에게 연락하거나 Twitter를 통해 언제든지 연락하십시오.

그리고 마지막으로... 친절한 스매싱 이메일 뉴스레터

Smashing Newsletter를 통해 유용하고 실용적인 정보 를 제공하고 사람들이 웹 업계에서 작업하고 있는 유용한 정보를 공유하는 것을 목표로 합니다. 훌륭한 프로젝트를 수행하고 있는 재능 있는 사람들이 너무 많습니다. 여러분이 소문을 퍼뜨리고 그들이 마땅히 받아야 할 공로를 인정해 주시면 감사하겠습니다! 또한 구독하면 제3자 메일링이나 숨겨진 광고가 없으며 귀하의 지원은 청구서를 지불하는 데 정말 도움이 됩니다. ️

JavaScript, 번들러, 프레임워크

• 올바른 번들링 도구는 무엇입니까?
• 올바른 JavaScript 프레임워크 선택하기
• this 대 that
• 자바스크립트 연산자 조회
• TypeScript로 마이그레이션하기 위한 전략
• JavaScript 개발자의 읽기 목록

CSS 기술 및 도구

• 100%는 무엇을 의미합니까?
• CSS가 애니메이션으로 만들 수 있는 놀라운 것들
• 순수 CSS로 무작위성 만들기
• 강력하고 현대적인 단선 레이아웃 구축
• CSS 감사
• 고급 CSS 선택기
• 오버레이로 대비 개선하기

이메일 생산성 및 회의

• 피드백 래더로 코드 리뷰 인코딩하기
• 정말 중요한 일을 위한 시간 만들기
• 더 나은 이메일 만들기
• 개발 환경을 위한 색상 테마 동기화
• 클라이언트로부터 피드백 수집
• 구인 광고를 작성하는 방법

프런트 엔드 접근성

• 접근 가능한 모달
• 액세스 가능한 탭
• 앱 전체 키보드 탐색 구현
• 접근성 문제 찾기 및 수정
• Preferences prefers-reduced-* 사용자 기본 설정 지원
• 액세스 가능한 자동 완성
• 아이콘 링크를 액세스 가능하게 만들기

랩입니다!

휴, 끝까지 읽어주셔서 감사합니다! 우리는 전 세계에 흩어져 있는 15명이 넘는 열정적이고 헌신적인 사람들로 구성된 소규모 팀이며 귀하와 우리의 훌륭한 커뮤니티가 우리의 일을 더 잘할 수 있도록 최선을 다합니다. 그럼 오랫동안 함께해주셔서 감사합니다 !

솔직히 말해서, 온라인과 직접 만나기를 고대하고 있습니다. 하지만 한 가지는 확실합니다. 매달 멋진 모습을 보여주셔서 진심으로 감사드리며, 그 점에 대해 영원히 감사드립니다. 물론 업데이트에 대한 최신 정보를 계속 알려 드리겠습니다. ;-) (하지만 언제든지 뉴스레터를 구독할 수도 있습니다!)

힘내세요 여러분!