Установка MODX Revolution

В данном уроке читателей ждет полное пошаговое руководство по установке MODX Revolution редакции Traditional. Иллюстрации к статье прилагаются.

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

1. Операционная система: Ubuntu 12.04 LTS — одна из многочисленных вариаций Linux.
2. Сборка веб-сервера: XAMPP for Linux 1.8.1 — просто у меня нет на текущий момент потребности устанавливать все компоненты типа Apache или PHP по отдельности, что называется «ручками».
3. MODX Revolution 2.2.5-pl. Traditional.

После распаковки архива с дистрибутивом системы в /opt/lampp/htdocs я переименовал образовавшуюся папку в удобную мне аббвеатуру mr. После меняю права, чтобы движок смог свои дела спокойно сделать:

Далее делаю следующее:

1. Открываю Google Chrome и пишу в адресной строке: http://127.0.0.1/mr/setup. Там находятся скрипты инсталлятора. Если вы наберете просто корневую директорию сайта, то получите красный «Error 503″.
2. Выбираю в выпадающем списке русский язык — ru. Пробегаю «Добро пожаловать».

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

Подведем итоги урока. Поздравляю, вы только, что установили MODX Revolution:

Установка MODx Revolution на хостинг (инструкция в картинках)

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

Секретов и сложностей в установке modx на виртуальный хостинг нет – она, как и все современные CMS. старается быть понятной пользователю. Но, для наглядности ниже представлен весь процесс: от заливки файлов на хостинг, до редактирования главной страницы в админ-панели.

Скачайте архив с официального сайта. Существует 2 версии: traditional и advanced. Первая – для обычной установки, как у любого другого движка, поэтому рекомендую именно её.

В архиве будет одноимённая папка, а уже в ней – то, что надо залить на хостинг. Извлеките её содержимое на жёсткий диск.

Для установки используем FileZilla – программу для работы с файлами на хостинге.

Установите и запустите программу. Сразу появится окно менеджера сайтов, в котором нужно создать подключение к хостингу.

Укажите свои данные. Имя сервера, логин и пароль (для их ввода в FileZilla выберите тип входа «Нормальный») от FTP хостер, как правило, высылает в письме после регистрации.

Нажмите «Соединиться», после чего увидите список директорий вашего хостинга. Зайдите в корневую папку сайта (/www/, /public_html/ или /home/).

Перетащите в неё все распакованные из архива файлы движка и дождитесь их полной загрузки.

Перейдите по адресу http://вашсайт/setup/

При наличии ошибок, связанных с папкой /core/, проверьте права на эту папку и на следующие внутри неё: /packages, /cache, /import, /export. Права должны быть 700, 755 или 777 (последнее – только на время установки, потом верните 755).

Смена прав доступа происходит в FileZilla: для этого нажмите на нужном файле/папке правой кнопкой мыши и выберите «Права доступа».

Первый экран – выбор языка установки. Ставим «ru» и жмём «Select».

Далее – почти всё оставляем по умолчанию, только права, назначаемые новому каталогу ставим 0755. Далее.

Вводим настройки БД. Имя пользователя, имя базы и пароль от неё вы можете найти или самостоятельно создать в панели управления хостингом. Всё остальное – как есть. По нажатии на ссылку «Проверить соединение» система попытается подключиться к БД с указанными вами данными и если всё хорошо, перейдёт к следующему этапу – выбору кодировки базы.

Здесь тоже оставляем всё в формате utf8, после чего нажимаем на «Попытку создания или выборки».

Последнее, что остаётся сделать перед установкой – это создать профиль администратора, указав логин, пароль и e-mail. Жмём «Далее».

На новой странице система выведет список проверок и их результат. Все тесты делятся на 2 типа:

• Проверка прав на папки и файлы (существование каталога и возможность записи в него)

Если с какой-то из директорий возникла проблема – вернитесь в FileZilla, пройдите по указанному в тесте пути и выставьте на папку или файл нужные права (755)

• Проверка настроек хостинга

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

