Скорость и производительность сайтов очень важна для пользователей. Если сайт клиента будет слишком медленным, то он будет не только терять посетителей, но также и потенциальных клиентов. Поисковые системы такие как Google, учитывают скорость веб-сайта в рейтинге поиска, поэтому, оптимизируя скорость сайта, необходимо принимать во внимание все. Учитывается каждая миллисекунда. Эта статья рассматривает оптимизацию приложения начиная с первого http-запроса и заканчивая рендерингом страницы браузером.
Разделы статьи:
- Выбирайте качественный хостинг
- Старайтесь избегать переадресаций
- Оптимизируйте PHP-код
- Оптимизируйте базу данных и запросы
- Используйте кэширующие системы
- Используйте акселераторы
- Используйте Keep-Alive
- Включите Gzip сжатие
- Встройте небольшие CSS и JS ресурсы в страницу
- Сократите JS и CSS код
- Размещайте CSS в начале, а JS в конце
- Используйте CDN
- Объедините изображения в CSS — спрайты
- Используйте кэш браузера
- Отключите отправку cookies файлам
- Оптимизируйте фон страницы
- Укажите размеры изображений
- Оптимизируйте изображения
- Используйте паттерн LazyLoad для изображений и комментариев
Выбирайте качественный хостинг
Выбирайте хостинг-провайдера и DNS-провайдера с наименьшим временем отклика (response time) для аудитории вашего сайта. Если это интернет-магазин, который работает в пределах города, старайтесь выбирать провайдеров географически близких к аудитории сайта. Не забывайте про хороший показатель аптайма и качество технической поддержки хостинг-провайдера.
Старайтесь избегать переадресаций
Переадресации осуществляются через использование 301 и 302 кодов HTTP-статуса. Каждая переадресация это повторный запрос к серверу, зачем два, когда можно один.
Оптимизируйте PHP-код
Медленный код оправдывает себя только в тех случаях, когда он редко используется. Для поиска медленно выполняющихся участков кода используйте PHP профайлер. Наиболее популярные профайлеры для PHP кода:
Так же приведу пару постов об оптимизации PHP кода:
Оптимизируйте базу данных и запросы
Используйте кэширующие системы
В архитектуре ЭВМ доступ к оперативной памяти осуществляется существенно быстрее, чем к жесткому диску или иному типу накопителя. Если данные будут сохраняться в кэше, а кэш храниться в оперативной памяти это значительно ускорит обработку сайта. Для хранения данных в оперативной памяти на серверах обычно используют memcache(d)/redis сервер, он реализует сервис кэширования данных в оперативной памяти.
Для установки таких сервисов всегда необходим полный доступ к серверу, который имеет администратор. Обычно хостинг-провайдер предлагает услуги подключения модулей за определенную плату.
Используйте акселераторы
Прежде всего, PHP это интерпретируемый язык программирования. Как выглядит обработка сценария на PHP обычным интерпретатором
- Чтение файла
- Генерация байткода
- Выполнение кода
- Выдача результата
При этом процесс генерации байткода выполняется каждый раз и отнимает большую часть времени обработки сценария. Акселераторы позволяют сохранять уже генерированный байткод, чтобы при последующей обработке PHP — сценария пропустить шаг 1 и 2. Это позволяет существенно ускорить обработку сценариев.
Приведу семь наиболее известных акселераторов
- Alternative PHP Cache
- eAccelerator
- PhpExpress
- XCache
- Windows Cache Extension for PHP
- Zend OPcache
- ionCube PHP Accelerator
- OpCache
Используйте Keep-Alive
При запросе к серверу открывается соединение, браузер получает данные и соединение закрывается. Браузер обрабатывает полученные данные и видит, что ему нужно скачать еще кучу CSS, JavaScript файлов. Он опять открывает соединение и…. Keep-Alive позволяет не закрывать предыдущее соединение и получать все данные в одном, не тратя при этом время на установку и закрытие соединения. Он так же включается администратором сервера. Для его включения на сервере Apache необходимо в конфигурационном файле httpd.conf добавить строку:
|
1 |
KeepAlive "on" |
Включите Gzip сжатие
Сжатие интернет трафика так же позволяет сократить время на передачу информации. Как это работает? После обработки запрошенных у сервера данных он их сжимает утилитой Gzip и отправляет клиенту (браузеру). Браузер после получения распаковывает и обрабатывает. Причем сжатие происходит только для текстовых файлов. Выигрыш при этом происходит за счет времени передачи данных. Для включения сжатия необходимо в файле .htaccess добавить:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE text/html text/xml image/x-icon text/css text/javascript application/javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch Konqueror no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* |
Не рекомендую включать Gzip, если большая часть сжимаемых файлов имеет маленький размер. Преимущество будет не особо ощутимо, больше времени уйдет на сжатие/распаковку.
Встройте небольшие CSS и JS ресурсы в страницу
Если CSS или JS код мал, его проще поместить в head сайта, нежели создавать отдельный файл, который браузер будет скачивать.
Сократите JS и CSS код
По завершении работы над проектом желательно уменьшить размер JS и CSS файлов, убрав из них лишние пробелы, табуляции и переносы. Это можно сделать с помощью онлайн-сервиса Online JavaScript/CSS Compression. Либо можно использовать автоматические упаковщики CSS/JS кода.
Размещайте CSS в начале, а JS в конце
Размещайте CSS-файлы в head документа, а JS в конце body. Тем самым вы дадите браузеру сначала загрузить стили, показать пользователю страницу, а только потом выполнить JS-скрипты.
Используйте CDN
Сервер и браузер ограничивают количество соединений друг с другом. Количество соединений с одним доменом колеблется от 4 до 16 в зависимости от браузера. Как следствие мы имеем кучу файлов стоящих в очереди на загрузку. Это могут быть js, css файлы, картинки, шрифты и т.д. Чтобы свести очередь к минимуму достаточно хранить файлы, загружаемые браузером на других доменах. Для этого существуют CDN сервера, которые хранят ваши данные. Допустим, при запросе картинки, CDN выберет географически ближайший к вам сервер с этой картинкой и отправит её, что позволит избежать большого количества хопов (транзитный участок сети).
Компания Google предоставляет бесплатный CDN для популярных JavaScript библиотек, таких как JQuery, Mootools, AngularJS, Prototype и др.
Объедините изображения в CSS — спрайты
Объединение маленьких изображений, иконок в CSS — спрайты, которые используются на каждой странице позволит сократить количество обращений к серверу, уменьшить очередь загрузки. Такой прием клиентской оптимизации используют такие гиганты как:
Используйте кэш браузера
Для того, чтобы не загружать один и тот же файл два раза в браузере встроен механизм кэширования. Как работает механизм кеширования браузера? Пользователь получил данные страницы сайта. Браузер составил список css, js файлов, которые ему нужно загрузить. Потом он их загружает. Пользователь переходит по ссылке на следующую страницу, браузер опять составляет список файлов, которые нужно загрузить и опять загружает их с сервера. Почему он из не сохранил на диске? Потому, что ему нужно указать, какие файлы можно сохранять и срок кэширования (дата, по истечении которой файлы будут удалены с жесткого диска). Эти данные сервер отправляет вместе с файлами.
Чтобы указать браузеру какие именно файлы можно кэшировать необходимо указать в файле .htaccess следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#определим MIME типы, которые надо кэшировать и срок истечения ExpiresActive On ExpiresDefault text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" #Браузеры семейства MSIE неправильно обрабатывают заголовок Vary и #отключают кеширование содержимого для этого следующие строки BrowserMatch “MSIE” force-no-vary BrowserMatch “Mozilla/4.[0-9]{2}” force-no-vary |
Отключите отправку cookies файлам
При запросе файлов браузер отправляет серверу cookies, он отправляет их картинкам, файлам стилей и т.д. Зачем cookies картинке? Необходимо отключить отправку cookies файлам. И снова в файле .htaccess:
|
1 2 3 4 |
SetEnvIf Mime text/javascript unset-cookie SetEnvIf Mime text/x-javascript unset-cookie SetEnvIf Mime text/css unset-cookie SetEnvIf Mime image/.* unset-cookie |
По этой же причине оправдано использование CDN, так как cookies доступны только для одного домена.
Оптимизируйте фон страницы
Для фона рекомендую использовать сплошной цвет или же текстуру, которая будет повторяться. На отображение сплошного цвета уходит меньше времени и памяти. Повторяющаяся текстура имеет меньший размер, нежели картинка. Так же часто на страницы с большим фоновым изображением ругаются антивирусы, они реагируют на нагрузку, которую создает вкладка с открытым сайтом. Еще можно использовать изображения построенные по принципу цикады. Хотя это частично оправдывает идеи статьи.
Если же вы используйте в качестве фона изображения, то постарайтесь оптимизировать отображение сайта при разных разрешениях экрана. Например, сайт интернет-магазина wildberries использует боковые изображения и показывает их в любом случае, даже если разрешение у пользователя 1024×768 при котором их и без того видно не будет. Решение на CSS:
|
1 2 3 4 5 6 |
@media screen and (max-width:1190px){ /* Если ширина рабочей области экрана меньше 1190px убираем фон */ .left_right_imgs{ background: none !important; } } |
Приведу так же несколько полезных ссылок:
- Ava7Patterns(Набор текстур)
- Patternify (рисование текстур онлайн)
- Тайлинг (создание текстур в photoshop)
- Subtle Patterns (Набор текстур)
- The Cicada Project Gallery (Галерея фонов, построенных по принципу цикады)
- Noise Texture Generator (генератор noise background)
Укажите размеры изображений
При прорисовке страницы браузер получает html код страницы, потом загружает каскадные таблицы стилей (CSS) и производит расчет размеров элементов и отрисовку. Параллельно загружаются изображения и другие файлы. Когда браузер завершает загрузку изображения (img src), а станица уже прорисовалась, он вычисляет размер загруженного изображения и производит перерасчет положения элементов страницы, перерисовывается и наблюдается дерганье.
Чтобы этого избежать, необходимо заранее указать ширину и высоту изображения в теге img, это позволит браузеру правильно расположить элементы страницы, не производя перерасчет.
Этот пункт не относится к некоторым изображениям, если сайт является адаптивным.
Оптимизируйте изображения
Для уменьшения объема загружаемых файлов можно уменьшить размер изображения. На Хабре есть перевод статьи Джейкоба Гьюба «8+ превосходных инструментов для оптимизации изображений». В этой статье рассматриваются сервисы, которые позволяют оптимизировать изображения без потерь в качестве.
Так же было очень интересно наблюдать, как изображения загружаются постепенно. Т.е. Загружается изображение в очень плохом качестве, где едва можно различить какие-то элементы и пока идет его загрузка, оно становится четче. Этого эффекта можно добится с использованием Photoshop, откройте изображение и выберите «Файл->Сохранить для веб…» или сочетанием клавиш «Alt+Shift+Ctrl+S». Это очень старый формат изображений для Web, сейчас им мало кто пользуется, но 5-10 лет назад была популярна т.к. инет у большинства был медленный, технология позволяла загружать и показывать изображения постепенно, но существенно увеличивала размер файла.
Серверные пакеты для оптимизации изображений, которые одобряет PageSpeed:
- mozjpeg
- optipng
Так же рекомендую FileOptimizer, который поможет оптимизировать огромное количество типов файлов на вашемкомпьютере.
Используйте паттерн LazyLoad для изображений и комментариев
Паттерн Lazy Load подразумевает отказ от загрузки дополнительных данных, когда в этом нет необходимости. Вместо этого ставится маркер о том, что данные не загружены и их надо загрузить в случае, если они понадобятся. Его можно применить к чему угодно. Например, для изображений.
Браузер по умолчанию загружает все изображения, которые находятся на странице. А что если их много, как, например, в интернет-магазинах или фото-блоге? Зачем загружать все, когда можно загружать только те, которые видит пользователь. Остальные будут загружаться по мере прокрутки страницы. Это позволит снизить время загрузки страницы и нагрузку на сервер. Для этого существует JavaScript плагин (расширение) LazyLoad.