9 способов сделать ваш сайт супер быстрым

1. Почему скорость вашего сайта имеет значение
2. Как проверить скорость вашего сайта
3. 9 способов ускорить загрузку вашего сайта
4. 2. Понимать HTTP-запросы
5. 3. Сделайте изображения доступными для интернета
6. 4. Используйте плагины редко (только для сайтов WP)
7. 5. Сократить внешние скрипты
8. 6. Оптимизируйте файлы JS и CSS
9. 8. Исключить багаж сайта
10. 9. Используйте сеть доставки контента (CDN)
11. Вот что вы можете сделать дальше

Нет ничего более расстраивающего, чем медленный сайт.

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

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

Чтобы было легче перемещаться по статье, вот оглавление:

Почему скорость вашего сайта имеет значение

Как проверить скорость вашего сайта

9 способов ускорить загрузку вашего сайта

1. Улучшите ваш хостинг-план
2. Понимать HTTP-запросы
3. Сделайте изображения доступными для интернета
4. Используйте плагины редко (только для сайтов WP)
5. Сократить внешние скрипты
6. Оптимизировать файлы JS и CSS
7. Воспользуйтесь кешированием
8. Исключить багаж сайта
9. Использовать сеть доставки контента (CDN)

Почему скорость вашего сайта имеет значение

Скорость вашего сайта имеет значение по двум причинам:

1. Опыт вашего пользователя
2. SEO

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

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

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

Что касается SEO , Google использует скорость сайта как один из многих факторов, определяющих рейтинг (насколько высоко ваша страница появляется в результатах поиска).

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

Bing также использует скорость страницы в качестве фактора.

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

Как проверить скорость вашего сайта

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

1. Google PageSpeed ​​Insights : Собственный инструмент Google. Дает мобильные и настольные рекомендации.
2. Pingdom : Полезно для всех уровней квалификации. Проверяет эффективность сайта, оценивает его и отслеживает историю производительности, чтобы вы могли видеть, как изменилась скорость вашего сайта.
3. GTmetrix : Один из самых популярных инструментов там. GTmetrix анализирует, насколько хорошо загружается ваш сайт, проверяя оценки как PageSpeed, так и YSlow. Он также дает советы о том, как улучшить время загрузки.
4. YSlow : Оценка веб-страниц о том, как они соответствуют установленным руководящим принципам высокой эффективности. Также суммирует различные компоненты веб-сайта и позволяет просматривать анализ, дает советы о том, как улучшить ваш сайт. YSlow предлагает расширение Chrome для проверки скорости веб-сайтов.

Мой личный фаворит - Google PageSpeed ​​Insights. Он прост в использовании, и результаты представлены четко. Он также организует предложения по «следует исправить», «рассмотреть вопрос об исправлении» и «пройденные правила».

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

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

9 способов ускорить загрузку вашего сайта

1. Улучшите ваш хостинг-план

Это один из самых простых способов ускорить работу вашего сайта: посмотреть на свой сервер.

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

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

После того, как я обновил свой основной общий план, я сразу заметил различия.

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

Небольшая заметка о VPS и выделенном хостинге:

VPS хостинг - это, вероятно, вариант, с которым вы хотите пойти. Он «в облаке», то есть он распределен по нескольким компьютерам, иногда даже по сотням. Это масштабируемое решение, и это более доступное решение, чем выделенный хостинг. Блоггеры и представители среднего / малого бизнеса сочтут этот вариант наиболее привлекательным.

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

Для получения дополнительной информации о разнице между VPS и выделенными параметрами, проверить эту статью , И больше на лучшее Варианты хостинга WordPress, продолжайте здесь ,

2. Понимать HTTP-запросы

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

В соответствии с rve.org.uk ,

«Всякий раз, когда ваш веб-браузер выбирает файл (страницу, изображение и т. Д.) С веб-сервера, он делает это, используя HTTP - это« Протокол передачи гипертекста ». HTTP - это протокол запроса / ответа, который означает, что ваш компьютер отправляет запрос на какой-либо файл (например, «Получить мне файл« home.html »»), а веб-сервер отправляет ответ («Вот файл», после чего следует сам файл). »

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

Однако, чтобы узнать, сколько HTTP-запросов делает страница на вашем сайте, вы можете запустить тест скорости на Pingdom ,

Вы можете видеть, что learntocodewith.me/blog делает 23 запроса.

С помощью Pingdom вы можете сортировать запросы по размеру файла и времени загрузки. Это позволяет увидеть самых больших преступников. Изображение ниже было взято на моей домашней странице learntocodewith.me:

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

3. Сделайте изображения доступными для интернета

Размер сайта в целом и размеры изображений, в частности, имеют огромное значение для скорости вашего сайта. Чем больше ваш контент / изображения, тем медленнее сайт.

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

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

1. Изменение разрешения: снижение «качества» изображения (и, соответственно, размера файла)
2. Сжатие изображения: повышение эффективности хранения данных изображения
3. Обрезка изображения: при обрезке вы обрезаете ненужные области и таким образом уменьшаете размер изображения

