Performance Testing, Monitoring and Optimization for Beginners

This introductory section of our Website Performance Hub covers a wide array of important factors involved in improving your website and web app performance.

We start with some basic considerations, such as the eternal question over which browsers your website should support. The answer is not as straightforward as you might have thought!

We also look at what CDNs are, what they do, and why they’re important for boosting the performance of your sites and apps.

And we take a crash course in progressive web apps, looking at how they offer the best features of mobile web apps and native mobile apps to mobile users.

Optimization on the Front End

We cover a number of topics on optimizing your CSS for better performance, starting with an investigation into the usefulness (or not!) of widespread CSS selector and other performance recommendations. We also look at CSS animation performance, introducing some useful DevTool features that enable you to check what happens under the hood when animating with CSS.

JavaScript performance is perhaps a bigger issue, and we look at a number of JavaScript optimization techniques. We start with an overview of JavaScript performance optimization, looking at how expensive JavaScript is in terms of performance, and covering a host of ways to reduce its load on the browser. We also look at five ways you can use JavaScript to lazy-load your images, which helps for faster-loading web pages. And we cover seven performance tips for jank-free JavaScript animations, which explains how to avoid the most common animation performance pitfalls.

We also dig into optimizing WordPress themes, discussing why flexibility can clash with performance in public WordPress themes and what you can do to find a middle ground solution. And we provide a comprehensive guide to WordPress optimization, listing tools, tips and best practices for optimizing WordPress sites — from hosting options to asset management, caching and software considerations.

Optimizing web fonts is covered, as we dig into best practices for loading custom web fonts, and cutting-edge solutions for file size and FOIT.

You might also like to check out our print/ebook collection of these front-end performance tips. And you might like our comprehensive book on creating lean websites, a practical book on website performance for web developers, concentrating mainly on performance metrics and front-end performance improvement.

Back-end Performance

Back-end optimization is crucial for performant apps. This Performance Hub also covers a wide range of back-end performance topics.

We provide practical tips on optimizing MySQL, from bottlenecks to configuration and indexes. We also focus on optimizing database queries, showing how to track down slow database queries and fix them up.

On the PHP front, we look at how to read and write large files efficiently, using of streams and generators to remove an entire category of application errors.

We look at making sites faster and safer with Cloudflare, explaining how it works and how to get started using it. We also cover the background, performance benefits and implementations of HTTP/2, as well as optimizing Docker-based CI runners with shared package caches, exploring how using a shared cache volume across Docker-based Gitlab CI jobs drastically improves build speeds.

We provide an in-depth walkthrough of supercharging apps with Blackfire, explaining the Blackfire profiler in depth and demonstrating its use on a simple script.

We look at how to boost your server performance with Varnish, discussing ways to tune server performance with Varnish Cache, covering how it works, and its features, setup, monitoring and administration.

And we look at how to process server logs, explaining what the ELK stack is, how to install it, and how to make it analyze the logs of the typical LAMP stack.

You might also like to check out our print/ebook collection of these back-end performance tips.

Further Learning

Once you’ve mastered the essentials of website and app performance, don’t forget that this performance hub also includes an in-depth Tutorials section, where we work through a series of practical, real-world performance projects, all based around a simple image gallery blog. And we also have a Tools and Resources section, which covers resources for getting the best performance results out of your apps and websites.