Performance Project

Tonino Jankov, Claudio Ribeiro, Zoran Antolovic, Bruno Skvorc

Description

Performance simply matters. Technology may allow us to "go bigger", but maybe not necessarily be better when it comes to performance. Now is the time to utilize the amazing tools that are available for making websites faster, and to learn how to improve user experience and satisfaction.

This book contains a series of practical, real-world performance tutorials, all based around a single project: a simple image gallery blog. We'll build the project, and then run through a series of performance optimization processes; by the time we're done, we'll have achieved very significant performance improvements. This book is packed with useful, real world hints and tips that you can use on your sites today. It contains:

• Building an Image Gallery Blog with Symfony Flex: the Setup by Zoran Antolovic
• Building an Image Gallery Blog with Symfony Flex: Data Testing by Zoran Antolovic
• PHP-level Performance Optimization with Blackfire by Bruno Skvorc
• MySQL Performance Boosting with Indexes and Explain by Claudio Ribeiro
• Improving Performance Perception with Pingdom and GTmetrix by Tonino Jankov
• Improving Performance Perception: On-demand Image Resizing by Bruno Skvorc
• Using Background Processing to Speed Up Page Load Times by Bruno Skvorc
• Server-side Optimization with Nginx and pm-static by Tonino Jankov
• How to Use Varnish and Cloudflare for Maximum Caching by Bruno Skvorc

This book is for all developers who wish to build sites and apps that run faster. It covers a range of performace tools; familiarity with web development is assumed.

Sujets

• Web Programming
• Computers
• Informatique

Informations

• Publié par: SitePoint
• Date de parution: 29 août 2018
• Nombre de lectures: 2
• EAN13: 9781492069768
• Langue: English

Extrait

Performance Project
Copyright © 2017 SitePoint Pty. Ltd.
Ebook ISBN: 978-1-925836-13-4 Cover Design: Alex Walker
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: [e-mail]

About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, design, and more.

Preface
Performance simply matters. Technology may allow us to “go bigger”, but maybe not necessarily be better when it comes to performance. Servers and Internet connections are getting more sophisticated, and as a result, we feel the need to keep filling them. However, this isn’t the time to become lazy. This is the time to utilize the amazing tools that are available for making websites faster, and to learn how to improve user experience and satisfaction.
This book contains a series of practical, real-world performance tutorials, all based around a single project: a simple image gallery blog. We'll build the project, and then run through a series of performance optimization processes; by the time we're done, we'll have achieved very significant performance improvements. It’s packed with useful, real world hints and tips that you can use on your sites today.
Who Should Read This Book?
This book is for all developers who wish to build sites and apps that run faster. It covers a range of performance tools; some familiarity with web performance terms and techniques is assumed.

Conventions Used
Code Samples
Code in this book is displayed using a fixed-width font, like so:
<h1>A Perfect Summer's Day</h1><p>It was a lovely day for a walk in the park.The birds were singing and the kids were all back at school.</p>
Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed:
function animate() { ⋮ new_variable = "Hello"; }
Some lines of code should be entered on one line, but we’ve had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored:
URL.open("http://www.sitepoint.com/responsive-web-➥design-real-user-testing/?responsive1");
You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.
Tips, Notes, and Warnings

Hey, You!

Tips provide helpful little pointers.

Ahem, Excuse Me ...

Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

Make Sure You Always ...

... pay attention to these important points.

Watch Out!

