정확한 글꼴 크기 사용

정확한 글꼴 크기 사용

  • 12 22, 2015

当PageSpeed Insights检测到网页上的文字太小而难以辨认时,就会触发此规则。 概览 다음을 사용할 수 있습니다.4가지 상용 단위来指定网页字体大小:像素(px)、点(pt)、EM(em)和百分比(%)。 像素即“CSS像素”,会因设备尺寸和密度而异。 점은 픽셀을 기준으로 정의된다. 한 픽셀은 0.75포인트입니다.*. EM和百分比是“相对”单位:这两个单位是相对于沿用已使用字体大小和属性而言的。1 EM相当于100%。   *请参见其他说明。 此外,뷰포트모바일 장치에서 글꼴의 크기를 조절하는 방법에 영향을 줍니다. 뷰포트가 적절하게 구성되지 않은 웹 페이지는...

Read More
대상에 맞게 점 크기 조정

대상에 맞게 점 크기 조정

  • 12 22, 2015

当PageSpeed Insights检测到某些点按目标(例如按钮、链接或表单字段)可能过小或距离过近,以致用户不方便在触摸屏上点按时,就会触发此规则。 개요 사용자의 경우 링크나 버튼이 너무 작거나 빽빽하게 배치되어 있으면 터치스크린에서 이러한 대상을 정확하게 누르는 것이 기존의 마우스 커서를 사용하는 것보다 더 힘이 들 것이다. 사용자가 부주의하게 위치를 잘못 누르는 것을 방지하기 위해, 각 포인트 별 목표에 대해 충분한 크기를 설정하고, 그 사이에 충분한 거리를 유지하여, 사용자가 어떤 목표를 누를 때 손가락이 다른 어떤 포인트 별 목표에 닿지...

Read More
뷰포트 설정에 맞게 내용 크기 조정

뷰포트 설정에 맞게 내용 크기 조정

  • 12 22, 2015

当PageSpeed Insights检测到网页内容不适合在指定尺寸的视口内水平显示,而强制用户水平移动网页以查看所有内容时,就会触发此规则。 개요 在桌面设备和移动设备上,用户习惯于垂直(而非水平)滚动浏览网站,而强制用户水平滚动或缩小以查看完整网页会给用户带来很差的体验。 在使用元视口代码모바일 웹 사이트를 개발할 때 특정 뷰포트에 적용되지 않는 웹 페이지 컨텐츠를 실수로 만드는 경우가 많습니다. 예를 들어, 뷰포트의 폭보다 큰 그림을 뷰포트에 표시하면 뷰포트를 수평으로 스크롤해야 합니다. 뷰포트의 폭에 맞게 이 내용을 조정해야 합니다. 이렇게 하면 뷰포트를...

Read More
뷰포트 구성

뷰포트 구성

  • 12 22, 2015

当PageSpeed Insights检测到您的网页未指定视口,或者指定的视口不适合不同设备时,就会触发此规则。 概览 视口可控制网页在移动设备上的显示方式。如果未指定视口,移动设备将以典型桌面屏幕的宽度来呈现网页,并调整网页使其适合屏幕大小。通过设置视口,您可以控制网页在不同设备上的宽度和缩放比例。   왼쪽: 메타 뷰포트가 지정되지 않은 웹 페이지 右图:指定了与设备宽度相匹配的视口的网页。 建议 经过优化可在移动设备上正常显示的网页应在文档标头中包含元视口,指定如下内容:width=device-width, initial-scale=1. < meta name=viewport...

Read More
비동기식 스크립트 사용

비동기식 스크립트 사용

  • 12 22, 2015

当PageSpeed Insights检测到您正在使用同步版(而非异步版)脚本时,就会触发此规则。 概览 비동기 스크립트를 사용하면 사용자가 웹 페이지를 렌더링하기 전에 스크립트가 다운로드될 때까지 기다려야 하는 것이 아니라 시스템이 웹 페이지를 더 빠르게 렌더링할 수 있습니다. 비동기식 스크립트는 백그라운드 다운로드를 가능하게 합니다. 虽然最初的大多数脚本是同步的,但较新版脚本均可实现异步加载。 建议 请确保您使用的是异步版脚本。以下热门脚本均支持加载异步脚本: BuySellAds (s3.buysellads.com/ac/bsa.js):相关博文 - 默认情况下为异步脚本...

