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

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

Что делает ваш сайт медленным?

Вы обязательно должны проверить мой предыдущий пост с 16 способами ускорить ваш сайт WordPress.

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

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

1. Сверхтяжелые сайты

Нет никаких сомнений в том, что страница размером 3 МБ с 180 HTTP-запросами будет работать медленнее, чем сайт размером 1 МБ с 60 HTTP-запросами.

Хотите оптимизировать время загрузки вашего сайта?

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

Хотя вы можете оптимизировать свои изображения, комбинировать файлы CSS, минимизировать файлы Javascript и применять множество настроек оптимизации внешнего интерфейса, наличие сайта размером 3 МБ сделает ваш сайт медленным, а пользователи вашего сайта будут недовольны.

21 МБ — это огромная нагрузка для вашего сервера и вашего браузера.

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

Другими словами, вы всегда должны спрашивать себя:

Мне действительно нужно 8 больших изображений в моем слайд-шоу на главной странице?

Должен ли я отображать 20 элементов портфолио на главной странице?

Должен ли я показывать 12 отзывов счастливых пользователей на главной странице или 3 отзыва тоже подойдут?

Загрузка всех этих данных делает ваш сайт красивым, но он также будет работать медленнее из-за всех этих данных.

Хотите медленно загружаемый сайт? Если нет, то минимизируйте данные, загружаемые на страницу вашего сайта.

2. Неоптимизированные изображения

Знаете ли вы, что 80% времени, которое требуется для загрузки веб-сайта, контролируется интерфейсной структурой?

Это удивительный факт оптимизации веб-производительности.

80% времени отклика конечного пользователя тратится на внешний интерфейс. Сосредоточьтесь на этом.

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

Файл PNG размером 460 КБ может стать 90 КБ после его оптимизации.

Если у вас на сайте 10 неоптимизированных изображений, то вы можете добавить 2-3 МБ дополнительной загрузки страницы.

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

Хорошей новостью является то, что большинство изображений JPG и PNG можно уменьшить на 40% или даже до 80% без потери качества изображения, оптимизировав их с помощью Photoshop, ImageOptim или стороннего инструмента, такого как Kraken.

3. Чрезмерное использование рекламы

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

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

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

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

Вам действительно нужна вся эта назойливая реклама?

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

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

4. Неправильные размеры ваших изображений

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

Например, давайте предположим, что у вас есть изображение размером 1200 x 600 пикселей, и вы хотите использовать его «меньшую» версию, например, 400 x 200 пикселей.

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

Вы должны создать новое миниатюрное изображение, изменив размер исходного изображения с 1200 x 600 пикселей до 400 x 200 пикселей и использовать новое изображение, которое меньше и будет загружаться быстрее.

Я сталкивался со многими сайтами, которые раньше загружали изображение facebook размером 256 x 256 размером 150 КБ вместо значка facebook размером 32 x 32 размером 2 КБ!

5. Бессмысленные перенаправления

У меня есть для вас небольшой тест.

Какое из следующих изображений загружается быстрее: A, B, C или D?

А. http://www.domain.com/image.jpg
Б. http://domain.com/image.jpg
C. https://www.domain.com/image.jpg
Д. https://domain.com/image.jpg

Вы выбрали А? Неправильный.
Вы выбрали Б? Неправильный.
Вы выбрали С? Неправильный.
Вы выбрали Д? Опять неправильно!

Правильный ответ: это зависит от вашего сайта!

Если ваш сайт https://www.domain.com, то при вызове не-HTTPS версии изображения (http://www.domain.com/image.jpg) будет дополнительная переадресация с http: //www.domain.com/image.jpg на https://www.domain.com/image.jpg в браузере, чтобы загрузить изображение.

