Создать веб-сайт больше не сложно, по крайней мере, на первый взгляд. Кто угодно может заявить, что создал для вас веб-сайт. Но секрет высокопроизводительного веб-сайта заключается в том, что делается на уровне сервера и связано с технической сложностью, которую большинство веб-дизайнеров не интересует или не знает. Давайте рассмотрим некоторые из этих секретов, которые помогут вашему веб-сайту подняться ввысь с лучшими показателями PageSpeed ​​и YSlow (для лучшего SEO), особенно для мобильных пользователей.

Заблуждение веб-дизайна

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

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

  1. Может быть найден посетителями через поисковые системы (например, Google).
  2. Должно быть быстро для любого посетителя по всему миру, тем более что сейчас мы живем в глобальной экономике, и Amazon является ярким примером.

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

А для пользователей? Пользователи нетерпеливы, и это происходит все чаще.

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

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

Дизайн для мобильных телефонов тоже не так прост, как кажется. Большинство веб-дизайнеров будут использовать тему CMS (система управления контентом), которая является «адаптивной», и в обычных обстоятельствах ваш веб-сайт можно будет просматривать на мобильном телефоне.

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

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

Предубеждение в образовании - проблема

Многие школы сосредотачиваются на веб-дизайне и забывают, что РАЗРАБОТКА так же или даже более важна, чем дизайн, когда дело касается создания хорошего веб-сайта.

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

Я разговаривал с очень дружелюбными коллегами в области технической поддержки веб-хостинговых компаний, и они были достаточно честны, чтобы признать мне, что то, что я с ними общался, было «выше их уровня заработной платы» (цитируя их слова). Мне пришлось самому устранять неполадки и решать многие технические сложности в долгом и трудном пути с 1996 года по настоящее время (21 год!).

Действительно ли сайт удобен для мобильных устройств?

Легко получить автоматически работающую мобильную (адаптивную) тему. Многие люди не понимают, что веб-сайт должен быть не только визуально совместим со смартфоном, но и должен быть совместим с пропускной способностью, то есть фактически достаточно быстро загружаться на мобильный телефон через соединение 3G или, возможно, 4G.

Бесплатный и простой способ протестировать свой сайт - использовать тот самый браузер, который создал король поисковых систем - Google Chrome браузер.

Под браузером Инструменты разработчика выберите, выберите Cетьи дросселирование параметры и выберите "Хороший 3G"(хорошая оценка для многих пользователей смартфонов в этой части развитого мира) и нажмите"Отключить кеш".

Внизу экрана вы увидите 3 показания:

  • Запросы,
  • (Данные) Переведени
  • Завершить (время для полной загрузки страницы).

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

Например, наш веб-сайт делает 23 запроса, имеет размер 640 КБ и полностью загружается за 6.6 секунды при подключении мобильного 3G.

20170423_chrome3g_mb1

Тест Chrome Network Throttling - наш собственный веб-сайт

Вот пример страницы агентства веб-дизайна, которая выполняет 79 запросов, имеет колоссальный размер 1.5 МБ и загружается за 9.81 секунды при подключении мобильного 3G.

20170423_chrome3g_webdevcd1

Chrome Network Throttling Test - агентство веб-дизайна

Вот разработанный нами интернет-магазин электронной коммерции, который размещает на этой странице 50 вариантов продуктов и выполняет 70 запросов, имеет размер 1.1 МБ (из-за 50 продуктов) и завершает загрузку за 9.76 секунды.

20170423_chrome3g_ecommepshub1

Chrome Network Throttling Test - сайт электронной коммерции, который мы разработали

Это интернет-магазин другой компании с 244 запросами, размером 6.7 МБ, загрузка которого завершается за 39.91 секунды. Это крайне недружелюбно для мобильного пользователя, и показатель отказов будет высоким. Было бы разумнее уменьшить количество запросов на каждой странице с помощью более разумного дизайна и тем самым уменьшить общий размер страницы и время ее загрузки.

20170423_chrome3g_ecommchallgr1

Chrome Network Throttling Test - крупный местный сайт электронной коммерции

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

Навыки администрирования серверов и безопасности жизненно важны

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

У меня есть привилегия быть специалистом по безопасности с 1996 года, я занимаюсь программированием безопасности и консультирую на стратегическом уровне, чтобы хотя бы понять, что нужно делать. Но у многих молодых дизайнеров не будет этой должности или знаний. Для плагинов безопасности WordPress неправильная конфигурация может вывести веб-сайт из строя (500 запрещенных ошибок) и даже полностью заблокировать законных пользователей. А отсутствие безопасности может очень легко вывести веб-сайт из строя из-за частых DDoS (распределенный отказ в обслуживании) и атак грубой силы. Это критический фактор, и к нему нельзя относиться легкомысленно.

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

Хороший веб-сайт с качественным SEO (поисковая оптимизация) и оптимизацией контента требует знаний программирования и администрирования серверов, таких как апаш конфигурация / безопасность веб-сервера, PHP язык сценариев и SQL управление базой данных для настройки WordPress CMS. Эти технические навыки являются прерогативой программистов и разработчиков.

