Использование сеток и фреймворков CSS
Для создания адаптивного и быстро загружаемого интерфейса веб-приложения используйте сетки и фреймворки CSS, такие как Bootstrap, Foundation, Skeleton, Bulma и другие․ Они позволяют создавать гибкую и оптимизированную веб-разметку, адаптированную под различные экраны устройств․
Минимизация HTTP-запросов
Сокращение количества HTTP-запросов ― это один из ключевых аспектов повышения производительности веб-приложений․ Это можно достичь путем комбинирования и минимизации файлов CSS и JavaScript, а также использованием спрайтов для объединения графических ресурсов․
Асинхронная загрузка
Используйте техники асинхронной загрузки для сторонних ресурсов, таких как скрипты и стили․ Это позволит вашему веб-приложению загружаться быстрее, не блокируя основной поток выполнения․
Кэширование
Грамотное использование кэширования поможет улучшить скорость загрузки веб-приложения для повторных посещений․ Установите правильные заголовки кэширования для статических ресурсов, чтобы клиенты могли кэшировать их локально․
Оптимизация JavaScript
Минификация и сжатие
Минификация и сжатие JavaScript-кода помогают уменьшить его объем, что ускоряет процесс загрузки веб-приложения․ Помимо этого, используйте современные JavaScript-фреймворки и библиотеки, такие как React, Angular или Vue․js, которые обеспечат оптимальную производительность․
Асинхронные запросы
Используйте технологию Ajax для выполнения асинхронных запросов к серверу․ Это позволит загружать данные и обновлять контент на странице без необходимости перезагрузки всего приложения․
Ленивая загрузка
Ленивая загрузка ресурсов, таких как изображения или компоненты интерфейса, позволяет уменьшить время инициализации приложения при первоначальной загрузке․
Таким образом, улучшение производительности веб-приложений ― это процесс, требующий внимания и определенных усилий, но результаты в виде повышенной скорости загрузки и отзывчивости веб-приложения будут весьма значимыми․
В последнее время мы много обсуждали производительность, и теперь пришло время вернуться к ней с некоторыми новыми аспектами.
Приемы, упомянутые в этой статье, не относятся к PHP, но вы можете быть уверены, что при правильном использовании они выведут ваше приложение на совершенно новый уровень. Обратите внимание, что мы не будем говорить об обычных вещах.
Тот факт, что сокращение запросов CSS, JavaScript и изображений делает страницу быстрее и намного лучше , хорошо известен. Вместо этого мы сосредотачиваемся на менее известных и менее используемых методах.
HTML
1. Удалите нерелевантные элементы
Чем меньше элементов, тем лучше. Удалите ненужный HTML-код.
Сравните:
& lt; div & gt; & lt; div & gt; & lt; p & gt; Некоторый & lt; span & gt; text & lt;/span & gt; & lt;/p & gt; & lt;/div & gt; & lt;/div & gt;
i
& lt; div & gt; & lt; p & gt; Некоторый & lt; span & gt; text & lt;/span & gt; & lt;/p & gt; & lt;/div & gt;
Конечно, это не может быть использовано во всех случаях, но общее практическое правило — структурировать свой HTML-код так, чтобы удалить как можно больше элементов DOM.
Вы также можете уменьшить размер вашего HTML-документа, опуская некоторые необязательные теги. Да, это может показаться антистандартной процедурой, поэтому лучше всего делать это только при публикации вашего кода в Интернете, чтобы вы не запутали других разработчиков, работающих с тем же кодом.
2. Предварительный выбор
Предварительный выбор — это ситуация, в которой вы заранее сообщаете браузеру, что вам понадобится конкретный ресурс. Этим ресурсом может быть IP-адрес домена (предварительная выборка DNS), статический файл, такой как изображение или файл CSS, или даже целая страница.
Если вы ожидаете, что пользователь перейдет в другой домен после посещения ваш сайт, или если вы храните свои статические файлы в субдомене, таком как images.example.com , предварительная выборка DNS помогает сэкономить несколько миллисекунд, чтобы DNS-сервер разрешил доменное имя images. example.com на IP-адрес.
Прибыль небольшая, но если вы применяете ее неоднократно, это поможет вам значительно сократить время, необходимое для загрузки запросов, сделанных браузером пользователя.
Предварительная выборка выполняется с помощью & lt; link & quot; в заголовке & lt; head & quot; например:
& lt; link href = & quot;//images.example.com & quot; rel = & quot; dns-prefetch & quot;/& gt;
и поддерживается большинством браузеров.
Если у вас есть поддомены и вы ожидаете, что пользователь загрузит с них файлы после посещения текущей страницы, нет причин не использовать предварительную выборку DNS.
Если вы ожидаете, что это произойдет ресурсы потребуются при следующем посещении, вы можете предварительно загрузить их, и они будут загружены в кеш браузера.
Если у вас есть, например, блог и статья, состоящая из двух частей, вы можете предварительно загрузить статические ресурсы (например, изображения) из второй части, используя предварительный выбор.
Это делается следующим образом:
& lt; link href = & quot;//images.example.com/sept/mypic.jpg" rel = "prefetch"/& gt;
В веб-альбомах Picasa обычно предварительно выбираются два изображения после текущего. Старые браузеры могут реализовать это, загрузив изображение в объект JavaScript Image :
var i = new Image (); i.src = 'http://images.example.com/sept/mypic.jpg';
Этот код загружает изображение в кеш, но нигде его не использует. Однако этот метод не будет работать для файлов CSS и JS, поэтому вам нужно проявить изобретательность, если вы хотите предварительно получить такие файлы в старых браузерах.
Объект XMLHttpRequest приходит в голову: загружайте эти файлы через ajax и нигде не используйте. В этой статье описывается, как это сделать.
Помните, что следует использовать только предварительную выборку ресурсов.когда вы уверены или почти уверены, что они понадобятся пользователю. Если пользователь читает сообщение блога с разбивкой на страницы, проясните это.
Если пользователь заполняет форму, проясните ресурсы, которые находятся на странице, на которую он хочет перейти, после отправки формы. Не надо Предварительная загрузка всего сайта или случайных страниц. Учитывайте нагрузку на сервер, а также экономно используйте предварительную выборку с учетом мобильных пользователей.
Мобильные устройства обычно имеют ограниченные ресурсы, поэтому предварительная выборка изображения размером 2 МБ, вероятно, не будет удобным решением . Вы можете избежать этих проблем, применив выборочный предварительный выбор — выберите, есть ли у пользователя мобильное устройство или медленное соединение, и не выполняйте предварительный выбор в этих случаях.
Еще лучше, добавьте персонализации на свой веб-сайт и спросите посетителей, согласны ли они на предварительную выборку — сохраните их персонализации в локальном хранилище и выполните поиск user-agent , разрешив посетителям разрешать или нет предварительная выборка на каждом устройстве отдельно.
Вы также можете выполнять предварительную выборку и предварительную визуализацию целых страниц. Предварительный выбор страниц означает получение контента — HTML-кода. Обычно это не приводит к значительному увеличению скорости, поскольку большая часть содержимого страницы — это JavaScript, CSS и изображения, которые не загружаются во время первоначальной выборки страницы.
Этот тип предварительной загрузки в настоящее время поддерживается только в браузер Firefox .
Предварительный рендеринг — еще один метод. Он работает только в Google Chrome и загружает не только структуру DOM документа, но и весь связанный контент: CSS, Javascript и изображения.
Этот метод фактически загружает и генерирует всю страницу в фоновом режиме — страница отображается в ОЗУ полностью загруженной и ожидает отображения.
Это помогает сделать переход почти мгновенным после нажатия на выбранную ссылку, но создает проблемы, описанные в предыдущем разделе — медленно страдают пользователи. Прочтите и следуйте правилам , приведенным в вики CSSLint, чтобы написать наиболее эффективный код CSS; CSS Explain
Подобно SQL Explain в базах данных, существует также умный инструмент под названием Объяснение CSS . Вы можете использовать его для анализа селекторов CSS. Если вы хотите протестировать этот инструмент в реальном времени, просто вставьте содержимое этого файла в консоль своего браузера, а затем запустите такую команду, как cssExplain (& # 8216; .item.subclass. anotherclass & # 8217;) :
Сервер
Оптимизируйте свой PHP-код с помощью простых приемов
Есть много вещей, которые вы можете сделать, чтобы улучшить производительность вашего Приложение PHP. Некоторые простые приемы описаны в недавней статье Фредерика Митчелла . Использование Google PageSpeed
Модуль Google PageSpeed — это модуль, установленный на Nginx и Apache, который будет автоматически использовать некоторые из передовых практик для оптимизации вашего веб-сайта.
Модуль оценивает производительность веб-сайта, воспринимаемую посетителями, путем принудительного применения все политики оптимизации, где это возможно, например, улучшение обработки статических ресурсов. Минимизирует оптимизирует и сжимает файлы CSS и Javascript для вас, уменьшает размер изображений, удаляя ненужные метаданные, устанавливает заголовки Expires для оптимизации кеша вашего браузера и многое другое.
Самое приятное то, что это не так. не требуют от вас каких-либо изменений в вашей архитектуре. Просто установите его на свой сервер, и он будет готов к работе. Чтобы установить модуль, следуйте этим инструкциям — вам нужно будет работать с исходными кодами для Nginx , но это всего лишь несколько простых команд. ИспользуйтеSPDY Для достижения похожих целей как PEAGESPEED , Google также разрабатывается. MOD_SPDY — еще один модуль Apache, задача которого состоит в том, чтобы ускорить работу страницы.
Процесс установки не совсем знаком , а также требует поддержки в браузере, но со временем становится лучше
Это на самом деле протокол, очень похожий на HTTP, который захватывает и заменяет HTTP-запросы, в которые возможен, что увеличивает скорость загрузки страницы. Хотя использование SPDY может быть рискованным, потому что мы все еще ждем его широко распространенной поддержки, выгоды, связанные со скоростью, кажется, преобладают на риск. Используйте WebP для изображений
Это формат изображения, который Не меняется, чтобы заменить все остальные,jpg, PNG и GIF. Поддерживает альфа-слои (прозрачность), анимацию, потеря и сжатие без потерь и гораздо больше.
Поддержка внутри браузера очень медленно , но вы можете легко управлять всеми типами изображений, используя Специальный инструмент, такой как автоматический Resolver, прикрепленный к вышеупомянутому модулю PEAGESPEED (может быть, автоматически конвертировать webp изображения в режиме реального времени).
Сжатие с zopfli
zopfli для предварительного сжатия ваших статических ресурсов. Это алгоритм сжатия сжатия с открытым исходным кодом, повторно распределяемый Google , который увеличивает сжатие на 3% -8% в отношении обычно используемых в сети методов сжатия.
для Меньшие сайты маловероятно, что это значительная разница, но если вы расширите свое заявление или поделитесь статическим содержанием большого количества посетителей, вы, безусловно, заметите разницу, как показано в Это отчет Web Шрифты.
Есть много способов улучшить производительность вашего приложения, и, как все в жизни, целое больше, чем сумма его частей. Примените некоторые методы оптимизации, показанных выше, и вы увидите ощутимое улучшение. Реализация всех из них, и вы будете получать приложение так быстро и свет, чтобы вы сможете путешествовать со временем.
Мониторинг производительности вашего приложения, используйте, посмотрите на профилирование в Tools или подпишитесь на services , что сделает это для вас. Просто не игнорируйте аспекты эффективности вашего сайта. Хотя большинство проектов создаются сегодня на принципе « сделано и доставлено ", не оставляйте своих клиентов сайтом, который вы не могли быть более гордыми.
Никогда не позволять себе недовольны незначительными исправлениями, которые вы можете войти. Вы никогда не знаете, какой из них будет последний шаг к совершенству!