Read More
렌더링을 차단하는 JavaScript 제거

렌더링을 차단하는 JavaScript 제거

  • 12 22, 2015

当PageSpeed Insights检测到您的HTML引用了系统阻止的外部JavaScript文件(位于网页首屏部分)时,就会触发此规则。 개요 브라우저는 웹 페이지를 사용자에게 보여주기 전에 먼저 웹 페이지를 확인해야 한다. 브라우저에서 구문 분석 중에 시스템이 차단한 외부 스크립트가 발견되면 구문 분석을 중지하고 JavaScript를 다운로드해야 합니다. 이러한 상황이 발생할 때마다 브라우저에 네트워크 왕복 프로세스가 추가되어 웹 페이지를 처음 렌더링하는 시간이 지연됩니다. 建议 建议您以内嵌方式处理呈现首屏区域所需的JavaScript,并让为网页添加其他功能所需的JavaScript延迟加载,直到首屏内容发送完毕为止。请注意,要通过这种方式缩短加载时间,您还必须优化CSS发送过程....

Read More
첫 화면 내용 크기 줄이기

첫 화면 내용 크기 줄이기

  • 12 22, 2015

当PageSpeed Insights检测到系统需要进行更多次的网络往返来呈现网页的首屏内容时,就会触发此规则。 概览 필요한 데이터 양이 초기 정체 창 제한을 초과하면 서버와 사용자 브라우저 사이를 더 많이 왕복해야 합니다. 사용자가 지연 시간이 긴 네트워크(예: 모바일 네트워크)를 사용하는 경우 웹 페이지 로딩이 크게 지연될 수 있습니다. 제안 웹 페이지 로드 속도를 높이려면 웹 페이지의 첫 화면 내용을 렌더링하는 데 필요한 데이터(HTML 마크업, 그림, CSS 및 JavaScript) 크기를 제한하십시오. 이를 위해 다음과 같은 여러 가지...

Read More
CSS 전송 프로세스 최적화

CSS 전송 프로세스 최적화

  • 12 22, 2015

이 규칙은 PageSpeed Insights가 웹 페이지에 렌더링이 차단된 외부 스타일시트가 있음을 감지할 때 트리거됩니다. 이 스타일시트는 화면에 컨텐트를 표시하는 시간을 지연시킵니다. 概览 屏幕显示内容之前,浏览器会阻止外部CSS文件。这会导致额外的网络延迟,并延长屏幕显示内容的时间。 제안 외부 CSS 에셋이 작은 경우 HTML 문서에 직접 삽입할 수 있습니다. 이를 인라인 이라고 합니다. 이 방법으로 더 작은 CSS 에셋을 포함하면 브라우저는 웹 페이지를 계속 렌더링할 수 있습니다. CSS 파일이 큰 경우 CSS를 완전히 인라인하면 PageSpeed...

Read More
그림 최적화

그림 최적화

  • 12 22, 2015

이 규칙은 PageSpeed Insights가 웹 페이지의 그림을 최적화하여 크기를 줄일 수 있으며 시각적 효과에 큰 영향을 주지 않는다는 것을 감지할 때 트리거됩니다. 개요 사용자가 리소스를 로드할 때까지 기다리는 시간을 줄이려면 사진 크기를 최소화하십시오. 그림의 형식을 적절히 지정하고 압축하면 데이터 바이트 공간을 많이 절약할 수 있다. 이렇게 하면 네트워크 연결이 느린 사용자들의 시간을 절약할 수 있고, 데이터 사용량이 제한된 사용자들의 비용도 절약할 수 있다. 建议 모든 그림을 기본 및 고급 최적화해야 합니다. 기본 최적화에는...

Read More
에셋(HTML, CSS 및 JavaScript) 크기 줄이기

에셋(HTML, CSS 및 JavaScript) 크기 줄이기

  • 12 22, 2015

