Как оптимизировать сайт html

Оптимизация кода сайта — базовое руководство

Больше полезных статей, кейсов и мануалов. Подпишись на обновления!

Как пользователи, так и поисковые системы не любят долго ждать пока загрузится сайт, поэтому, вы должны сократить время его загрузки до минимума.

Кроме этого, у поисковых систем есть ограничение по времени индексации вашего сайта. Поэтому, Google добавил параметр скорости загрузки сайта как один из факторов ранжирования. Другими словами, если ваши страницы не загружаются достаточно быстро, то ваш сайт может значительно потерять в позициях .

Оптимизация кода сайта - пошаговое руководство

У людей же еще меньше терпения, поэтому, если сайт загружается достаточно долго (или значительно медленнее чем у конкурентов), то они просто закроют ваш сайт и больше никогда не будут возвращаться.
Давайте рассмотрим основные методы увеличения скорости загрузки страниц.

Оптимизация HTML

Сжатие пробелов

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

Пример, часто бывает так

Привет, Мир!Привет, Мир!

Привет, Мир!

Но, в итоге код можно уменьшить до

Привет, Мир! Привет, Мир!

Привет, Мир!

Уменьшение объема контента в верхней части кода страницы

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

Пример, такой оптимизации

Если документ HTML выглядит следующим образом:

    Привет, мир!

а файл стилей small.css имеет вид

.yellow .blue .big < font-size: 8em; >.bold

то нужный код CSS встроить можно таким образом:

.blue

Привет, мир!

В итоге файл small.css будет подгружаться после загрузки страницы.

Предварительный резолвинг DNS

С помощью данной оптимизиции вы можете сообщить браузеру по каким адресам могут находятся внешние ресурсы на данной странице (например, картинки, файлы стилей, javascript). Это позволяет сразу выполнять преобразование DNS имён.

Например, таким образом можно ускорить загрузку для систем аналитики

Удаление домена из URL в атрибутах href и src

Можно сократить код сайта путем преобразования абсолютных URL в относительные для атрибутов href и src.

Это выглядит следующим образом: до удаление домена

    Анкор

После удаление домена

    Анкор

Оптимизация CSS

Объединение всех CSS в один файл

Данное действие позволяет уменьшить необходимое количество HTTP запросов при загрузке страницы. Особенно важно

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

       Привет, мир!

Привет, мир!

Минимизация CSS

Минимизация файлов стилей состоит в следующем:

удаление всех комментариев;
удаление пробелов;
сокращение название цветов.

 body < background-image: url("foo.png"); >/* This comment will be stripped */ #iddy, .anotherId

body#iddy,#anotherId

Перемещение CSS в секцию HEAD

Это позволяет сделать визуальное ускорение рендернига страница браузером. Кроме этого, для некоторых браузеров данной действие, позволяет решить проблему эффекта перерисовки элементов в случае, если сами стили прописаны после этого элемента.

   .big Привет, мир!

   .big  Привет, мир!

Перемещение файлов со стилями CSS перед JavaScript скриптами

Данное дейстивие позволит

лучше распаралеллелить скачивание CSS и JacaScript-файлов
увеличить скорость рендеринга страницы

Перенос небольших описаний стилей в HTML

Перенос небольших описаний стилей до 1КБ может помочь вам сократить число запросов к серверу.

Оптимизация JavaScript

Объединение всех JavaScript в один файл

Аналогично, объединению файлов CSS, данная оптимизация для JavaScript позволит уменьшить необходимое количество HTTP запросов при загрузке страницы.

Минимизация JavaScript

Минимизация JavaScript позволяет убрать лишние символы из исходного файла и специальными способами уменьшить размер кода (например, замена длинных переменных на более короткие).

Например, можно сделать с помощью этого сервиса: http://developer.yahoo.com/yui/compressor/.

Оптимизация изображений

Отложенная загрузка изображений

С помощью библиотеки Lazyload при загрузке браузера можно загружать картинки, которые находятся в видимой области. Это позволяет