Когда все пункты проверки будут отмечены зелёным, нажимаем «Установить».

При успешной установке можно нажать «Далее», а если система сообщает об ошибке, то щёлкните «Показать предупреждения».

Следующий шаг – ссылка для входа в админ-панель и пункт, который удалит папку /setup из корня сайта – это убережёт от случайной или преднамеренной переустановки. Выберите его и нажмите «Вход».

Готово! MODX установлена.

Если пользуетесь ей впервые, то не пугайтесь, когда, перейдя на главную сайта вы увидите лишь пустую страницу.

В админке есть вкладка «Ресурсы» (созданные страницы сайта), среди которых есть пока только «Главная». Откройте её, напишите что-то в поле «Содержимое» и сохраните. Если обнаружите написанное на сайте – значит, всё работает, а дальнейшее содержание и облик сайта – целиком и полностью на вас. За внешний вид отвечает раздел «Элементы» > Шаблоны.

Установка MODX проста и по времени сравнима с другими CMS. Единственное, чем она может смутить нового пользователя – это системой шаблонов, с которой вас после инсталляции оставляют один на один, «вручив» лишь всплывающее окно со справкой на английском языке. Но разобравшись с основами, движок становится довольно удобным.

ModX Revolution

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

Официальный сайт системы - modx.com. Официальная документация на английском Home. На странице документации есть одна важнае ссылка, которая ведёт к дополнениям ModX - ADDON. здесь вы найдётё объяснения по всем официально поддерживаемым расширениям ModX, - система регистрации пользователей (Login), галерей «EvoGallery», файловый менеджер «FileLister» и т.д.

Этот раздел для меня является основным в разработках, из него я беру около 70% информации нужной для разработки, - не просто для вставки модулей, а именно для разработок.

Итак, давайте осветим все дополнения modX вкратце, на их основе у Вас возникнут первые представления о ModX, и Вы не будете часами искать нужную информацию в поисковиках.

Дополнение ModX Revolution

Описание дополнения ModX

Дополнение для работы с архивами, необходим для вывода статей по определенным датам в стиле WordPress

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

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

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

форум на jQuery, имеет не стабильную версию и не рекомендован к использованию

модуль для создания подписок в формате CSV

парсер для создания гибких форм с целью отправки через email c каптчей и проверкой полей формы

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

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

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

ещё одна галерея изображений

менеджер для поиска файлов, отображающий их в древовидном порядке, загрузить можно через админ панель, в разделе "Система" - "Упарвление пакетами"

менеджер управления RSS лентами.

модуль вывода ресурсов с постраничной навигацией.

модуль вывода ресурсов через TV (tamplate variable), элементов страниц, полей, например заголовков страницы

модуль создания карты сайта для google

незаменимый модуль регистрации пользователей их учёта, удаления, с защитой от спама и проверкой через почту

ещё одна галерея

модуль для защиты отдельных директорий

модуль для выплывающих подсказок

модуль для создания новых модулей

модуль изменяющий некоторые параметры страниц для их корректного отображения на мобильных устройствах

модуль для создания групп пользователей и работы с их отображением на всех страницах сайта

модуль для создания голосований на любых страницах сайта

хорошая система комментариев дл сайта, система встраивается в админку

хорошая система антиспама

система перенаправления при ошибках 404 и 301

система быстрого доступа к базе данных mysql

модуль создающий систему якорей на страницах сайта

простая система поиска, лучше использовать AjaxSearch, так как в последней поиск осуществляется не только по содержимому но и по другим параметрам

удобная система для создания навигации по сайту, либо вывода отдельных TV

удобный редактор статей, поддерживающий проверку орфографии

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

Данный перечень говорит о серьёзности CMS ModX, но не только дополнения делают modx популярным сегодня, прежде всего простота изменения шаблонов их безграничное множество и удобная система администрирования. В этой статье я не буду рассказывать о примерах разработок с modx, остановимся только на обзоре возможностей.

• Linux x86, x86-64
• Mac OS X
• Windows XP, Server

