Speeding up a WordPress site involves optimizing images, using a content delivery network (CDN) to improve load times, selecting fast hosting, and implementing caching. Page speed is important for user experience and retention - users leave sites that take over 4 seconds to load. Optimizing images reduces file sizes while maintaining quality. A CDN stores content on globally distributed servers to deliver pages faster. Caching saves page content for quick retrieval to improve load times.
2. Agenda
- Understand the ‘Page Speed’ Term
- Why faster?
- Run The Speed Test Properly
- Speed Up Your WordPress Site
3. Understand the ‘Page Speed’ Term
The length of time at which web page is downloaded from hosting
servers and displayed onto the web browser.
4. Why faster?
- 1 in 4 (25%) visitors abandon the website if it takes more than 4 seconds to load.
- 46% of users don’t revisit poorly performing websites.
- Website owners have a mere 5 seconds to engage visitors before they leave.
- 74 % of users accessing the mobile site would leave if it takes longer than 5
seconds to load.
- Every one-second delay in page load time could lead to $1.6 billion in annual
losses for online merchants as big as Amazon.
- SEO benefits, more profit, more downloads, and the list goes..
5. Run The Speed Test Properly
1. Enable and configure Caching.
2. Enable and configure CDN.
3. Choose the test location. It has to be close to your hosting server.
4. Test multiple times!
6.
7. Speed Up Your WordPress Site
• WordPress website types
• Hosting
• DNS: Free vs Premium
• Image Optimization
• CDN or/and Offload Media
• Themes and Plugins
• WordPress Tweaks
• Caching
• Optimize Mobile First
8. WordPress Websites Types
Static / Small
- Blog
- Business Portfolio
- Personal
The content does not change very
often. Content can be served from
cache.
Dynamic / Large
- eCommerce (WC,EDD)
- Membership
- LMS
Content is changing frequently.
Can’t be served from Cache and
server resources are needed.
10. Hosting - Shared Hosting
- Starts from less than $3 per month. (Renewal is different!)
- Crowded servers -> Slowness
(GoDaddy, BlueHost, HostGator)
YOU GET WHAT YOU PAY FOR!
11. Hosting - DIY VPS
- Do everything yourself
- Starts from $5
- Perfect for people who know what they’re doing.
(Digital Ocean, Vultr)
12. Hosting - Managed Hosting
- aka Managed WordPress Hosting
- Server-level caching
- Excellent customer support
- Staging, backups
WPEngine, Kinsta, Cloudways, SiteGround
Google (WordPress Cloud Hosting | Google Cloud) and Amazon
(Amazon Lightsail)
13. Hosting - PHP Version
Stick with the latest PHP version.
More secure and faster.
14. Hosting - NGiNX
- Apache powers 43.3%
of all websites
- NGINX powers 67.2%
of top 10,000 websites
Nginx is faster!
15. Hosting - HTTP/2
What’s HTTP?
Hyper Text Transfer Protocol is designed to enable communications
between clients (such as web browsers) and servers (web server).
16. Hosting - HTTP/2
HTTP/2 has many features
- Multi-host multiplexing
- Header compression
- Stream prioritization
To test if your hosting support HTTP/2
https://http2.pro/
which leads to
Better performance for both desktop and mobile users.
17. Hosting - Server Location
Choose a Server Closest to Your Visitors
- Reduce Network Latency
- Reduce TTFB
19. Free DNS vs Premium DNS
- You get your free DNS from your domain name registrar or your
hosting provider.
- Premium DNS provides you with reliability and speed.
Looking up DNS records and directing traffic takes time, even if it’s just
a matter of milliseconds.
- Test DNS resolving: http://www.solvedns.com/dnsspeedtest/
- Free and good DNS provider -> Cloudflare.
23. Image Optimization
The primary goal of optimizing your images is to find the balance
between the lowest file size and an acceptable quality.
To achieve that; let’s have a look at 2 concepts:
- File Type: PNG, JPEG, GIF, WebP
- Compression Technique: Lossy, Lossless.
24. Compression Techniques
Lossy Compression
involves eliminating some of
the data in your image.
- Applied to JPEG, GIF
Lossless Compression
done by removing unnecessary
metadata (automatically
generated data produced by
the device capturing the
image)
- Applied to PNG, RAW,BMP
Let’s see both techniques in action
25. WordPress Plugins for Compression
- Imagify (lossy and lossless)
- WP Smush (lossy and lossless)
- EWWW Cloud (lossy and lossless)
- ShortPixel (lossy and lossless)
26. CDN and Offload Media
CDN stands for content delivery network.
27. Types of CDN
There are 2 types of CDN:
1- Traditional Pull CDN
2- Reverse Proxy CDN
28. CDN Speed Test
Our test site located at USA and we’re running the test from London,
UK
Decrease the
page load times
by 43.2%!
32. Offload Media (Assets)
What is meant by Offloading?
When you offload media or files it means actually moving the original
physical location of them off of your hosting provider.
Extremely useful for sites with hosting hundreds of thousands of files or
large media.
33. Offloading Solutions
- Amazon S3
- Google Cloud Storage
You can also Offload your emails.
Marketing Emails -> Mailchimp, Drip, …
Service Emails - > SendGrid, Mailgun, ...
34. Speed Up Your WordPress Site
• WordPress website types
• Hosting
• DNS: Free vs Premium
• Image Optimization
• CDN or/and Offload Media
• Themes and Plugins
• WordPress Tweaks
• Caching
• Optimize Mobile First
Notes de l'éditeur
Page load time is the duration between clicking the link and displaying the entire content from the web page on the requesting browser.
Test multiple times until you see everything is loading from cache
You can't treat all WordPress sites the same when it comes to performance. Static and highly dynamic sites are two very different beasts!
We can’t dig into HTTP/2 technical stuff, but it has so many feature that make your website performance and the communication with the hosting server much much better.
Network Latency: Network latency refers to the time and or delay that is involved in the transmission of data over a network. In other words, how long it takes for a packet of data to go from one point to another.
TTFB: stands for time to first byte. To put it simply, this is a measurement of how long the browser has to wait before receiving its first byte of data from the server.
All you need to do to start using Cloudflare is to
1- Create a cloudflare account, it’s free.
2- Change your nameservers to the nameservers provided by Cloudflare
Image optimization is another straightforward thing you can do which has a significant impact on your overall page load times. This isn’t optional; every site should be doing this!
According to HTTP Archive, as of November 2018, images make up on average of 21% of a total webpage’s weight.
You can
PNG always comes in a large size, use it for simple images. Like screenshots, images with less colors.
Use JPEG for colorful images. As you can apply both lossy and lossless optimization techniques to it.
WebP is a new image format introduced by Google. Still not supported by all browsers.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images
By the way, WordPress compress each and every JPEG image you upload to your WordPress site. You can disable this feature if you want or set the compression ratio
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
These are a network of servers (also known as POPs) located around the globe. They are designed to host and deliver copies of your WordPress site’s static (and sometimes dynamic) content such as images, CSS, JavaScript, and video streams.
Traditional pull CDNs cache a copy of all of your content and media, but a request from the client is still made directly to your hosting provider. KeyCDN and CDN77 are examples of traditional CDNs.
A reverse proxy CDN is slightly different. While it still acts likes a CDN, it intercepts all incoming requests and acts as an intermediary server between the client and your host. Cloudflare and Sucuri are examples of reverse proxy CDNs. This is one reason why you have to point your DNS directly to these providers instead of your host.
Faster Delivery With Caching: CDN has its own cache and it caches your asstes
With a CDN the original data still resides at your host, the CDN simply has multiple copies of it.
When caching expires on your CDN assets it re-queries your host for the latest copies of the files. CDNs are meant to cache files for long periods of time. But due to the fact that they have so many POPs, there could be a lot of re-querying going on as cache expires in different regions.
Offload Media
When you offload media or files it means actually moving the original physical location of them off of your hosting provider.
So while it might appear that the files are served from your site, they are really located somewhere else entirely. Besides reducing additional queries back to the host, the number one reason obviously is to also save on disk space.