Если вы используете версию без www для своего сайта (http://domain.com/), то вам всегда следует использовать версию без www и для ваших изображений (например, http://domain.com/image. jpg вместо http://www.domain.com/image.jpg).

Браузеры не любят такие бессмысленные перенаправления.

Бессмысленные перенаправления замедлят работу вашего сайта

Используя относительные URL-адреса для ваших файлов (например, <img src="//eadn-wc04-1126528.nxedge.io/image.jpg" />), вы можете легко избавиться от этой распространенной проблемы, которая замедляет время загрузки твой сайт.

6. Неверное расположение сервера

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

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

Излишне говорить, что если вы получаете трафик со всего мира, то я настоятельно рекомендую вам использовать сеть доставки контента или CloudFlare, чтобы изображения, файлы CSS и Javascript загружались с сервера, расположенного ближе к местоположению каждого пользователя.

7. Хитрые планы виртуального хостинга

Никто не хочет платить $$$ за хостинг сайта, но обслуживание сайта WooCommerce с 40 активными плагинами или сайта Magento с 5000 продуктов через план общего хостинга, который стоит 5 долларов в месяц, — это рецепт катастрофы.

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

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

Если у вас есть тяжелый сайт WordPress, использующий Woocommerce или множество активных плагинов, я настоятельно рекомендую WP Engine и FlyWheel (партнерские ссылки).

Вы не должны рассчитывать на получение 200 000 уникальных посещений в месяц для перехода на VPS, этого никогда не произойдет, пока вы размещаете свой сайт на том же перегруженном сервере с сотнями сайтов на нем.

8. Чрезмерное использование скриптов социальных сетей

Скрипты социальных сетей (Facebook, Twitter, Pinterest и т. д.) добавляют поиск DNS, набор файлов Javascript и несколько изображений, когда они добавляются на страницу.

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

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

Отображение 5 различных счетчиков социальных сетей для каждого сообщения на главной странице или страницах категорий увеличивает нагрузку на ваш сайт. Насколько важно показывать счетчики на этих страницах? Вам также нужно показывать Facebook, Twitter, Pinterest, Google Plus и LinkedIn?

Слишком много сценариев социальных сетей могут снизить производительность вашего сайта.

Не могли бы вы просто показать 1 или 2, которые хорошо работают для вас? Если у вас не так много репостов, есть ли смысл их вообще показывать?

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

9. Неправильный тип файла для ваших изображений

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

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

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

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

10. Не пользоваться специальными услугами

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

У вас есть видео на вашем сайте? Вы должны использовать Youtube, Wistia или Vimeo.

У вас много комментариев на вашем сайте? Вы должны использовать Disqus, IntenseDebate или
Дискурс.

Используете ли вы jQuery, jQuery UI, AngularJS или Mootools? Вы должны загрузить их через размещенные в Google библиотеки.

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

Вы также можете использовать сеть доставки контента (CDN) для доставки ваших изображений из нее вместо вашего сайта.

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

11. 404 ошибки

Если вы попытаетесь загрузить несуществующий файл или браузер не сможет его найти, эта ошибка 404 HTTP повлияет на время загрузки вашего сайта.

Вы всегда должны проверять наличие ошибок 404 во время рендеринга ваших страниц, чтобы добиться максимально быстрого времени загрузки. Вы можете сделать это, проверив сгенерированный водопад вашего сайта с помощью Webpagetest и GTMetrix или используя вкладку сети браузеров, таких как Chrome и Firefox.

Если Webpagetest показывает какие-либо красные линии на водопаде, вам следует немедленно устранить неполадки и исправить эти ошибки 404.

Ошибки 404 могут испортить время загрузки

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

12. Не кэшировать ваш сайт

Каждая система управления контентом (WordPress, Joomla, Drupal, Magento) использует базу данных для того, чтобы хранить в ней большой набор данных.

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

Вы можете решить эту проблему с помощью кэширования.

Если вы используете WordPress, вы можете использовать плагин кэширования, такой как
W3 Total Cache или WP Super Cache или ZenCache или используйте компанию, предоставляющую хостинг управляемых серверов, такую ​​как WP Engine и FlyWheel (партнерские ссылки), которые позаботятся о кэшировании.

Излишне говорить, что Joomla, Drupal и Magento также предлагают варианты кэширования, которые могут очень помочь, предоставляя кэшированные версии вашего сайта для последующих посетителей вместо создания каждой страницы снова и снова.

Кэширование ваших страниц может значительно ускорить ваш сайт

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

13. Сотни HTTP-запросов

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

Хотя вы можете попытаться объединить файлы CSS и Javascript, встроить файлы CSS и использовать спрайты CSS для небольших изображений, если вы реализуете эти настройки и у вас все еще есть 150 HTTP-запросов, то вам, очевидно, следует попытаться навести порядок на своем сайте, удалив содержимое из Это.

246 HTTP-запросов замедлят работу вашего сайта, независимо от того, насколько он оптимизирован.

Я знаю, что заманчиво отображать много контента на каждой странице вашего сайта, но, пожалуйста, имейте в виду, что «чем меньше, тем лучше», поэтому старайтесь не загружать так много изображений или скриптов.

14. Плохая конфигурация сервера

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

Обычно они делают это, отключая такие функции, как сжатие и KeepAlive.

Включение HTTP Keep-Alive позволяет одному TCP-соединению отправлять и получать несколько HTTP-запросов, тем самым уменьшая задержку для последующих запросов.

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

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

Keep-Alive и сжатие должны быть включены на вашем сервере

15. Импорт CSS

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

По возможности следует избегать импорта CSS.

16. Загрузка ненужных файлов на каждой странице

Вы должны загружать файлы CSS и Javascript только тогда, когда они требуются на странице вашего сайта.

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

Если вы не будете следовать этому простому правилу, вы можете в конечном итоге загрузить 30 файлов CSS и 40 файлов Javascript на страницу, для которой нужно только 3 файла CSS и 4 файла Javascript, поэтому вы делаете 63 дополнительных HTTP-запроса и добавляете много сотен килобайт на страницу. размер.

17. Загрузка тяжелых файлов в фоновом режиме

Многие сайты загружали большие фоновые изображения, которые едва видны.

Вам действительно нужно изображение размером 500 КБ, загруженное на фоне? Вы должны попытаться использовать CSS3, когда это возможно, или вместо этого использовать цвет фона.

Также плохой практикой является загрузка звуковых файлов в фоновом режиме во время загрузки вашего сайта.

Большинство из этих методов замедляют работу вашего сайта, и их следует избегать.

18. Не использовать эксперта

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

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

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

Любители могут следовать лучшим практикам, но не знают, с чего начать.

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

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

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

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

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

Представьте, как обрадуются ваши пользователи, увидев супербыструю загрузку!

Если вы хотите нанять меня, я буду рад помочь вам. Посмотрите мое портфолио и свяжитесь со мной на AwesomeWeb сегодня!