当PageSpeed Insights检测到您的某个资源可通过缩减操作来减小其大小时,就会触发此规则。 概览 리소스 크기를 줄이는 것은 불필요한 바이트를 제거하는 것을 의미합니다(예: 불필요한 공백, 줄 바꿈 및 들여쓰기). HTML, CSS 및 JavaScript를 압축하면 다운로드, 구문 분석 및 실행 속도가 향상됩니다. CSS 및 JavaScript의 경우 선택기가 계속 실행되도록 HTML을 업데이트하는 동안 변수 이름을 변경하여 파일 크기를 더 줄일 수 있습니다. 建议 HTML, CSS 및 JavaScript의 크기를 줄여야 합니다....

Read More
브라우저 캐시 사용

브라우저 캐시 사용

  • 12 22, 2015

当PageSpeed Insights检测到您的服务器响应不包含明确的缓存标头或某些资源被指定只缓存一小段时间时,就会触发此规则。 개요 사용자가 웹 사이트를 여러 번 방문할 경우, 정적 리소스의 브라우저 캐시를 사용하면 사용자의 시간을 절약할 수 있다. 캐시 헤더는 작은 정적 리소스(예: 그림)만이 아니라 캐시할 수 있는 모든 정적 리소스에 적용되어야 합니다. 캐시할 수 있는 리소스에는 JS 및 CSS 파일, 이미지 파일 및 기타 이진 개체 파일(미디어 파일, PDF 파일 등)이 포함됩니다. 일반적으로 HTML은 정적 리소스가 아니며 기본적으로...

Read More
서버 응답 시간 향상

서버 응답 시간 향상

  • 12 22, 2015

当PageSpeed Insights检测到您的服务器响应时间超过200毫秒时,就会触发此规则。 概览 服务器响应时间表示加载必要HTML以开始呈现服务器所托管网页的时间,其中减去了Google和服务器之间的网络延迟时间。每次运行所用的时间可能会有所不同,但这种差异不应太大。事实上,如果服务器响应时间变化很大的话,则表明性能上可能存在问题。 제안 서버 응답 시간을 200밀리초 이내로 제한해야 합니다. 느린 애플리케이션 논리, 느린 데이터베이스 쿼리, 느린 라우팅, 프레임워크, 라이브러리, 리소스 CPU 부족, 메모리 부족 등 서버 응답을 지연시킬 수 있는 잠재적인 요소들이...

Read More
압축 기능 사용

압축 기능 사용

  • 12 22, 2015

当PageSpeed Insights检测到网页上的压缩资源未与HTTP压缩一同提供时,就会触发此规则。 概览 많은 네트워크 서버는 타사 모듈을 호출하거나 내장 프로그램을 사용하여 파일을 다음과 같이 압축할 수 있습니다. gzip格式,然后再发送该压缩文件以供下载。这样可以在下载呈现网站所需的资源时,为您节省一些时间。 제안 네트워크 서버에서 압축 기능을 사용하도록 설정해야 합니다. 다음 참조에서는 일부 인기 네트워크 서버에서 사용할 수 있는 압축 기능을 보여 줍니다. Apache:채택mod_deflate Nginx: 채택HttpGzipModule IIS:配置HTTP压缩功能...

Read More
대상 웹 페이지 리디렉션 방지

대상 웹 페이지 리디렉션 방지

  • 12 22, 2015

이 규칙은 PageSpeed Insights가 최종 대상 웹 페이지로 이동하기 위해 웹 주소를 지정하는 동안 여러 개의 리디렉션이 사용되었음을 감지할 때 트리거됩니다. 概览 由于重定向会触发额外的HTTP请求响应周期,并会额外延长往返时间延迟,因此,将应用发出的重定向数量降至最低至关重要。避免HTTP重定向可以缩减用户等待网页加载的时间。我们建议您仔细斟酌自己网站的设计,看看可以在哪些方面提升网站性能。 以下是重定向模式的一些优劣示例: 优质: example.com은 리디렉션 없이 응답 웹 디자인을 사용합니다. 중간:example.com -> m.example.com/home...

Read More