Вы можете внести подобные изменения в премиум-инструмент, такой как Photoshop, или в бесплатную программу, такую ​​как канитель , Есть даже инструменты в браузере, такие как picresize.com ,

Для пользователей Mac есть бесплатная программа под названием ImageOptim , который «оптимизирует параметры сжатия, удаляет ненужные метаданные и ненужные цветовые профили».

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

4. Используйте плагины редко (только для сайтов WP)

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

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

Для начала, если есть простой способ обойти использование плагина - сделайте это. (Пример: плагин Google Analytics. Вместо этого просто добавьте код отслеживания в нижний колонтитул вашего сайта вручную.)

Также каждые 4-6 месяцев отводите время на просмотр ваших плагинов. Оцените каждый и удалите его, если:

1. Вы больше не используете это.
2. Он не делает то, что должен делать.
3. Это «вызов устаревших функций»
4. Есть новые и улучшенные плагины, которые будут работать лучше

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

5. Сократить внешние скрипты

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

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

1. Facebook «как моя страница» коробки
2. Bootstrap (если введен через CDN)
3. Наборы иконок, такие как Font Awesome (также при вводе с CDN)
4. Внешние системы комментирования (например, Disqus)
5. Всплывающие окна и аналогичные инструменты захвата потенциальных клиентов (например, SumoMe)
6. Службы аналитики веб-сайтов (например, Google Analytics или Mixpanel)
7. Внешние шрифты (например, Google Fonts)

Это не значит, что вы должны избегать всего этого вместе (что трудно сделать в любом случае). Просто знайте об этом.

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

6. Оптимизируйте файлы JS и CSS

Есть два способа сделать это: минификация и сжатие (или сжатие). По словам гения CSS Крис Койер :

Gzipping, тем временем:

Для достижения наилучших результатов, вы хотите использовать минимизацию и gzipping вместе.

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

Чтобы начать, вот несколько минимизирующих инструментов:

1. (Плагин WordPress) BWP Minify : позволяет комбинировать и минимизировать ваши файлы CSS и JavaScript
2. (Плагин WordPress) W3 Total Cache Это один из самых популярных плагинов производительности. На самом деле, я использую его в Учиться кодировать со мной. Он предлагает набор инструментов для повышения производительности, включая возможность минимизации файлов.
3. WillPeavy : Бесплатный HTML, CSS или JS minifier

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

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

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

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

1. W3 Total Cache : самый популярный плагин производительности (тот, который я использую на learntocodewith.me)
2. WP Super Cache : предлагается для сайтов с большим трафиком и серверами с недостаточной мощностью, кажется, обновляется чаще всего (создано Automattic )

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

8. Исключить багаж сайта

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

Некоторые другие распространенные примеры багажа на сайте:

1. Код, который накапливается на вашем сайте (например, когда вы делаете быстрые исправления, не рассматривая наиболее продуктивный способ реализации изменений)
2. Базы данных, которые стали массивными - это может быть особенно в случае сайтов электронной коммерции с большим количеством заказов
3. Слишком много резервных копий сделано на уровне сервера
4. Для пользователей WordPress - излишние плагины, темы, сохраненные пост и ревизии страницы и массивные медиа-библиотеки

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

Вот некоторые дополнительные советы:

1. Удалите спам-комментарии или трекбеки, которые вам не нужны.
2. Храните медиафайлы, такие как файлы PDF, для внешнего Amazon S3 (что я и делаю)
3. Для пользователей WP: удалите старые версии WordPress на вашем сервере.
4. Для пользователей WP: используйте плагин вроде WP-Optimize что позволяет более эффективно очищать базу данных

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

Я сохранил CDN для последнего, потому что это более «продвинутый», особенно для новичка.

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

Вот что вы можете хранить на CDN:

• JS файлы
• CSS файлы
• Изображений
• Другие загруженные файлы (например, видео, PDF)

Некоторые распространенные CDN включают в себя:

1. MaxCDN
2. CloudFlare
3. Amazon CloudFront

Если вы находитесь на сайте WordPress и уже используете популярный Плагин W3 Total Cache Вот несколько хороших новостей: он интегрируется с MaxCDN, так что вы можете запустить CDN практически за короткое время. (В других ситуациях может быть не так просто перенести ресурсы вашего сайта в CDN.)

Однако у CDN есть и обратная сторона: они могут стать дорогими. Особенно, если вы используете много пропускной способности.

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

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

Вот что вы можете сделать дальше

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

1. При использовании сайта WordPress удалите неиспользуемые плагины и темы
2. Если вы используете какой-либо сайт, удалите все ненужные внешние скрипты (например, Facebook как Box, SumoMe, Hello Bar, Font Awesome, инструменты тестирования AB, такие как Optimizely и т. Д.)

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

Если вы нашли эту статью полезной, обязательно поделитесь ею в Twitter!

Примечание: есть партнерские ссылки в этом посте.

Похожие

Комментарии