Так или иначе, но создание сайта (как и другого программного продукта) - это процесс, выполняемый людьми, а люди ошибаются и не могут предвидеть всё. Поэтому достаточно часто клиенты обращаются с задачами по исправлению ошибок сайта. Давайте рассмотрим наиболее часто встречающиеся проблемы и способы их решения.
Низкая скорость загрузки
Данная проблема очень распространена. Чаще всего данная проблема становится актуальной, когда дело доходит до продвижения сайта. После технического аудита сео-специалистами даются рекомендации относительно скорости загрузки сайта согласно результатам теста GooglePageSpeed. Рассмотрим некоторые из них.Не оптимизированы картинки
Существуют различные форматы картинок, загружаемых на сайт. PNG - один из самых "тяжеловесных" форматов, при этом поддерживает высокое качество фотографий и прозрачность. JPG - картинки данного формата не поддерживают прозрачность, но размер их существенно меньше PNG (приблизительно в 4 раза). GIF - данный формат сейчас используется редко, как правило для небольших иконок с анимацией. Google в своих рекомендациях может указать, что и PNG и JPG требуют конвертации в более современные форматы.Решение
WEBP - на момент написания данной статьи один из самых современных и оптимизированных форматов. Он поддерживает прозрачность, а объем файла меньше в 2-3 раза по сравнению с JPG при том же качестве фото. А чем меньше объем загружаемых данных - тем быстрее загрузится Ваш сайт.Картинки не подходящего размера
Кроме формата используемых картинок проблема может быть еще и в их размерах в пикселях. Браузер умеет масштабировать фотографии под размер блока, если CSS-стили верные. Однако нужно понимать, что загружает браузер всё равно фотографию исходного размера. Например, контент-менеджер может вставить в превью новости фотографию 1600х1200px, в то время как сам размер данного блока будет 300х200px, загружаться будет фотография большого размера, а затем средствами браузера масштабироваться под нужные габариты.Решение
При вставке фотографий в текст статьи или новости контент-менеджеру необходимо позаботиться о размерах фотографий заранее. В случае же списка товаров, списка новостей и прочих разделах, где картинки "вынимаются" из каждого элемента отдельно и отдаются клиенту в браузер, нужно проводить работы по автоматическому подгону размера фото, а так же по конвертации в нужный формат "на лету".Не настроено сжатие и кэширование элементов
Текстовые данные HTML-страницы, скрипты JS, стили CSS могут содержать много лишних символов таких как дублирующие пробелы, табуляция, переносы строк, а так же могут содержать ненужные комментарии. Кроме того, эти файлы, а так же картинки, шрифты и другие данные, которые на сайте меняются редко, необходимо кэшировать на стороне клиента, чтобы не загружаться их снова и снова со стороны сервера.Решение
Производя нужные настройки сервера (например, прописав нужные диррективы в файле .htaccess, nginx.conf и других в зависимости от используемого на сервере ПО) можно добиться правильного кэширования файлов различных форматов, что увеличивает скорость открытия второй и последующих страниц сайта. Кроме того, с помощью специальных утилит и скриптов можно "вырезать" из HTML/JS/CSS все лишние символы, а так же заархивировать их перед отдачей в клиентский браузерСлишком долгое открытие страниц
Данная проблема часто встречается, когда разработчики сайта не позаботились об оптимизации кода и выполняется много лишних действий (подсчеты, обращения к базе данных, вложенных циклов операций), которые делать на самом деле не нужно. Эта проблема очень часто встречается в "универсальных" модулях и расширениях, где в первую очередь заботятся об их многофункциональности.Решение
К сожалению без анализа кода нельзя дать ответ, что именно "тормозит" серверную часть сайта. Я встречал различные варианты данной проблемы, каждый раз решать её приходилось по-своему. Иногда даже полностью переписывать работу какого-нибудь модуля, оставляя в нём только нужные действия и вычисления. Например, был случай с интернет-магазином, в котором бывшие разработчики прямо в коде написали комментарий о своей логике: "Сначала выберем из базы данных все товары, затем выберем все их характеристики, затем удалим те которые не соответствуют фильтру, затем разделим на блоки по 12 товаров и выведем нужный блок который выбрали при постраничной навигации". При такой организации выборки товаров даже раздел с 1 товаром тормозил, так как каждый раз обрабатывались тысячи ненужных товаров.Слишком большое количество элементов на странице.
Здесь речь идёт о количестве HTML-элементов на странице и вложенности тегов. Часто для удобства верстальщики оборачивают элементы в кучу ненужных тегов. Кроме того, избыточное количество самих данных на странице может приводить к негативным последствиям. Например, интернет-магазины любят на главную страницу сайта выводить по 50-60 товаров с метками "Хит", "Новинка", "Скидка" и прочими. Это негативно отражается на показателях GooglePageSpeed.Решение
Часто бывает так, что достаточно сократить вывод товаров с метками и количество HTML-элементов уменьшается в несколько раз. Если же клиент не согласен на такое резкое уменьшение товаров на странице, то можно сделать динамическую подгрузку новых товаров в данный блок, с очисткой скрытых элементов. Но это требует достаточной квалификации программиста, "малой кровью" здесь не обойтись. Если же проблема именно в верстке - то к сожалению без её изменений и оптимизаций не обойтись.Загрузка всего контента сразу
Здесь речь идет в первую очередь о "массивных" данных, таких как фото- и видео-файлы в "середине" странице или ближе к футеру, а так же прочих элементах, которые не видны сразу при отображении страницы (например это могут быть картинки слайдера начиная с номера 2 и дальше). Так же загрузка всех скриптов и стилей возможно не нужна при показе страницы клиенту.Решение
На помощь нам приходит технология под названием lazyload или "ленивая загрузка". Суть её в том, что все картинки, которые не видны сразу, не должны подгружаться до тех пор, пока клиент не "проскроллил" браузер до них, либо пока не дошла очередь в слайдере отображать эти элементы. Есть различные варианты решений (как готовые библиотеки, так и самописные скрипты) для внедрения данного принципа, одна без программиста может ничего не заработать (а может и заработать - тут как повезет).Что касается JS, CSS и шрифтов, то их загрузка в той или иной момент нуждается в исследовании каждого конкретного случая. К сожалению бывает так, что при переносе скриптов в футер либо при установке им параметра ASYNC / DEFER (для асинхронной загрузки либо для загрузки после контента) перестает работать какой-нибудь связанный с ними код, вызываемый раньше. Всё индивидуально и зачастую требует работы программиста.
Это не все проблемы, на которые чаще всего указывает тест Google. Однако, исправив перечисленные выше пункты можно значительно улучшить показатель данного теста и скорости загрузки сайта в целом. Однако следует понимать, что достигнув уровня 70-80% за каждый последующий процент придется немало побороться, а возможно и пожертвовать чем-то. При этом РЕАЛЬНАЯ скорость сайта может вообще никак не увеличиться, изменится лишь показатель СИНТЕТИЧЕСКОГО теста. Я советую всем искать золотую середину - достаточную производительность для роста сео, при этом адекватные затраты бюджета.
Некорректная работа сайта
Частая проблема - неправильное поведение сайта на запросы пользователя, ошибки и некорректная работа отдельных элементов. Например, это может проявляться в периодическом "падении" сайта, когда он просто перестаёт работать, зависает. Или в некорректной работе фильтра, пагинации и других элементах. Каждый случай индивидуальный и давать какие-то общие рекомендации к сожалению невозможно.Примеры шаблонов