Некоторые мелочи, которые могут улучшить производительность и безопасность вашего веб-сайта, но могут игнорироваться простыми дизайнерами, также являются версиями программного обеспечения вашего веб-сервера Apache (или другого сопоставимого программного обеспечения веб-сервера), PHP и SQL.

Например, используете ли вы хотя бы Apache 2.4x, PHP 7 и MariaDB 10? Опять же, это потребует некоторых настроек, чтобы ваш сайт работал должным образом.

GTmetrix спешит на помощь

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

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

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

Каков рейтинг вашего сайта?

Помимо оценок PageSpeed ​​и YSlow, другие важные факторы, которые вы можете выделить из GTmetrix:

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

2) Общий размер страницы - достаточно ли она мала для мобильных? Подходит ли пропускная способность веб-страницы при медленном общедоступном Wi-Fi или 3G? Вот где вам нужно здравомыслие, а не навязчивая идея. Один из распространенных недостатков веб-дизайнеров (включая некоторые крупные магазины) заключается в том, что изображения не оптимизированы для Интернета. Например, вам НЕ нужно изображение размером 4,000 пикселей (шириной) для Интернета, которое больше предназначено для печати. Изображение размером 1,200 пикселей (шириной) с оптимальным сжатием достаточно хорошо. Кроме того, используйте «масштабированные изображения», которые требуют большего от веб-дизайнера, но помогут с PageSpeed ​​и производительностью. Помните, что наше человеческое зрение основано на нечеткой логике и очень изощренно, чтобы различать детали без необходимости полного или высокого разрешения. Как пионер в области интерактивного медиа-дизайна с 1986 года, я уверяю вас, что есть множество невероятных уловок, которые можно использовать, чтобы резко уменьшить размеры изображений и сделать веб-сайт легковесным.

3) Запросы - количество HTTP-запросов к различным сайтам и серверам для обслуживания всей страницы. Некоторые сайты отправляют сотни запросов к серверу, а это слишком много. Для законных запросов, таких как CSS (каскадные таблицы стилей) и JS (Javascript), объедините и минимизируйте их, если это возможно. Встраивайте небольшие файлы CSS и JS, когда можете. Ненужные HTTP-вызовы могут снизить удобство использования веб-сайта, увеличить количество ошибок, снизить скорость, а также вызвать проблемы с безопасностью и конфиденциальностью. Такие запросы часто возникают с доменами cookie, поставщиками рекламы, видео платформами, платформами социальных сетей и т. Д. Разумно используйте запросы. При необходимости выберите наименьшие знаменатели и объедините или оптимизируйте запросы.

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

5) GZip - настройте свой сервер для обслуживания сжатого содержимого, особенно текстовых файлов, таких как HTML, JS и CSS. Некоторые страницы могут быть сжаты до 70%, что поможет сократить общее время загрузки.

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

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

Вот пример наших оценок GTmetrix, показывающих A для PageSpeed ​​и YSlow, с очень коротким временем полной загрузки (1.8 с), небольшим общим размером страницы (693 КБ) и 22 запросами:

20170423_gtmetrix_mb1

Оценка GTmetrix - наш собственный сайт

Вот пример провайдера веб-хостинга, у которого E для PageSpeed ​​и YSlow, время полной загрузки 7 секунд, общий размер страницы 2.22 МБ и невероятное количество запросов 170.

20170422_gtmetrix_sgwebhost1

Оценка GTmetrix - крупный веб-хостинг

Вот пример агентства веб-дизайна, у которого A для PageSpeed, но C для YSlow, с очень медленным временем полной загрузки 23.9 с, общим размером страницы 2.66 МБ, с 52 запросами.

20170422_gtmetrix_sgwebdesign1

GTmetrix Score - агентство веб-дизайна

Прокачка CDN

Сеть доставки контента (CDN) может добавить дополнительный импульс, даже если это не совсем необходимо, если вы выполнили качественную настройку, чтобы получить оценку A для PageSpeed. YSlow присваивает значение CDN, поэтому, если вы не запускаете CDN, ваш рейтинг YSlow уменьшится. Существуют разные CDN, и, насколько это возможно, ПОТРАТИТЕСЬ на хороший CDN, поскольку бесплатные CDN никогда не будут работать так же эффективно, как платные выделенные CDN. В мире нет бесплатного обеда.

Итак, если у вас есть веб-сайт, я предлагаю прямо сейчас протестировать его на GTmetrix и Google Chrome и понять, что можно улучшить. Если результаты ужасны и тревожны, не волнуйтесь, так как на вашем сервере есть проверенные методы, позволяющие все исправить. Это будет непростая прогулка по парку, но она того стоит, так как вы повысите свои баллы и уменьшите штрафы за SEO. А если у вас еще нет веб-сайта и вы разговариваете с потенциальными веб-дизайнерами и агентствами, протестируйте их собственные веб-сайты с помощью GTmetrix и Google Chrome. Затем найдите подходящих людей, которые помогут вам двигаться вперед.