Уменьшить размер содержимого первого экрана

Это правило срабатывает, когда PageSpeed Insights обнаруживает, что системе необходимо совершать больше поездок в сеть и обратно, чтобы представить содержимое первого экрана веб-страницы.

Обзор

Если требуемый объем данных выходит за пределы первоначального окна перегрузки, системе необходимо совершать больше поездок между сервером и браузером пользователя. Если пользователь пользуется сетью с большим временем задержки (например, мобильной сетью), проблема может серьезно задержать загрузку веб-страницы.

建议

Чтобы увеличить скорость загрузки веб-страниц, ограничите размер данных (HTML-теги, картинки, CSS и JavaScript), необходимых для отображения содержимого первого экрана веб-страницы. Для этого можно попробовать несколько способов:

• Структурировать HTML таким образом, чтобы сначала загрузить ключевое содержимое первого экрана
• 减少资源所用的数据量

结构化HTML，以便首先加载关键的首屏内容

Сначала загрузите основное содержание веб-страницы. Веб-страница структурирована таким образом, чтобы первоначальный ответ сервера мог посылать необходимые данные, позволяющие быстро представлять ключевые части страницы и откладывать представление остальных частей. Это может означать, что вам придется разделить CSS на две части: встроенную часть, которая отвечает за корректировку формата раздела ATF контента, и часть, которая откладывает рендеринг.

参考以下示例，了解有关如何结构化网站以提高加载速度：

• 如果您的HTML先加载第三方小部件，再加载主要内容，请将该加载顺序更改为先加载主要内容。
• Если ваш сайт использует двухстолбцовый макет (то есть навигационная боковая панель плюс статья), а HTML загружает боковую панель, а затем статью, подумайте о том, чтобы загрузить статью первым.

Сокращение объема данных, используемых при использовании ресурсов

Если переработанный сайт может нормально функционировать на нескольких устройствах и может загружать ключевой контент в первую очередь, используйте следующую технологию для уменьшения объема данных, необходимых для презентации веб-страницы:

• сокращение объема ресурсов：通过移除不必要的空格和评论来缩减HTML、CSS和JavaScript的大小。通过使用可重命名资源中变量名称的工具，实现进一步的优化。
• 尽可能考虑Использовать CSS, а не картинки。
• 启用压缩功能

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under theApache 2.0 License. For details, see our Site Policies.