значительно сократить объемы первоначально загружаемой информации
сократить нагрузку на сервер

Комбинирование изображений

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

Сервисы для проверки оптимизация вашего сайта

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

https://developers.google.com/speed/pagespeed/insights/
http://tools.pingdom.com
http://www.webpagetest.org/
http://gtmetrix.com/

Это основные моменты, связанные с оптимизацией кода сайта, которые можно и нужно применять на практике, для получения лучшего рузультата от сайта и поискового продвижения.

Хорошие статьи в продолжение:

А что вы думаете про оптимизацию кода сайта?

7 советов по оптимизации CSS для ускорения загрузки страниц

В современном вебе, время загрузки страницы сайта — одна из важнейших метрик. Даже миллисекунды могу оказывать огромное влияние на Вашу прибыль и медленная загрузка страницы может легко навредить Вашим показателям конверсии. Существует много инструментов и техник, которые Вы можете применить для ускорения Вашего вебсайта. В этой статье мы рассмотрим лучшие советы по оптимизации CSS, которые Вы можете использовать для повышения производительности интерфейса.

Примечание от переводившего
Большая просьба снисходительно отнестись к замеченным ошибкам и сообщить о них.
Спасибо.

1. Найдите узкие места производительности

Самое главное при всех видах оптимизации — начать с тщательного аудита. К счастью, существует много инструментов для диагностики CSS, которые могут помочь Вам найти имеющиеся узкие места в производительности. Первое и самое главное, Вы можете использовать «Инструменты разработчика» в Вашем браузере, чтобы проверить, насколько быстро загружаются данные. В большинстве браузеров открыть «Инструменты разработчика» можно, нажав клавишу F12.

Например, в «Инструментах разработчика» браузера Firefox Вы можете узнать размер и время загрузки всех CSS-файлов, загружаемых на Вашей странице, используя закладку «Network». Вы также можете проверить, насколько быстро Ваши CSS-файлы загружаются с использованием или без использования кэширования. Поскольку здесь показываются внешние CSS, такие как файлы шрифтов Google Fonts и CSS-файлы, загруженные из сторонних CDN-серверов, Вы можете найти много источников, о которых даже не знали ранее

Pingdom Tools и Lighthouse от Google — еще два бесплатных инструмента, которые разработчики часто используют для анализа скорости сайта и производительности интерфейса. Pingdom Tools, например, даёт Вам несколько полезных советов по оптимизации CSS, при запуске простого теста скорости вебсайта.

2. Минифицируйте и сжимайте CSS-файлы

Большинство вебсайтов используют несколько CSS файлов. Хотя в большинстве случаев использование модульных CSS-файлов считается лучшим решением, загрузка каждого отдельного файла может занимать некоторое время. Но именно по этой причине существуют инструменты для минификации и сжатия CSS. Если Вы используете их с умом, это может значительно сократить время загрузки страницы.

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

В наши дни, большинство инструментов сборки позволяют выполнять сжатие автоматически. Например, Webpack по умолчанию возвращает все файлы проекта как минифицированный пакет. PostCSS также имеет умные плагины, такие как CSS Nano, которые не только минифицируют Ваши файлы, но также производят над ними множество специальных оптимизаций.

3. Используйте Flexbox и CSS Grid

Если при написании CSS Вы всё еще полагаетесь исключительно на традиционную блочную модель и выравниваете элементы на странице, используя margin, padding и float, Вам следует рассмотреть переход на более современные методы, именуемые Flexbox и CSS Grid. Они позволят Вам реализовывать сложные макеты гораздо меньшим количеством кода.

Используя старые подходы, Вам придется использовать много трюков и ухищрений даже для таких простых вещей, как центрирование элементов по вертикали. Однако, это не относится к Flexbox и CSS Grid. Хотя освоение новых подходов может занять некоторое время, оно стоит того, поскольку размер Ваших CSS-файлов будет намного меньше. Это особенно актуально для Flexbox, который на данный момент имеет очень хорошую поддержку браузерами (98.3% глобально).

