Скорость загрузки сайта и SEO соображения

1. Что это
2. Скорость тестирования
3. Google PageSpeed ​​Insights
4. Тест веб-страницы
5. Дополнительные инструменты для проверки скорости
6. Снижение скорости вашего сайта
7. Кэширование
8. компрессия
9. Уменьшить изображения и размеры изображения
10. Редактирование изображения с помощью Pixlr
11. Форматы файлов изображений
12. Размер изображения Технические характеристики
13. Ресурсы

1. Ресурсы
2. Техническая SEO
3. скорость

Что это

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

Наряду с преимуществами для людей, посещающих ваш веб-сайт, более высокие скорости также могут повысить эффективность поиска. В 2010 году Google сделал скорость фактором, который они используют, чтобы помочь определить, где веб-сайт должен занимать место в результатах поиска. С лета 2018 года Google будет включать этот же фактор скорости в свой алгоритм мобильного поиска. Обратите внимание, что скорость работает против тебя не для вас, когда более медленные сайты видят негативное влияние, но более быстрые сайты не получают ускорения из-за их более высоких скоростей.

К счастью, вы можете многое сделать, чтобы уменьшить время загрузки вашего сайта. Естественно, тогда возникает вопрос, как быстро должен загружаться ваш сайт? Google рекомендует, чтобы сайт загружался в течение двух секунд, хотя исследования показали, что примерно половина всех сайтов загружается дольше трех секунд. Тем не менее, другие исследования показывают, что время загрузки более пяти секунд может увеличить показатель отказов, препятствуя посетителям использовать ваш сайт. Суть в том, что ваш сайт должен загружаться как можно быстрее - на настольных и мобильных устройствах.

Мы рекомендуем в Elementive стремиться к тому, чтобы ключевые страницы вашего сайта загружались в течение 1-2 секунд, и определенно не более 3 секунд. Если время загрузки значительно больше, работа над уменьшением скорости вашего сайта, вероятно, будет выгодной инвестицией.

Помните, что когда вы работаете над улучшением скорости вашего сайта, это также влияет на ваш пользовательский опыт. наш исследование того, как пользователи воспринимают скорость обнаружил, что люди, использующие ваш сайт, могут быть менее чувствительны к небольшим изменениям в скорости. Это означает, что если ваш веб-сайт в настоящее время загружается за 5 секунд, делая большие вложения, чтобы снизить скорость до 4 секунд, это может не оказать ощутимого влияния, а снижение скорости до 2 или 3 секунд может привести к снижению производительности.

Скорость тестирования

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

• Старт-рендер или время для первой краски. Это время, которое проходит между запросом URL и тем, как все начинает загружаться в браузер. Небольшая вариация называется First Contentful Paint, которая заключается в том, что фактические элементы загружаются в браузер для просмотра посетителем.
• Полная загрузка или время загрузки. Это время, которое проходит между запросом URL-адреса и завершением загрузки в браузер. Иногда это называется DOM Complete или DOM Content Loaded.

Возвращаясь к нашей рекомендации, вы хотите, чтобы ваш веб-сайт начал рендеринг в течение 1-2 секунд, а общее время загрузки - около 3 секунд.

Google PageSpeed ​​Insights

Один инструмент, который вы можете использовать, и тот, на котором мы сосредоточимся в этом руководстве, это Google PageSpeed ​​Insights.



Как только вы попадете на главную страницу PageSpeed ​​Insights, введите URL-адрес страницы вашего веб-сайта и нажмите «Анализ». Мы будем использовать Amazon в качестве примера. Как только вы нажмете кнопку, тест запустится, и вы увидите страницу результатов, которая будет выглядеть примерно так.



Первая представленная информация - это информация о медиане First Contentful Paint и медиане DOM Content Loaded. Эти данные взяты из отчетов о пользовательском опыте Chrome и отражают реальное время, которое люди испытывали при загрузке вашего сайта. Поскольку она поступает из реальных данных, эта информация не будет доступна для новой страницы и, вероятно, недоступна для веб-сайтов с меньшим трафиком.