• Apache 1.3.x - 2.2.x
• IIS 6.0
• lighttpd (Setup and Friendly URL Guide)
• Zeus

• 5.1.1 и выше (включая 5.1.6 и 5.2.0)
• Требуемые расширения:
  • zlib
  • JSON (или PECL библиотека)
  • mod_rewrite (для создания дружественных URL адресов и .htaccess)
  • GD (для каптчи)
  • PDO для работы с pdo_mysql (для xPDO)
  • ImageMagick (для галерей)
  • SimpleXML
• safe_mode off
• register_globals off
• magic_quotes_gpc off
• PHP директивы memory_limit - 24MB или более

Браузеры для нормальной работы в админ панели

• Mozilla Firefox 3.0 +
• Apple Safari 3.1.2 +
• Microsoft Internet Explorer 8 +

Если Вам эти требования подходят загрузите ModX с официального сайта modx.com/download/ - и начинайте установку разархивировав и запустив "setup/".

"I get a blank white screen instead of the options page!". Она означет - что файл config.inc.php не пуст или нет прав на его запись.

"I clicked install and got a blank white screen!". Необходимо чтобы параметр "memory_limit" был не менее 32 mb. Для слабых серверов необходимо 64 mb.

"I can't login to the manager after installing!". Укажите в файле htaccess следующий код:

Далее Вы автоматически будете перенаправлены в админ панель, если язык не русский измените "Система" - "Настройка Системы" - "Язык", - третья страница. Советую начать с изучения дерева ресурсов и с настроек ModX, в разделе "Система" - "Настройка Системы". Создайте вашу первую страницу. Только не забудьте отметить "Опубликован".

Три основные вкладки админ панели ModX:

рис. 1, рис. 2, рис. 3

Сниппеты - php код для вставки в ваши шаблоны, в этой статье я не буду рассказывать о вставке сниппетов, отмечу лишь, чтоб Вы знали, что сниппеты всегда должны завершаться через return если вы хотите что - либо вывести на страницу, будь то данные из таблицы или переменные POST запроса.

Файлы – всё, что содержится в корневом каталоге вашего сайта, на этой вкладке содержится мини мэнеджер файловой системы, более подробный мэнеджер файловой системы (FileLister) нужно загружать через раздел "Управлением пакетами".

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

Ещё, что мне нравится в ModX, так это оперативная информация на основной странице админ панели ModX. Информация о всех обновления новых модулях и багах будет всегда появляется здесь!

Для разработчиков Modx представляет возможность модификации даже администраторского раздела(добавления новых разделов в админку), что очень мне нравится, по сравнению с другими CMS.

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

В общем, можно создавать быстро и качественно хорошие сайты. В следующей статье я расскажу как внести изменения в некоторые сниппеты, вставить любую каптчу, - на Ваш вкус, интегрировать API ModX во внешние PHP скрипты, получить доступ к сессионными данным и многое другое!

Инструкция по созданию сайта на MODX Evolution - Урок 1

Эта статья является первой в одном из трех, запланированных мной, циклов статей о системе MODX Evolution. В этом цикле я постараюсь подробно описать все нюансы по созданию сайта визитки на CMS MODX Evolution .

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

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

Перед тем как переходить к разработке сайта, необходимо подготовить инструментарий. Для этого нам в первую очередь надо обзавестись последней версией CMS/CMF MODX Evolution. для этого заходим на официальный сайт - modx.com и переходим в раздел Software -> MODX Evolution и скачиваем последнюю версию. на момент написания статьи последней версией MODX Evolution. была 1.0.6.

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

Примечание: многие из вас наверняка заметят, что для скачивания, также доступна версия 2.Х.Х. Но не торопитесь скачивать и начинать с ней работу. Версия 2.Х.Х. является последней версией другой ветки системы управления, а именно MODX Revolution. Начинать знакомство с MODX, я рекомендую именно с MODX Evolution, т.к. по моему, она более проста в освоении и более подходит для реализации сайтов-визиток. К тому же навыки и знания полученные при работе с MODX Evolution вам пригодятся для более быстрого понимания работы с MODX Revolution. Тем не менее, если вам не терпится начать работу именно с MODX Revolution, следите за соответствующим разделом моего блога, в ближайшее время там будет размещен аналогичный цикл статей.

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

