Оптимизация PageSpeed ​​для лучшего ранжирования

1. Первый шаг: узнайте, где возможна оптимизация скорости страницы Чтобы проверить статус-кво, Google...
2. Другие инструменты для оптимизации времени загрузки
3. Вы хотите больше скорости страницы прямо сейчас?
4. 1. Оптимизация страниц с помощью кэширования на сервере
5. 2. Оптимизация скорости страницы через кеширование в браузере
6. Кэширование браузера через mod_headers
7. Кэширование браузера через mod_expires
8. Кэширование браузера и изменения на вашем сайте
9. 3. Оптимизация скорости страниц за счет минимизации HTTP-запросов.
10. 4. Избегайте ненужных перенаправлений
12. 6. Сжатие CSS и JavaScript
13. 7. Используйте сжатие gzip
14. 8. Оптимизация скорости страницы посредством асинхронной загрузки
15. Асинхронная загрузка JavaScript
16. 9. Используйте субдомены, чтобы получить больше HTTP-запросов
17. 10. Оптимизируйте скорость своей страницы с помощью сети доставки контента (CDN)
18. 11. Улучшите время отклика вашего сервера
19. 12. Избегайте плохих запросов
20. 13. Используйте CSS3 вместо графики для кнопок, иконок и фона
21. 14. Используйте изображения с правильными размерами
22. 15. Используйте правильный формат файла для фотографий
23. 16. Уменьшите информацию об изображении на фотографиях
24. 17. Удалите данные EXIF ​​и метатеги
25. 18. Сначала подумайте о своих мобильных пользователях
26. Зажечь следующий уровень

Первый шаг: узнайте, где возможна оптимизация скорости страницы

Чтобы проверить статус-кво, Google предоставляет вам мощный инструмент: PageSpeed ​​Insights ,

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

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

Результаты PageSpeed ​​Insights можно найти через сайт или через Дополнение к браузеру (Firefox / Chrome) использовать бесплатно.

Что на самом деле означает PageSpeed?

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

Как реально измерить Page-Speed ​​- ориентированные на пользователя показатели производительности

Скорость загрузки страницы важна, об этом не может быть и речи. Но как именно вы на самом деле отвечаете на вопрос о скорости приложения или страницы? Моя страница загружается быстро или нет? Что означает «быстрый» в любом случае? Мы покажем вам метрики, которые ставят пользователя в фокус, потому что в конечном итоге речь идет о том, когда он находит приложение или веб-сайт быстрым.

На Блог разработчиков Google показывает Филиппа Уолтона Распространенное высказывание «Мое приложение загружается за секунды X.XX» вряд ли отражает реальность. Скорее, время зарядки зависит, с одной стороны, от очень индивидуальных факторов, таких как устройство или подключение к Интернету. С другой стороны, время загрузки не описывает ни одного момента, но его следует считать гораздо более дифференцированным. Следующие вопросы показывают, какие разные уровни регистрируются пользователем при загрузке страницы / приложения:

• Что-нибудь случается? Навигация запускается успешно? Сервер отвечает?
• Это то, что уже можно использовать? Было ли запущено достаточно контента, который может привлечь пользователей?
• Можно ли использовать показанное? Могут ли пользователи уже взаимодействовать со страницей (ссылками, текстовыми полями и т. Д.) Или ее по-прежнему нужно загружать?
• Это приятно? Взаимодействия идут гладко и без задержек?

Филипп Уолтон предлагает несколько метрик для этого:

Первая краска (FP)

Чтение «Первая краска» отвечает на вопрос пользователя «Что-нибудь случилось?». Это примерно первый момент, когда первые пиксели появляются на экране, и, таким образом, впервые появляется любой цвет. Итак, что-то происходит.

Первая содержательная краска (FCP)

С этим измеренным значением это уже более конкретный шаг: речь идет уже не о каком-либо цвете, который появляется на экране, а о первом контенте, то есть о первом тексте или первом изображении. Сколько времени занимает отображение первого текстового / графического контента?

Первая значимая краска (FMP) и хронометраж элемента героя

Вот вопрос «Можно ли его использовать?». Таким образом, показанный контент уже полезен? Каждый сайт содержит разный полезный / важный контент. Самое важное содержимое страницы также называется «Содержимое героя». Например, на странице погоды это будет отчет о текущей погоде для определенного местоположения. Если контент этого героя загружается особенно быстро, пользователь вряд ли заметит, что менее важный контент добавляется постепенно.

Длинные задачи

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

Время до Интерактивности (TSI)

Метрика «Время до интерактивного» теперь относится к периоду времени, по истечении которого страница не только визуально видима, но и готова к взаимодействию с пользователем.

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

