Доход с нуля
Все что относится к интернету.

Ускорение работы форума | сайта

Сообщение Slash » более года назад 27 окт 2017, 07:45

Доброго времени суток!
На форуме есть тема "Обмен сообщениями на форумах", куда я зашел, чтобы найти, какой нибудь форум для обмена постами, стал просматривать предлагаемые форумы. Перехожу на один форум, который очень долго грузился (не буду говорить, что это был за форум). Я прождал ~7 секунд, прежде, чем появились детали страницы, на полную загрузку страницы ушло ~15 секунд.
Этот форум подарил мне идею написать этот пост.



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

И так, что же надо делать, чтобы ускорить работу?
У Google есть замечательный сервис: PageSpeed Insights, уверен, вы им не однократно пользовались, ну или хотя бы слышали про него. Вот он та нам и поможет. Данный сервис дает полезные советы, о том, что можно сделать, чтобы немного ускорить работу сайта.

Что может посоветовать PageSpeed Insights?
- Удалить блокирующий код.
- Сжать CSS и JS.
- Сократить HTML.
- Оптимизировать картинки.
- Использовать кеш браузера.
- Сократить время ответа.
И так далее.
Беда в том, что не все понимают, как правильно сделать, то, что порекомендовал PageSpeed Insights. Немного растолкую.
Совет: Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы - означает, что в "голове" страницы имеются подключенные .css или .js файла, они блокируют, то есть загрузка самой страницы, как бы останавливается до того момента, как будет полностью загружен подключаемый файл, после чего продолжается загрузка страницы. Разумеется, если есть возможность перенести подключаемые файлы, то перенесите их вниз, до тега </body>. Тут получится так (с переносом .css файлов): сначала загрузится "бесформенная" страница, а как будет загружен файл стиля, страница станет такой, как ее клепали разработчики. То есть пользователь будет наблюдать своего рода превращение из "не понять чего" в "вау!". Хочу сказать, что такое превращение для кого то может быть неудобным. Допустим, у меня на сайте блочная верстка, ширина блоков прописана в .css файле, в одном из блоков находит адаптивная реклама (размеры рекламного блока подбираются по размеру блока, в котором находится). Если реклама будет загружена прежде, чем размеры "носителя" это рекламы, то получится, что рекламный блок выходит за границу всех блоков.

Совет: Используйте кеш браузера. Загрузка страницы, обычно не ограничивается одним HTML, к самой странице подключаются разные файлы, картинки, шрифты, файлы стиля, JavaScript и другое. К некоторой части из этого списка и рекомендует Google использовать кеш. Сделать это можно при помощи файла ".htaccess", что находится в корне сайта, прописав туда необходимые команды и время хранения.

Продолжение следует
Аватара пользователя
Slash
Эксперт
 
Сооб­щения: 501

Сообщение Slash » более года назад 29 окт 2017, 11:28

Продолжаем!

PageSpeed Insights может порекомендовать сжать JS и CSS файлы, и покажет на сколько процентов после сжатия файлы станут меньше весить. Что значит сжать? -> В js и css код написан с табуляцией, пробелами, комментариями и переносами на новую строку. Пример:
Код: Выделить всё
/* Закругленный углы */
.div_radius_1 span {
    border-radius: 1px;
}

.
div_radius_2 span {
    border-radius: 2px;
}

Разумеется все выше перечисленное (табуляция, пробелы, переносы и комментарии) имеют свой вес и добавляют его к общему весу файла. При правильном удалении лишних "добавок веса" код не потеряет свою работоспособность, а файл станет на какой то процент легче.
Пример вышепредставленного кода после сжатия:
Код: Выделить всё
.div_radius_1 span{border-radius:1px;}.div_radius_2 span{border-radius:2px;} 

Код сжат, теперь Google промолчит об сжатии.

В сжатом файле не удобно редактировать код. Тут могу порекомендовать "допилить" сценарий, который будет автоматически создавать сжатые копии необходимых файлов перед отправкой их клиенту. Лучше будет хранить сжатые копии в кеше, чтобы не пришлось создавать новый файл, каждый раз. Еще лучше сливать все имеющиеся css файлы в один файл, то же самое и с js.
Аватара пользователя
Slash
Эксперт
 
Сооб­щения: 501

Сообщение Slash » более года назад 01 ноя 2017, 16:41

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

Не редкий случай, когда время ответа сервера затянуто из за сценария движка, код написан таким образом, что на его обработку уходит много времени. Например, я недавно "разбирал" один движок, где логика напрочь отсутствует. В коде понаписано очень много пользовательских функций, которые не используются вообще ни где (видимо, с упором на будущее). К онлайн чату (отдельная страница) подключаются файлы отвечающие за добавление статей на блог, по идеи, которые вообще не нужны для работы чата. На весь сайт один языковой файл, на мой взгляд будет правильнее разбить один файл на несколько, для каждого модуля свое (чат, блог, форум и так далее), что я и делал, а так же убирал функции, которые не используются. Это помогло немного ускорить ответ сервера. Пересмотрите свой код, возможно, тоже найдете, то, что просто "занимает место". Включите отображение ошибок, сценарий выведит на экран все ошибки, если таковые имеются. Наличие ошибок в коде, разумеется тормозит выполнение сценария.
Аватара пользователя
Slash
Эксперт
 
Сооб­щения: 501

Сообщение Slash » более года назад 06 ноя 2017, 06:35

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

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

Если сайт предусматривает загрузку новых фотографий / картинок, то ручное сжатие будет неудобным. Представьте, ежедневное посещение сайта от 5000 человек, из этого количества, около 3000 загрузит по одной - три фотографии. Уйдет неделя, чтобы сжать все фотографии загруженные за одни сутки. Тут сжимать фотографии следует программно, автоматически, сразу после загрузки файла на сервер.
Я писал php сценарий для сжатия картинок. Сценарий сжимает картинку по указанным ему параметрам, желаемого качества. Так же сценарий убирает метаданные изображения, которые тоже имеют вес. Скрипт работает отлично, правда есть недостаток, сценарий работает только с jpg / jpeg форматом, если формат другой, то переделает его в jpg. Возможно в скором будущем допишу код для остальных расширений и представлю, если кому то понадобиться.
Аватара пользователя
Slash
Эксперт
 
Сооб­щения: 501

на главнуюна главную



cron
Вверх Вниз