Как только вы справитесь с установкой локального сервера, переходите к следующему уроку, в котором будет подробно рассмотрена установка MODX на сервер.

Вы можете также посмотреть другие уроки по созданию сайта на MODX Evolution:

Урок 2

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

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

Первое, что нужно сделать, это избавиться от ошибки настройки системы «Каталог ядра в открытом доступе », если такое сообщение появляется. Исправляем согласно инструкции сообщения, то есть переименовываем файл ht.access. расположенный в папке core. дав ему название .htaccess .

Сделать это можно либо через FTP-клиент, либо через файловый менеджер панели управления хостинга, либо с помощью файл-менеджера административной части MODX (вкладка «Файлы » в левой части окна).

Если вы переместили папку core за корневую директорию, установив MODX при помощи расширенного пакета, третий способ вам не поможет.

Обновив окно, убедитесь, что сообщение пропало.

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

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

Значок «+» в левой части названия настройки откроет подсказку о том, для чего данный пункт предназначен. А в поле «Значение» меняются сами параметры каждой настройки. Их, в зависимости от типа настройки, вводят или вручную, или выбирают из списка.

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

Раздел «Система и сервер»

• Отображение RSS-канала «Новости MODX»: отключаем (Нет)
• Отображение RSS-канала «Уведомления безопасности MODX»: отключаем (Нет)

Раздел «Панель управления»

• Показывать текст подсказки рядом с полем. описание пунктов меню, полезно только при знакомстве с системой, в дальнейшем можно отключать, варианты Да /Нет
• Формат даты в панели управления. можно сменить на наш, родной, d-m-Y
• Первый день недели. ставим 1. мы же не Стругацкие

Раздел «Дружественные URL» – режим ЧПУ

• Транслитерация псевдонимов: russian (для включения транслитерации дополнительно требуется установить дополнение translit )
• Суффикс контейнера: Очищаем
• Использовать дружественные URL: Да
• Строгий режим дружественных URL: Да
• Проверять на дублирование URI во всех контекстах: Да

Включив на сайте ЧПУ (режим дружественныу URL), переименуйте дополнительно ht.access в корне сайта в .htaccess, иначе при попытке перехода на страницы, отличные от главной, получите ошибку 404.

Можно дополнительно посетить раздел «Типы содержимого » (пункт меню «Содержимое ») и очистить поле «Расширение файла » в параметре HTML. Теперь адрес страниц станет без расширения, то есть http://адрес_Сайта/about вместо http://адрес_Сайта/about.html .

На этом первоначальную настройку можно считать завершенной. Далее идет установка из репозиториев самых необходимых для плодотворной и удобной разработки дополнений MODX Revo.

Админка MODX Revo

Так как все сайты в нашей веб-студии "Promote" созданы на движке MODX Revo, то мы решили, что небольшая инструкция пользователя будет полезна тем, кто работает или думает о работе с этой системой.

Самое первое и главное - это вход в админку . Для того чтобы зайти в админку в системе MODX Revo необходимо к адресу сайта в адресной строке добавить /manager/ (пример: site.ru/manager ). При этом откроется окно для ввода имя пользователя и пароля. Заполнив их, нажимаем "Войти ".

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

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

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

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

В ней вы можете производить любые изменения, не забудьте после этого нажать "Сохранить ".

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

Чтобы создать новый документ в соответствующем разделе нужно нажать правой кнопкой на родительском документе и создать "дочерний документ ".

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

Если вы создали лишний документ, то его можно легко удалить, нажав опять же правую кнопку на документе и выбрав пункт "Удалить". Этот документ останется в системе Modx Revo, но перемещен в корзину. Для того чтобы удалить его окончательно нужно просто "Очистить корзину".

MODX Revolution Уроки Руководство по оптимизации сайта и производительности

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

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