В разделе «Статистика страниц» Google предоставляет информацию о размере тестируемой страницы. Это иногда называют весом страницы, потому что страница с большим размером файла тяжелее и загружается дольше. В этом разделе также содержится информация о том, сколько поездок требуется серверу при загрузке этой конкретной страницы - чем меньше, тем лучше, поскольку каждая поездка на сервер добавляет время к общему времени загрузки.



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

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

Тест веб-страницы

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



Находясь на домашней странице, введите URL-адрес страницы, которую вы хотите протестировать. В этом случае мы протестируем домашнюю страницу Elementive. Хорошая особенность теста веб-страниц - вы можете выбирать разные места и устройства. Выберите место рядом где находятся ваши пользователи и выберите браузер, который ваши посетители, скорее всего, будут использовать. В нашем случае мы будем тестировать из Денвера, штат Колорадо, используя браузер Chrome или Firefox на настольном компьютере.

После запуска теста вы попадете на страницу результатов. Вы заметите, что эти результаты намного более подробны, чем то, что предлагает инструмент Google PageSpeed ​​Insights.



Самая важная информация содержится в таблице, которая суммирует три различных прогона теста скорости. В этом тесте домашней страницы Elementive время начала рендеринга составляет 1,3 секунды, а общее время загрузки - 2,4 секунды. Мы рекомендуем чуть более 1-2 секунды, поэтому нам нужно глубже изучить эту таблицу, чтобы увидеть, что нам нужно сделать, чтобы улучшить время загрузки.



Один полезный отчет, чтобы решить, как установить время - отчет о водопаде. Нажмите на ссылку «Подробности» в навигации, чтобы перейти на страницу с отчетом о водопаде. Водопад показывает все, что нужно было загрузить в браузер для загрузки сайта, и порядок, в котором все загружено.



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

Дополнительные инструменты для проверки скорости

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

Снижение скорости вашего сайта

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

Кэширование

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

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

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

В WordPress мы обнаружили один плагин кэширования, который работает довольно хорошо: Кеш кометы , Преимущество Comet Cache в том, что он хорошо работает с множеством других плагинов и тем WordPress. Кроме того, Comet Cache не требует дополнительной настройки для работы. Однако, если вы хотите настроить его дальше, вы можете. Все, что вам нужно сделать, чтобы заставить его работать, это установить плагин, а затем включить его на экране настроек. Когда вы вносите изменения, плагин автоматически очищает кеш, или вы можете нажать кнопку «Очистить», чтобы стереть кеш вручную.



компрессия

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

Сжатие также может привести к большой экономии. В случае Elementive размер нашей домашней страницы на 67% меньше благодаря сжатию GZIP. Вы можете проверьте, включен ли ваш сайт GZIP бесплатно здесь ,



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

# Сжатие HTML, CSS, JavaScript, Text, XML и шрифтов AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application / vnd.ms-fontobject AddOutputFilterByType DEFLATE применение / х-шрифт-OTF AddOutputFilterByType DEFLATE применение / х-шрифта TrueType приложения AddOutputFilterByType DEFLATE / х-шрифт-TTF AddOutputFilterByType DEFLATE применение / х-Javascript AddOutputFilterByType DEFLATE приложений приложение / XHTML + XML AddOutputFilterByType DEFLATE / XML AddOutputFilterByType DEFLATE шрифт / OpenType AddOutputFilterByType шрифта DEFLATE / OTF AddOutputFilterByType DEFLATE шрифт / TTF AddOutputFilterByType DEFLATE изображение / SVG + XML AddOutputFilterByType DEFLATE изображение / х-значок AddOutputFilterByType DEFLATE текст / CSS AddOutputFilterByType DEFLATE текст / html AddOutputFilterByType DEFLATE текст / JavaScript AddOutputFilterByType DEF ПОЗДНО текст / обычный AddOutputFilterByType DEFLATE text / xml

Уменьшить изображения и размеры изображения

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

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