• Что-нибудь случается? Первая краска (FP) / Первая содержательная краска (FCP)
• Это то, что уже можно использовать? Первая значимая краска (FMP) / Синхронизация элементов героя
• Можно ли использовать показанное? Время до Интерактивности (TSI)
• Это приятно? Отсутствие длинных заданий

источник: Разработчики Google

Как именно вы можете измерить перечисленные значения на пользовательских устройствах, объясняет сообщение в блоге Google подробно.

Для получения дополнительных советов по оптимизации страницы посетите наш 121WATT блоге.

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

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

Вы хотите больше скорости страницы прямо сейчас?

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

Если вы маркетолог , помните, что любое ваше желание по отношению к разработчику может повлиять на скорость ваших сайтов. Даже если Марк Цукерберг лично напишет код для вашего проекта.

1. Оптимизация страниц с помощью кэширования на сервере

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

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

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

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

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

Если вы используете WordPress, вы можете сделать это Плагин WP Rocket Используйте для настройки вашего кэширования довольно легко и быстро.

2. Оптимизация скорости страницы через кеширование в браузере

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

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

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

Если вы используете WordPress, эти плагины помогут вам:

Вручную настроить кэширование в браузере немного сложнее.

Во-первых, вам нужно убедиться, что mod_headers или mod_expires выполняют свою работу на вашем сервере, чтобы они были включены.

Кэширование браузера через mod_headers

В случае mod_headers правильная запись в .htaccess выглядит так:

В скобках указаны типы файлов для кэширования.

Age = 2592000 устанавливает продолжительность кеширования в секундах. В этом случае 30 дней.

Кэширование браузера через mod_expires

В этом варианте вы добавляете этот код в ваш файл .htaccess:

Как видно из кода, можно определить продолжительность кеширования для каждого типа файлов. Таким образом, вы можете работать с такими значениями здесь как:

• 1 месяц
• 2 недели
• 3600 секунд

Кэширование браузера и изменения на вашем сайте

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

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

3. Оптимизация скорости страниц за счет минимизации HTTP-запросов.

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

Браузеры могут выполнять от 2 до 8 запросов одновременно и для каждого домена. Так что есть верхний предел. Если это превышено, остальные вызовы должны ждать, пока другие не будут выполнены. Чем дольше это занимает, тем больше времени требуется для отображения всей веб-страницы.

Задача : сохранить запросы к серверу для каждого домена. Так что не давайте вашему HTML несколько небольших CSS-файлов, а суммируйте, что следует суммировать. Это также относится к файлам JavaScript.

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

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

Однако тема «верхний предел запроса» скоро устареет , потому что HTTP / 2 находится в стартовых блоках. Это избавляет от необходимости объединять файлы CSS и JavaScript, поскольку верхний предел запросов здесь больше не актуален. В результате изложенный выше подход к оптимизации меняется на противоположный. Теперь ваш сервер должен в лучшем случае предоставлять файлы меньшего размера, потому что, конечно, они содержат гораздо меньше избыточной информации. Так что только CSS, который действительно используется на этой веб-странице.

Но ваш сервер и браузер посетителя вашего сайта должны понимать HTTP / 2. Современные браузеры могут делать это в последних версиях. На стороне сервера в настоящее время возможно в Германии, но только несколько хостеров. Это также потому, что окончательная спецификация для HTTP / 2 пока недоступна. Во многих местах это все еще означает: подожди и посмотри .

К счастью, Google уже понимает HTTP / 2. А для старых браузеров HTTP / 2 полностью обратно совместим.

4. Избегайте ненужных перенаправлений

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

Вот пример:

Блог 121WATT рухнул в начале 121watt.de/blog потом встал blog.121watt.de переехал затем открыть через несколько лет 121watt.de/blog бежать. В какой-то момент мы ввели https, который расширил наши URL в журнале на букву «s».

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

Противоядие называется «документация». Полная, добросовестная и понятная документация. Что обычно является хорошей идеей при запуске веб-сайта, становится незаменимым при оптимизации страниц-страниц для перенаправлений.

А как вы устраняете такую ​​ссылку тормозом? Это не сложно в конце. Технически вы можете обойти цепное перенаправление, воспользовавшись ярлыком. От оригинальной ссылки до текущей ссылки. Однако, чтобы сохранить наши обратные ссылки от любого предыдущего URL-адреса, каждый из этих URL-адресов должен указывать непосредственно на текущую ссылку.

5. Скачивайте контент через AJAX

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

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

Сейчас есть люди, которые не смотрят ваш сайт до самого конца. Может быть, потому что они нашли информацию, которую искали в начале, потому что они приняли решение покупать рано или даже потому, что не нашли то, что искали.