• поиск DNS
• SSL связь (если применимо)
• HTTP ответ
• поиск DOM
• HTML отрисовка
• CSS отрисовка
• События JavaScript

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

Конечно да! Когда сайт загружается 5 секунд, то это очень раздражает. Создатели крупных торговых площадок борятся за миллисекунды, которые выражаются в потерях миллионов покупателей и долларов. Если ваш сайт загружается больше 5 секунд, то больше половины пользователей просто закроют его, не дожидаясь конца загрузки.
Давайте разберёмся, что можно и нужно делать для повышения производительности сайта!

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

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

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

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

HTTP запросы — это словно интернет рукопожатия, они просят выдать данные и принимают их, так что чем больше запросов, тем больше времени для отрисовки страницы.

Общие советы по снижению HTTP запросов:

• Объединяйте стили и скрипты для уменьшения количества файлов
• Используйте вместо CSS изображений, когда это возможно
• Комбинируйте встроенные изображения в ваши стили, чтобы избежать увеличения размеров страниц
• Используйте кэширование браузера.

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

Поэтому перед выдачей кода полезно минифицировать HTML, CSS и JavaScript, когда это возможно.

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

В конечном счете все сводится к сокращению количества переадресаций, так что вы должны меньше активов вызывать из разных мест.

Изображения могут занимать много времени для загрузки.

Средний размер веб-страниц возрос с 702 кБайт в 2010, до 1042 кБайта в 2012 и прогнозируется в 2344 кБайта в 2015 году. И большинство от этого объёма занимает изображения.

В изображениях следует учесть их формат, так как изображения часто содержат данные, которые не используются в веб. Например, JPEG имеет Exif метаданные из камеры — дату, модель и место, всё это не используется в браузере и абсолютно бесполезно.

Наиболее распространенные форматы файлов:

• PNG (Portable Network Graphics)
• TIFF (Tagged Image File Format)
• JPEG/JFIF (Joint Photographic Experts Group File Interchange Format)
• GIF (Graphic Interchange Format)

Для большинства сайтов PNG велики, как это сжатие без потерь, формат, который используется для иллюстраций, текста, графики и логотипов. JPG не предлагают сжатие без потерь, поэтому они должны использоваться только для фотографий.

Есть 2 типа сжатия: без потерь (не ухудшение качества) и с потерями (ухудшение качества). Лучше использовать первый при сжатии изображений, но иногда из-за формата файла вы потеряете в оптимизации. Такое может произойти при JPEG, сжатие которого вызовет потери в оптимизации, так как формат не предусматривает сжатие без потерь.

Вот некоторые полезные инструменты для сжатия изображений:

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

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

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

Иконочные шрифты могут быть в любом из форматов: SVG, EPS, AI, PSD, PDF, а также CSS спрайты, однако браузеры захватывают первый формат файла и игнорируют все остальные, так что лучше выбрать один формат такой, как SVG при построении иконочного шрифта.

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

В качестве альтернативы сделать это самостоятельно, следуя этому руководству по созданию SVG иконочного шрифта .

Данные URI — это техника встраивания содержимого, например, изображений в CSS, так что они отправляются в одном запросе HTTP, а не в нескольких, например здесь:

потребуется два запроса: один для файла CSS, а другой для изображения, в то время с помощью URI метода, нужен один будет запрос:

Тем не менее, не используйте этот метод, если вы не сжимаете gzip’ом ваш HTML / CSS в HTTP, как над головой размер может быть значительно больше.

Стили — это структура любой веб-страницы, без него сайты будут как из 1990-года, поэтому разместить CSS нужно в верхней части вашего кода. Таким образом страница отображается быстро и выглядит она лучше.

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

Вы можете включать CSS или JavaScript в страницы с помощью 3 различных методов:

• Inline — в строках: CSS определяется внутри атрибута стиля и JavaScript внутри атрибута OnClick.
• Embedded — встроенный: CSS определяется внутри тега <style> и JavaScript внутри тегов <script>.
• External — внешний: CSS загружается из тегов <link> и JavaScript из атрибутов src <script> тегов.

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

