Content Management

Generic: optimising page load

Questions:

• Why is my page so slow?
• Why don't we have more visitors?
• Why visitors quit after the first page? (bounce rate)
• Who are your visitors, what connexion are they using? (broadband, 4G, 3G, GPRS...)

What is a website?

Breaking it down:

1. HTTP request from web browser
2. Web server processing (retrieving files, processing PHP or similar)
3. Receiving http response in web browser
4. Processing response in web browser
   • Fetching resources (css, javascript, images...): http requests! (back to 1)
   • Running javascript (may require extra resources or ajax calls, in which case back to 1)

Use your frontend developer tools

Use your backend developer tools

• XDebug
• XHProf
• Blackfire
• Z-Ray

And then?

We now know the main problems. How to solve them?

Use some rules!

https://developers.google.com/speed/docs/insights/rules

Use some tools!

• Google Pagespeed
• GTmetrix
• Yellowlab Tools

In a nutshell - PHP

• Limit the number and size of your SQL requests
• Limit the number of files included

Use a cache! This could be caching the output in memory or in a single file that can be served directly.

Also use an opcache to cache your PHP structures (function, classes).

In a nutshell - HTTP server (Apache/Nginx)

• Use the right caching headers
• Compress the output (GZip)

In a nutshell - Network

• Use a Content Delivery Network (CDN) to serve content from closer to your visitor
• Cache files locally (HTTP headers again)

In a nutshell - Client side

• Limit the number of http request (concatenate JS and CSS)
• Use async javascript for the non mandatory scripts
• Optimize your images (use SVG if required)

Questions?

Next week

Improve your WordPress page load time

Questions?

"One more thing"

New learning strategy

Because a module has to be dispensed to persons from different background and with ways of learning, we will try a new excerice.

For the next weeks, we will do this exercice for the 2nd hour, or both hours when no lectures are planned.

Principle: a student ask a question (anything related to the module), and the class discuss it and comes with an answer (could be a workflow, a process or a code idea). I as lecturer, will use my computer and implement a proof of concept of the solution live, in front of the class.

Your turn!