С точки зрения оптимизации скорости страницы, теперь вы можете перезаряжать только содержимое, которое будет отображаться AJAX в зависимости от положения прокрутки.

Самый известный пример и пионер в этой области был Pinterest , Здесь было практически невозможно загрузить все сообщения по теме сразу. Таким образом, следующие пункты были перезагружены, когда средство просмотра страницы прокручивалось до самого конца. Модное слово: бесконечная прокрутка.

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

Кстати, перезагрузка через AJAX особенно полезна на смартфонах. Даже с нормальными длинными сторонами. Потому что дисплеи настолько узкие, что даже короткие страницы могут быстро стать очень длинными.

6. Сжатие CSS и JavaScript

Любой вызываемый файл CSS, HTML или JS должен быть загружен. Чем он меньше, тем быстрее он работает. Вы можете уменьшить объем данных, сжимая их.

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

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

Вот как сжатие влияет на файл JS.

В этом примере размер нашего файла JavaScript может быть уменьшен на 25%. Для больших файлов процент экономии может быть даже выше. Во время написания этой статьи наш разработчик Роберт уменьшил размер файла JS размером 238 КБ до 35 КБ. Это соответствует снижению более чем на 85% .

В JavaScript вы также можете обрезать имена переменных. Самое короткое имя, конечно, однозначное. Но вы не можете так плохо программировать. Говорящие переменные всегда лучший выбор.

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

7. Используйте сжатие gzip

Gzip сжимает файлы. Ваш размер файла будет уменьшен. В результате эти файлы также могут быть переданы быстрее.

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

Здесь вы узнаете больше о Активация GZip ,

8. Оптимизация скорости страницы посредством асинхронной загрузки

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

Поэтому расположение файлов CSS и JS в HTML долгое время определялось особенностями синхронной загрузки: CSS в <head>, JS в конце <body>.

• CSS загружается в начале, чтобы браузер знал, как отобразить ваш сайт. Если бы вы связали свои CSS-файлы в нижней части вашего HTML-кода, HTML-код сначала был бы загружен без стилей, то есть безобразно, как в темноте ночи, а затем сначала был бы стилизован.
• JavaScript отличается. Он поддерживает поведение вашего сайта, а не внешний вид. Так как в случае сомнений посетителю нужна информация на сайте, JavaScript и, следовательно, функциональные возможности сайта загружаются в конце с синхронной загрузкой.

Javascript и CSS, однако, вы также можете загружать асинхронно. Но прежде чем мы пойдем в глубины Критический путь рендеринга Я кратко объясню, почему вы должны загружать JavaScript асинхронно.

Асинхронная загрузка JavaScript

При асинхронной загрузке JavaScript не имеет значения, находятся ли ваши файлы JS вверху или внизу HTML.

Почему?

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

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

9. Используйте субдомены, чтобы получить больше HTTP-запросов

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

Таким образом, вы можете загружать файлы CSS и JS одним или несколькими поддоменами. Почему?

Допустим, ваш сайт состоит из 28 файлов. HTML, CSS, JS и различные картинки. Для простоты давайте предположим, что все эти файлы имеют одинаковый размер. Например, 15 кб.

Если все 28 файлов были расположены на вашем основном домене, браузер вашего посетителя мог бы загрузить их в 4 этапа: 8, 8, 8, 4.

Если загрузка файла занимает в общей сложности 50 миллисекунд, то файлы теоретически будут загружены в течение 200 миллисекунд .

Если все файлы были распределены по вашему основному домену и 3 поддоменам, браузер вашего посетителя мог бы одновременно получать 28 запросов. Теоретическое время загрузки для всех 28 файлов сейчас: 50 миллисекунд .

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

Иногда это помогает поместить все изображения в домен bilder.deinedomain.de. JavaScript и CSS в большинстве случаев должны существовать только как один файл.

Все это отсутствует в HTTP / 2. Здесь запросы на домен больше не ограничены.

10. Оптимизируйте скорость своей страницы с помощью сети доставки контента (CDN)

CDN позволяет загружать элементы вашего сайта без нагрузки на ваш собственный сервер. Это работает со скриптами, изображениями, CSS и всеми другими элементами, которые должны быть загружены через HTTP-запрос.

Одним из преимуществ является сохранение HTTP-запросов на вашем собственном сервере. Во-вторых, CDN работают на региональном уровне. Поэтому, когда клиент загружает товары в Германии, они загружаются из Германии, а не из США или Филиппин. Таким образом, скорость снова увеличивается за счет более коротких путей передачи.