Когда задана загрузка скрипта, то браузер ждёт, пока скрипт полностью не загрузится, парсится и выполняется, перед рендерингом и всё это время пользователь ждёт.

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

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

Это порождает множество запросов HTTP для каждого файла стилей. Для уменьшения количества запросов нужно объединить все стили в один CSS файл.

Этот процесс можно автоматизировать с помощью системы сборки.

Фронтэнд система сборки — это способ автоматизации задач, таких как минификация файлов, оптимизация изображений, компиляция CSS и объединения кода в один файл.

Есть много автоматизированных инструментов, которые можно использовать:

• Gulp. Потоковая система сборки
• Grunt. Система сборки построенная на задачах
• Bower. Управление фронтэнд пакетами
• Yeoman. Клиентский стек

Вы можете подключать внешние стили двумя способами, используя тег <link>:

или директиву @import:

@import не позволяет браузеру загрузить активы в то же время, так что лучше использовать <link>.

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

Однако браузерам всё равно, поэтому нужно сжать код для уменьшения размера файла.

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

результат будет выглядеть так:

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

Перерисовка и перекомпоновка осуществляются при внесении изменений в DOM, заставляя его рендерится повторно, например, при изменении элемента происходит перерисовка и при изменении макета страницы запускается перекомпоновка.

Установка толщины к стилю, как style.width. будет заставить браузер думать что в макет будет внесены изменения и в конечном итоге замедлить его работу. Если вам нужно внести изменения подобные этому, тогда сделайте это один раз. таким образом браузеру не нужно будет перерендеривать объекты.

Когда дело доходит содержания 3-х сторон, то не всегда оно упаковано надлежащим образом, иногда оно может быть просто абы как, как результат — торможение ваших страниц или ещё хуже это содержимое хостится на серверах 3-х сторон заблокированное для соединений ваших пользователей.

Лучше всего всегда загружать содержимое 3-х сторон асинхронно, таким образом вся страница не замедлится для краулеров или не будет заблокирована.

Если у вас есть несколько сценариев, которые вы хотите нагрузку асинхронно затем использовать:

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

Давайте здесь определимся: document.write — это плохая практика! Это зависимость к странице, которая заставляет переписывать весь контент, однако она по-прежнему необходима как синхронная запаска для некоторых JavaScript файлов, поэтому по возможности постарайтесь избегать это выражение.

Например, следующий покажет «world!», а не «hello world!», так как он выполняется после того, как содержимое загружено с помощью события window.onload.

По возможности, старайтесь избегать document.write вообще, используя какой-нибудь другой метод.

CSS код — не единственный, который должен быть минимизирован, ещё у нас есть JavaScript с громоздкой структурой и комментариями, которые могут сильно раздувать размер файла, например:

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

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

Тем не менее, нас такой метод не устраивает. так как его недостатком является множество запросов HTTP для каждого файла. Вместо этого, объедините JavaScript в меньшее количество файлов, чтобы уменьшить количество запросов.

В качестве альтернативы, можно объединить их в один файл и автоматизировать этот процесс, используя систему сборки.

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

Всегда берите последнюю версию, используя:

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

Есть много разных способов, чтобы взять элемент из DOM, такие как классы, идентификаторы или использование методов, таких как find() и children(), однако наиболее эффективный способ — это использовать селекторы, так как он основан на нативной DOM операции:

Когда дело доходит до DOM всегда пытайтесь оптимизировать захват данных, так как «ныряние» в DOM каждый раз отнимает много времени.

JQuery это библиотека JavaScript, предназначенная для упрощения кодирования сценариев на стороне клиента в HTML, но за всё нужно платить. Библиотеки, как правило, работают медленнее, так как они работают вместе с программой, а родной JavaScript обычно быстрее, чем JQuery, поэтому вместо того, чтобы использовать что-то вроде jQuery.each, нужно использовать родной метод JavaScript для цикла:

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

Производительность веб-страниц Chrome расширения для веб-разработчика…