Warnings highlight any gotchas that are likely to trip you up along the way.
Chapter 1: Building an Image Gallery Blog with Symfony Flex: the Setup
by Zoran Antolovic
Now and then you have to create a new project repository, run that git init command locally and kick off a new awesome project. I have to admit I like the feeling of starting something new; it's like going on an adventure!
Lao Tzu said:
The journey of a thousand miles begins with one step
We can think about the project setup as the very first step of our thousand miles (users!) journey. We aren't sure where exactly we are going to end up, but it will be fun!
We also should keep in mind the advice from prof. Donald Knuth:
Premature optimization is the root of all evil (or at least most of it) in programming.
Our journey towards a stable, robust, high-performance web app will start with the simple but functional application — the so-called minimum viable product (MVP). We'll populate the database with random content, do some benchmarks and improve performance incrementally. Every article in this series will be a checkpoint on our journey!
This article will cover the basics of setting up the project and organizing files for our Symfony Flex project. I'll also show you some tips, tricks and helper scripts I'm using for speeding up the development.
What Are We Building?
Before starting any project, you should have a clear vision of the final destination. Where are you headed? Who will be using your app and how? What are the main features you're building? Once you have that knowledge, you can prepare your environment, third-party libraries, and dive into developing the next big thing.
In this series of articles, we'll be building a simple image gallery blog where users can register or log in, upload images, and create simple public image galleries with descriptions written in Markdown format.
We'll be using the new Symfony Flex and Homestead (make sure you've read tutorials on them, as we're not going to cover them here). We picked Flex because Symfony 4 is just about to come out (if it hasn't already, by the time you're reading this), because it's infinitely lighter than the older version and lends itself perfectly to step-by-step optimization, and it's also the natural step in the evolution of the most popular enterprise PHP framework out there.
All the code referenced in this article is available at the GitHub repo .
We're going to use the Twig templating engine, Symfony forms, and Doctrine ORM with UUIDs as primary keys.
Entities and routes will use annotations; we'll have simple email/password based authentication , and we'll prepare data fixtures to populate the database.
Getting started with the app
To try out the example we've prepared, do the following: Set up an empty database called "blog". Clone the project repository from GitHub. Run composer install . If you now open the app in your browser, you should see an exception regarding missing database tables. That's fine, since we haven't created any tables so far. Update the .env file in your project root directory with valid database connection string (i.e., update credentials). Run the database init script ./bin/refreshDb.sh and wait until it generates some nice image galleries. Open the app in your browser and enjoy!
After executing bin/refreshDb.sh you should be able to see the home page of our site:

You can log in to the app with credentials [e-mail] and password 123456 . See LoadUserData fixture class for more details regarding generated users.
Starting from scratch
In this section, we'll describe how to set up a new project from scratch. Feel free to take a look at the sample app codebase and see the details.
After creating a new project based on symfony/skeleton by executing the command
composer create-project "symfony/skeleton:^3.3" multi-user-gallery-blog
… we can first set minimum stability to "dev" because of some cutting edge packages:
composer config minimum-stability dev
… and then require additional packages (some of them are referenced by their aliases, the new feature brought by Flex):
composer req annotations security orm template asset validator ramsey/uuid-doctrine
Dependencies used only in the dev environment are required with the --dev flag:
composer req --dev fzaninotto/faker doctrine/Doctrine-Fixtures-Bundle
Flex is doing some serious work for us behind the scenes, and most of the libraries (or bundles) are already registered and configured with good-enough defaults! Check the config directory. You can check all the dependencies used in this project in the composer.json file.
Routes are defined by annotations, so the following will be automatically added into config/routes.yaml :
controllers: resource: ../src/Controller/ type: annotation
Database, Scripts and Fixtures
Configure the DATABASE_URL environment variable (for example, by editing the .env file) to set up a working DB connection. If you're using our own Homestead Improved (recommended), you've got a database set up called homestead with the user / pass homestead / secret . A DB schema can be generated from existing entities by executing:
./bin/console doctrine:schema:create
If this doesn't run, try executing the console by invoking the PHP binary, like so:
php bin/console doctrine:schema:create
If this step executed fine in the "Getting Started with the app" section above, you should be able to see newly created tables in the database (for Gallery , Image and User entities).
If you want to drop the database schema, you can run:
./bin/console doctrine:schema:drop --full-database --force
Fake it 'til you make it!
I can't imagine developing an app today without having data fixtures (i.e., scripts for seeding the DB). With a few simple scripts, you can populate your database with realistic content, which is useful when it comes to rapid app development and testing, but it's also a requirement for a healthy CI pipeline.
I find the Doctrine Fixtur