Хотя CSS Grid поддерживается браузерами не так хорошо (92.03% глобально), уже можно использовать этот подход, если Вы не должны обеспечивать поддержку старых браузеров или готовы реализовать фолбек.

4. Используйте тег вместо правила @import

Существует два основных метода загрузки CSS-файлов на веб-страницу:

добавить в раздел HTML-страницы, используя тег
импортировать из других таблиц стилей, используя CSS-объявление @import

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

5. Используйте градиенты и SVG вместо изображений

Загрузка всех изображений на веб-странице может отнимать много времени. Для сокращения этого времени, разработчики используют множество методов оптимизации изображений, таких как загрузка изображений из внешнего CDN или использование инструментов сжатия изображений, таких как TinyJPG. Эти решения могут существенно помочь, однако в некоторых ситуациях использование ресурсоёмких JPG и PNG изображений можно заменить CSS-эффектами.

Например, Вы можете использовать градиенты вместо огромных фоновых изображений, которые могут немного замедлить работу браузера посетителя Вашей страницы. Можно использовать градиентные функции CSS для создания линейных, радиальных и повторяющихся градиентов. С помощью этих встроенных в CSS функций Вы можете задавать не только цвета, но также и угол градиента.

Следующее правило, например, создаёт красивый градиентный фон, который загружается намного быстрее, чем любые изображения:

Для более сложных градиентов и текстур, Вы также можете использовать генераторы, такие как CSSmatic (на изображении ниже) и ColorZilla

Помимо градиентов, традиционные JPG и PNG изображения Вы также можете можете заменить масштабируемой векторной графикой (SVG). Она не только быстрее загружается, но также Вам требуется загрузить лишь одну версию изображения. Это обусловлено тем, что SVG-изображение может масштабироваться до любых размеров без потери качества в связи с его векторной природой. Кроме того, Вы также можете стилизовать SVG с помощью CSS, как обычный HTML-файл.

6. Избегайте правила !important

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

Если в CSS присутствует много правил !important, браузер пользователя должен будет проводить дополнительные проверки в коде, что может дополнительно замедлить страницу. Хорошим тоном считается никогда не использовать !important для всего сайта или при создании темы или плагина. Если есть возможность, используйте это правило только в ситуациях, когда хотите переопределить CSS из сторонней библиотеки.

7. Рефакторинг CSS

Хотя рефакторинг CSS редко бывает легкой задачей, зачастую это может значительно повысить производительность веб-сайта. Например, когда Ваши CSS-файлы слишком большие, или Вам досталась устаревшая кодовая база, или у Вас очень плохое время загрузки страницы, что серьезно вредит Вашей конверсии. Цель рефакторинга CSS — сделать Ваш код более изящным, легко поддерживаемым и быстрее загружаемым.

Рефакторинг CSS — это многоступенчатый процесс, в ходе которого Вам нужно проанализировать каждый аспект Вашего CSS кода. Вам нужно проверить следующие моменты:

присутствуют ли неиспользуемые или дублирующие CSS-правила или ресурсы
возможно ли использование более современных техник, таких как Flexbox и CSS Grid
не используется ли слишком много специфичности (посчитать это можно с помощью визуального калькулятора специфичности)
грамотно ли организована структура CSS-файлов (например, легче поддерживать меньшие файлы, чем большИе)
стоит ли начать использовать инструменты автоматической сборки
и многое другое.

Также не забудьте использовать систему контроля версий, такую как Git. В этом случае, если что-то пойдет не так, Вы сможете вернуться к предыдущей версии кода.

Подводя итоги

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

Кроме лучших практик оптимизации CSS, Вы можете использовать и другие техники ускорения загрузки, такие как кэширование, Google AMP и HTTPS протокол. Если Вы хотите узнать о них больше, можете также ознакомиться с нашей статьей 10-step guide to improve website loading speed.

Ускоряем работу сайта: оптимизация HTML

Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, а без этого скорость загрузки и отрисовки будет ниже.