Есть много провайдеров CDN. Для маленьких и для огромных проектов. Они тогда дешевы или дороги.

В 121WATT мы используем MaxCDN ,

Вы хотели получить больше SEO? Тогда вы найдете здесь наши следующие даты для нашей SEO-структуры или технического SEO семинара:

11. Улучшите время отклика вашего сервера

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

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

И как быстро это "быстро"? Google пишет в PageSpeed ​​Insights, что значение должно быть ниже 200 мс , Только после этого Google-Bot постоянно и регулярно посещает этот URL.

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

Упростите это здесь и выберите второй вариант, если можете.

Дополнительные советы по сокращению времени отклика вы можете найти в этой статье ,

12. Избегайте плохих запросов

Если ваш веб-сайт вызывается и ваш веб-сервер получает запрос на доставку файла, он также должен доставить. Если отдельные элементы, такие как изображения, JavaScript или CSS, не найдены, ранее гладкое взаимодействие между клиентом и сервером становится горячим обсуждением отсутствующего контента. Это связывает ресурсы, например, с ненужными DNS Просмотров быть вызванным.

Вы можете легко исправить отсутствие запрошенных файлов:

1. Сделайте отсутствующий файл снова доступным там, где он был изначально
2. Перенаправить на новое имя файла или место, где файл теперь можно найти

Но вы должны раскрыть запросы ванны в первую очередь. Вы можете сделать это снова Используйте Кричащую Лягушку ,

404 ошибки на сайте, которые были обнаружены в Screaming Frog

13. Используйте CSS3 вместо графики для кнопок, иконок и фона

Да, этот совет старый. Но вы не верите, сколько раз он все еще игнорируется.

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

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

Быстрее и элегантнее создавать все графические элементы, не относящиеся к фотографии, с помощью CSS. Классика - это кнопки. Если они созданы в CSS3, они состоят всего из нескольких строк кода.

В дополнение к сохраненному времени загрузки графика, сгенерированная CSS, конечно же, везде четкая. На обычном мониторе с разрешением 72 т / д или на сетчатке с разрешением 220 т / д.

14. Используйте изображения с правильными размерами

Размеры изображения всегда должны измеряться при максимальном представлении соответствующего экрана на вашей стороне. Давайте поговорим об адаптивном дизайне, где изображение отображается на рабочем столе с разрешением 1000 x 1000 пикселей, но на телефоне, но гораздо меньшего размера, изображение все еще должно существовать в размере 1000 x 1000 пикселей.

Однако есть один недостаток этой процедуры: изображение всегда загружается в полном размере. Отзывчивый или нет. Обходной путь обеспечивается такими инструментами, как imgix , Здесь ваши изображения размещаются и отображаются в зависимости от размера области просмотра и вывода. Так что если кто-то смотрит на ваш сайт на смартфоне, изображение также доставляется только в соответствующем размере. Это экономит место.

Вы также можете использовать элемент <picture>. Этот элемент HTML5 позволяет предлагать разные версии для изображения. Эти версии основаны на разных размерах области просмотра, которые вы можете определить самостоятельно:

15. Используйте правильный формат файла для фотографий

В принципе, только три формата файлов имеют отношение к изображениям на веб-сайтах: .jpg, .png и .gif. Но что вы должны использовать для чего?

Как правило:

• .jpg для фотографий и фоновой графики
• .png, .gif или .svg для макета графики

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

Для графики - особенно для фотографий - использование векторного формата SVG имеет смысл. Эти файлы очень маленькие, но бесконечно масштабируемые. Таким образом, они также могут отображаться на дисплеях Retina без потери качества.

16. Уменьшите информацию об изображении на фотографиях

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

Например, рисунок можно сжать до приемлемого уровня в Photoshop, а затем отредактировать с помощью такого инструмента, как kraken.io или PNGGauntlet быть освобожденным от других избыточных элементов.

17. Удалите данные EXIF ​​и метатеги

Большинство фотографий содержат метаинформацию, такую ​​как EXIF ​​и метатеги. Эта информация убирает пространство и не предлагает никакой дополнительной ценности на веб-сайте. Так куда же пойти? Справа: в мусорном ведре. Например, веб-сервис помогает нам здесь tinypng ,

18. Сначала подумайте о своих мобильных пользователях

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

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

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

Зажечь следующий уровень

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

Теперь вы знаете контекст и наиболее эффективные способы сделать ваш сайт быстрее и предоставить нужного ему пользователя и машину: Скорость!

Я что-то забыл? У вас есть вопросы? Вы видите что-то другое? Используйте нашу функцию комментариев, чтобы связаться со мной.

Похожие

Комментарии