Кроме того, при сохранении изображений убедитесь, что вы сохраняете изображение таким образом, чтобы оно было оптимизировано для размера в Интернете. На рынке есть несколько инструментов для изменения размера изображений. Самой известной программой является Photoshop, но для некоторых стоимость Photoshop может быть слишком высокой. У нас есть несколько альтернативных программ для редактирования фотографий, которые вы можете попробовать, в том числе:

• PicMonkey - простой редактор с множеством функций. Они предлагают бесплатную пробную версию, начиная с $ 5,99 в месяц. (Https://www.picmonkey.com/)
• Pixlr - наша рекомендация о простом и удобном редакторе фотографий для базового кадрирования и определения размера файлов в Интернете, а также его бесплатно! https://pixlr.com/editor/
• GIMP - бесплатное программное обеспечение для редактирования изображений с открытым исходным кодом, которое можно запускать в Windows, Mac или Linux. Это делает все, что делает Photoshop, но не очень интуитивно понятный инструмент для использования. Если вы действительно ищете альтернативу Photoshop и имеете более сложные потребности, это путь. Если нет, Pixlr должен работать просто отлично. - https://www.gimp.org/

Редактирование изображения с помощью Pixlr

Используя приведенный выше пример, у нас есть изображение размером 500x500, и мы хотим обрезать его до 350x350.

1. Начните с перехода на https://pixlr.com/editor/



2. Нажмите Открыть изображение с компьютера



3. Перейдите к нужному изображению, выберите изображение и нажмите «Открыть».



4. Подойдите к строке меню и нажмите Изображение> Размер изображения.



5. В поле «Размер изображения» измените «Ширина» на 350 и убедитесь, что установлен флажок «Ограничить пропорции» (это автоматически отрегулирует высоту и предотвратит искажение изображения).



6. Нажмите ОК, и теперь ваше изображение будет изменено до 350x350



7. Сохраните файл, нажав Ctrl> S на клавиатуре или выбрав Файл> Сохранить



8. Дайте вашему файлу описательное имя



9. Выберите формат файла, который вы хотите использовать (подробнее о форматах файлов см. Ниже)

10. Отрегулируйте качество для ясности и размера файла (подробности о размере файла см. Ниже)

11. Нажмите Okay

12. Сохраните файл на свой компьютер

13. Загрузить на свой сайт

Форматы файлов изображений

Существует несколько форматов файлов изображений, которые вы можете выбрать. Универсально поддерживаемые форматы изображений: GIF, PNG и JPEG. Вы хотите выбрать формат файла, который лучше всего подходит для изображения, с которым вы работаете. По большей части JPEG будет форматом изображения, который вы будете использовать. Google имеет подробное руководство здесь объясняются различные форматы файлов, которые вы можете использовать, и как решить, какой из них лучше для вас.

Размер изображения Технические характеристики

Не существует жестких и быстрых правил, когда дело доходит до идеального размера файла для изображения, но общее практическое правило заключается в том, чтобы сохранять изображения небольшого размера размером до 20 КБ или меньше, средние изображения размером до 60 КБ или меньше и большие изображения 150 КБ или меньше. Каждое изображение на вашем веб-сайте, вероятно, используется по-своему, поэтому руководство по заданному размеру файла нереально. Например, у вас может быть изображение героя на вашей домашней странице. Это изображение не только большое по ширине и высоте, но также, вероятно, имеет большой размер файла по сравнению с уменьшенным изображением, которое вы используете в блоге. Цель с размером файла изображения - сделать его как можно меньше, не искажая и не размывая изображение до такой степени, что оно больше не будет хорошо выглядеть. Поиграйте с настройками качества ваших фотографий, чтобы увидеть, как это влияет на размер файла.

Ресурсы

Технические SEO услуги

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

Предпочитаете более самостоятельный подход? Заказать наш Техническое руководство по SEO справочное руководство, которое поможет вам решить технические проблемы SEO на вашем сайте. Заказать сейчас на Amazon.

Похожие

Комментарии