Минимизируйте размер HTML‑документов. Вырезайте избыточные пробелы и переносы строк, удаляйте повторяющиеся inline‑стили CSS и inline‑скрипты JS (вместо этого используйте соответствующие css‑классы и внешние файлы скриптов), удаляйте комментарии, избыточную разметку и скрытые блоки.

Используйте GZIP для сжатия данных. Современные браузеры поддерживают получение и обработку сжатых в формате GZIP данных. Оптимальный способ — предварительное сжатие статичных страниц на максимальном уровне компрессии и отдача веб‑сервером предварительно сжатых файлов. Сжатие «на лету» отлично подходит для динамичных страниц, но оно нагружает сервер, поэтому его на нагруженных проектах стоит использовать осторожнее — подберите уровень сжатия исходя из нагрузки на CPU.

Кэшируйте статичные страницы на стороне клиента — не заставляйте пользователей многократно скачивать один и тот же документ: используйте соответствующие заголовки в ответе веб‑сервера (Expires или Cache-Control max-age, Last-Modified или ETag).

Статья опубликована в 2014 году

Тематические статьи

Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript

Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript.

Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтэнд‑разработке никаких других языков не используется.

JavaScript
веб-разработка
Статья опубликована в 2014 году

Алгоритмы поисковых систем: семантическая микроразметка

Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют мета‑данные для содержания. Наиболее популярными на сегодняшний день являются форматы Schema.org, Open Graph и микроформаты.

интернет-маркетинг
веб-разработка
Статья опубликована в 2014 году

Чек-лист проверки фронтенда

По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.

10 советов по оптимизации скорости работы вашего сайта

Скорость и производительность сайтов очень важна для пользователей. Если Ваш сайт будет слишком медленным, то Вы будете не только терять посетителей, но также и потенциальных клиентов. Поисковые системы такие как Google, учитывают скорость веб-сайта в рейтинге поиска, поэтому, оптимизируя скорость Вашего сайта, Вы должны принять всё во внимание. Учитывается каждая миллисекунда. Вот только несколько основных и общих предложений для того, чтобы улучшить производительность сайта.

1. Отсрочьте загрузку контента, когда есть такая возможность.

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

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

Библиотеки Ajax/веб разработки, такие как jQuery, Prototype и MooTools могут осуществить отсроченную загрузку контента гораздо легче.

2. Используйте отдельные JS и CSS файлы

Когда пользователь впервые загружает Вашу веб-страницу, браузер кэширует внешние ресурсы, такие как JavaScript и CSS файлы. Таким образом, лучше размещать такие файлы вне страниц.

Используя встроенного CSS также увеличивает время рендеринга веб-страницы; определяя всё в Вашем главном файле CSS, Вы позволяет браузеру делать меньше работы во время рендеринга страницы, так как он уже знает все правила стилей, которые ему надо применить.

В качестве бонуса, использование отдельных JavaScript и CSS файлов делает поддержку сайта более лёгкой, так как вам надо только изменить глобальные файлы вместо того, чтобы искать всё в коде, разбросанном на нескольких страницах.

3. Используйте системы кэширования

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

У популярных систем управления контентом, таких как WordPress и Drupal, имеется статическое кэширование, которые преобразовывает динамически сгенерированные страницы в статические файлы HTML, чтобы уменьшить ненужную обработку сервером. Для WordPress попробуйте WP Super Cache. В Drupal есть функция кэширования страницы в самом ядре.

Также существуют системы кэширования баз данных и серверных скриптов, которые Вы можете установить на своем веб-сервере (если у Вас есть возможность сделать это). Например, у PHP есть расширения под названием ускорители PHP (PHP accelerators), которые оптимизируют производительность посредством кэширования и различных других методов; один пример PHP-ускорителя — APC. Кэширование базы данных улучшает работу и масштабируемость Ваших веб-приложений благодаря уменьшению работы, связанной с процессами чтения/записи/доступа базы данных; memcached, например, кэширует наиболее часто используемые запросы к базе данных.

4. Избегите изменения размеров изображений в HTML

Если изображение первоначально размером 1280×900 px, но у Вас должно быть 400×280 px, Вы должны изменить размеры и повторно сохранить изображение, используя редактор изображений, такой как Photoshop вместо того, чтобы использовать атрибуты ширины и высоты в HTML
(то есть ).
Это потому что, естественно, большое изображение всегда будет иметь больший размер файла. Вместо того, чтобы изменить размеры изображения, используя HTML, измените размеры его размеры в графическом редакторе и затем сохраните это как новый файл.

5. Не используйте изображения для показа текста

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

Если Вы должны использовать много своих шрифтов на веб-сайте, узнайте о CSS @font-face, чтобы показать текст с пользовательскими шрифтами более эффективно. Очевидно, что обработка файлов шрифтов более оптимальна, чем обработка изображений.

6. Оптимизируйте размеры изображения благодаря использованию правильного формата файла

Выбирая правильный формат изображения, Вы можете оптимизировать размеры файла не теряя качество изображения. Например, если Вы не нуждаетесь в прозрачности изображения (альфа-слой), который предлагает формат PNG, формат JPG часто предоставляет изображения, используя меньший размер файла.

Чтобы узнать больше, как выбрать между JPG, PNG, и GIF, почитайте следующие гайды:

The Comprehensive Guide to Saving Images for the Web
Web Designer’s Guide to PNG Image Format
JPEG 101: A Crash Course Guide on JPEG

В дополнение, есть много инструментов, которые Вы можете использовать, чтобы далее уменьшить веса файла Ваших изображений. Проверьте этот список инструментов для того, чтобы оптимизировать Ваши изображения.

7. Оптимизируйте метод написания кода

Осмотрите свой исходный код. Вы действительно нуждаетесь во всех тэгах, которые Вы используете, или Вы можете использовать CSS для вывода на экран? Например, вместо того, чтобы использовать

Ваш заголовок

, Вы можете легко использовать CSS для того, чтобы заголовок был курсивом, используя свойство font-style. Написание эффективного кода не только уменьшает размеры ваших HTML и CSS документов, но также позволяет их легче поддерживать.

8. Загружайте JavaScript в конце документа

Будет лучше, если ваши скрипты загружаются в конце страницы, а не в начале. Это позволяет браузеру отрендерить всё перед тем, как он начнёт грузить JavaScript. Благодаря этому, Ваши страницы будут более отзывчивыми, потому что способ работы Javascript’a такой, что он блокирует всё, пока не закончит загружаться. Если возможно, ссылайтесь на Javascript прямо после закрывающегося тега вашего HTML документа.

9. Используйте сеть доставки контента (Content Delivery Network, CDN)

На скорость вашего сайта сильно влияет положение пользователей относительно положения веб-сервера. Чем дальше они находятся, тем большее расстояние должны пройти передаваемые данные. Имея кэшированный контент на нескольких, стратегически расположенных географических положениях, позволяют позаботиться об этой проблеме. CDN будет часто делать Ваши эксплуатационные расходы немного выше, но Вы определенно получите бонус в скорости вашего сайта. Проверьте MaxCDN или Amazon Simple Storage Service (Amazon S3).

10. Оптимизируйте веб-кэширование

Наряду с использованием систем кэширования, Вы должны создать веб-сайты, которые используют веб-кэширование как только это возможно. Веб-кэширование состоит в том, что файлы кэшируются браузером для последующего использования. Браузер кэширует файлы CSS, Javascript и картинки. Кроме основ, таких как помещение CSS и JavaScript кода, который используется на нескольких страницах, во внешние файлы, есть много способов удостовериться, что Вы кэшируете свои файлы самым эффективным из возможным способов.

Например, Вы можете установить заголовки ответа HTTP, такие как Expires и Last-Modified, чтобы уменьшить потребность в повторной загрузке некоторых файлов, когда пользователь вернется на Ваш сайт. Чтобы узнать больше, читайте о кэшировании в HTTP и
усилении кэширования браузера.

Чтобы настроить заголовки Expires в Apache, прочитайте инструкцию по добавлению заголовков, которые истекают в будущем.