how to speed up your wordpress website simple guid with timestamps YoutubeScribe.com

[0:00] So my buddy Zach messages me and he's like:
[0:02] "Hey, can I hire you to speed up
my WordPress website?"
[0:05] And I was like:
[0:06] "Dude... Just do A, B, and C, and I'm pretty
sure you'll see a huge performance boost."
[0:12] A few days passed and he said:
[0:13] "The speed tips you gave me worked perfectly."
[0:17] So today, I'm going to show you how to speed
up your WordPress site with three simple steps,
[0:22] and take your site speed from something
like this... to this.
[0:26] Stay tuned.
[0:26] [music]
[0:31] Google has used site speed as a ranking
signal for desktop searches since 2010.
[0:36] And as of 2018, page speed became a
ranking factor for mobile searches too.
[0:41] And even though speed improvements will only
affect a small percentage of slow websites,
[0:46] faster page load times lead to better user
experience and ultimately, more revenue.
[0:52] In fact, a study by Google shows that as page
load time goes up, bounce rate rises with it.
[0:58] Now, there are numerous reasons why
your website might load slowly.
[1:02] But the most common reasons that I've seen
are due to slow connectivity, caching, page size,
[1:08] and sometimes more technical reasons
like render-blocking JS.
[1:12] But if you're anything like Zach, who's not
exactly the most technical person, then
[1:17] the three steps that I'm about to show you should
help you get better performance from your site.
[1:22] Now, before we get started, it's important
to note that the things I did for this site
[1:26] won't necessarily translate perfectly to your site.
[1:29] There are tons of things to consider when
it comes to WordPress site speed like your
[1:34] theme's code, specific plugins you might be
using, server configuration, image file sizes,
[1:40] and more.
[1:41] So as we go through the tutorial, I'll try and
explain the more technical reasons behind
[1:45] poor performance, so you can hopefully
diagnose further issues yourself.
[1:50] Alright, so let me give you a background on
the website we'll be optimizing and we'll start
[1:54] with some benchmark speeds.
[1:57] This is a brand new affiliate site built on
WordPress using the free WP Astra Theme.
[2:02] He's activated seven plugins, many of which
will contribute to page load time in big and
[2:08] small ways.
[2:09] Now, to keep things simple, I've run a single
post, which has text, images, and a video
[2:15] through three page-speed tools.
[2:18] PageSpeed Insights shows a mobile
score of 45 and a desktop score of 79.
[2:24] Pingdom shows a load time of 1.72 seconds,
page size of 1.7mb, and 63 requests.
[2:32] And GTMetrix, fully loaded in 4.3 seconds with
a page size of 1.55 megabytes and 61 requests.
[2:41] Now, since these tools only allow you to view
one page at a time, I ran a full crawl using
[2:46] Ahrefs' Site Audit tool.
[2:48] And if we look in Page Explorer, you'll see
there were a total of 23 pages with a load
[2:53] time of 1 second or longer, which is
basically all of the site's pages.
[2:57] So there's definitely some room for improvements.
[3:01] So the first thing we did was to switch DNS
providers to Cloudflare's free DNS service.
[3:06] Now, in order to understand why we used Cloudflare,
you need to understand how the web works,
[3:12] at least at an elementary level.
[3:14] Websites are just files on a computer that
are made accessible through the Internet.
[3:18] Now, each device that's connected to the Internet
has an IP address, including the server that
[3:24] hosts your website.
[3:25] So if your server is located in Los Angeles,
California, and your visitor is in Las Vegas,
[3:31] these two IP addresses need to create a connection
in order to download the file contents to the device.
[3:37] Now, IP addresses are tough to memorize and
I doubt many people would key in an address
[3:42] like this to visit your site.
[3:45] That's where DNS comes into play.
[3:47] DNS stands for Domain Name System.
[3:50] And it's often referred to as the "phone
book of the world wide web."
[3:54] In short, DNS maps domain names to IP
addresses so people can type in a domain
[3:59] name to visit a website.
[4:00] But the thing with this is that when someone
types in the domain name in their browser,
[4:05] a DNS lookup occurs to find the IP address
of the server.
[4:09] So that takes time.
[4:10] And usually, free DNS providers from your
domain registrar are usually slow to respond,
[4:16] creating slower page load times.
[4:18] Cloudflare's DNS on the other hand is
pretty darn fast, considering it's free.
[4:23] But again, your mileage may vary depending
on the DNS provider, you're currently using.
[4:29] So to set this up, sign up for a Cloudflare
account and then click Add a site.
[4:34] Enter your domain name, select and confirm
your plan, and after a few seconds, Cloudflare
[4:41] will give you a chance to review your DNS records.
[4:44] Click Continue and you'll be asked to change
your nameservers, which is something you'd
[4:48] need to do with your domain registrar.
[4:51] Boom! Step one is done.
[4:53] The next thing we did was purchase
and install the WP Rocket plugin.
[4:58] WP Rocket is an all-in-one site speed optimization
plugin for WordPress.
[5:02] And they make it super-simple to make
technical optimizations even if you have
[5:07] no clue what you're doing.
[5:08] The plugin handles common page-speed optimizations
like caching, preloading, compression, and lazy loads
[5:15] images to name a few.
[5:17] After activating the plugin, you can access the
WP Rocket settings from the top navigation bar.
[5:23] Alright, so let's go through some of the
important settings starting with caching.
[5:27] If you're unfamiliar with caching, it's basically
a way to temporarily store copies of files,
[5:33] so it can be delivered to visitors in
a more efficient way.
[5:36] And because this site is a basic blog that's
responsive, I enabled caching for mobile devices.
[5:42] Next is file optimization, which is where
you'll spend the majority of our time.
[5:47] For the Basic Settings, I chose to minify
HTML and optimize Google Fonts.
[5:52] Minification just removes whitespace
and comments from code,
[5:55] which will reduce file size.
[5:57] And smaller files load faster than larger ones.
[6:01] I also chose to optimize Google Fonts since
the theme uses them.
[6:05] The next section is about optimizing CSS files.
[6:09] Again, I minified CSS files and also chose
to combine them.
[6:14] You already understand the benefits of minification,
so let's touch on combining files.
[6:19] WordPress sites often include multiple CSS files.
[6:23] Some will be for themes, others for plugins, and
you might have added some custom ones too.
[6:28] Now, whether you choose to activate this option
or not will mostly depend on how your server
[6:33] delivers the files.
[6:35] Generally speaking, your files will be loaded
either using HTTP 1.1 or HTTP 2.
[6:42] With 1.1, your files will be loaded consecutively,
meaning, one file needs to fully load before
[6:48] the next one starts loading.
[6:50] So combining your CSS scripts can help reduce
the load time because fewer CSS files will need
[6:56] to be loaded.
[6:58] Now, with HTTP 2, the files can load concurrently.
[7:02] Meaning, if you have multiple CSS files,
they can begin loading at the same time,
[7:07] so combining them won't necessarily be as impactful.
[7:11] To see if your site uses HTTP 2, you can use
Key CDN's tester and key in your URL.
[7:18] The final option we enabled is to optimize CSS delivery.
[7:22] Basically, this option will generate CSS needed
for content above the fold and asynchronously
[7:28] load other CSS files so they don't block
the rendering process.
[7:32] Now, these concepts can be quite technical
so I won't expand on these but in general,
[7:38] these are page speed optimization best practices.
[7:41] Alright, let's scroll down to the JavaScript files section.
[7:45] So first, I removed jQuery Migrate, which
is a file that's been added to WordPress
[7:49] since version 3.6.
[7:51] Now, since there weren't any issues with jQuery
for this theme or any plugins, I chose to disable
[7:57] it as there's no point in loading an
additional script without purpose.
[8:02] Again, we chose to minify JS files as we did
with HTML and CSS and combined our JS files
[8:08] since there were no conflicts or issues.
[8:11] And the last option we enabled is to defer
loading of JavaScript.
[8:15] This option will basically delay the loading
of JavaScript files so the most important
[8:20] content like your HTML and CSS can
be delivered to your visitors first.
[8:25] And then the JS will load.
[8:27] And this will in most cases, fix the "eliminate
render-blocking JS" issue that you may have
[8:32] seen in PageSpeed Insights.
[8:35] Now, it's important to note that if you choose
to minify, combine, and/or defer your JavaScript
[8:41] files, things may break on your site.
[8:44] So it's important to actually test your site's
functions before permanently leaving it on.
[8:49] Alright, let's move on to the Media category.
[8:52] Here, I've chosen to lazyload all media files.
[8:55] LazyLoad improves page speed because it defers
the loading of images and videos until they're
[9:00] visible on the screen.
[9:02] In fact, WordPress 5.5 will lazy-load images
by default, so you won't necessarily need
[9:07] a plugin if you just want this feature.
[9:10] Next up is Preloading.
[9:12] Preloading allows you to define essential
resources so that browsers know the priority
[9:17] of files that should be loaded first.
[9:19] For example, let's say that your
HTML code looks like this:
[9:23] Based on this code, the JavaScript file would
need to load first simply because of hierarchy.
[9:29] Of course, you could edit the code, but that
can get messy and confusing if you don't have
[9:33] coding knowledge.
[9:34] But if we add another link tag to preload
the stylesheet, and this would tell browsers
[9:40] to load the CSS file with a higher
priority than the JS file.
[9:45] And that's exactly what this option
in WP Rocket does for you.
[9:49] Now, the last thing I want to talk about here
is using a CDN.
[9:53] And it's easiest to understand how these work
if we look at our first example of how devices
[9:57] connect to web servers.
[9:59] So again, if the server is in LA and a visitor
is in Las Vegas, it probably won't take very
[10:05] long for the two devices to connect, seeing
as they're relatively close in proximity.
[10:10] But what happens when someone from Germany,
India, Australia or Singapore tries to connect to
[10:15] the web server?
[10:16] It's going to take longer.
[10:18] And that's where CDNs can help.
[10:20] CDN stands for Content Delivery Network.
[10:23] And that's exactly what it is.
[10:25] A network of servers located all over the
world that delivers content to visitors as
[10:30] fast as possible.
[10:32] By using a CDN, you're essentially caching
files on multiple servers globally.
[10:37] Then when a visitor tries to access your site,
it'll connect them to the one that's closest,
[10:42] creating a faster connection between
the user and the content.
[10:46] So if your site attracts a global audience, then
it might be worth signing up for a CDN service,
[10:51] enabling the option in WP Rocket,
and adding the appropriate CNAME.
[10:56] Now, there are other free caching plugins that
have a lot of these features like Autoptimize
[11:01] and W3 Total Cache, but I personally prefer
to pay a small fee for WP Rocket as I've had
[11:07] the best results with them.
[11:09] And the final step in this site speed optimization
tutorial is to optimize your images.
[11:15] Now, since we've already added LazyLoad
to images, this will solve a lot of problems.
[11:20] But if you're using featured images that are
above the fold on load, then lazyload isn't
[11:25] going to help.
[11:26] Plus, smaller images will save you with storage space.
[11:30] So the simple solution is to compress your
images using lossy or lossless compression.
[11:36] And there are some great plugins that'll do
this for you like ShortPixel and Imagify.
[11:41] Now, to give you an idea of how much
image compression can help, take a look
[11:45] at the WordPress media library here.
[11:48] You'll see that ShortPixel has reduced the
image sizes by quite a lot, which will help
[11:52] improve pagespeed.
[11:54] ShortPixel also has a feature that lets you
serve images in the WebP format, which
[11:59] basically lets you compress images even further
without compromising quality by much.
[12:04] Just go to Settings and choose ShortPixel.
[12:07] Then click on the Advanced tab.
[12:10] From here, you'll want to make sure that you've
checked this box so ShortPixel creates a WebP
[12:14] version of your images.
[12:16] So now that we've done the three main
optimizations for WordPress sitespeed,
[12:20] let's run the PageSpeed tools and compare
them with our original benchmarks.
[12:25] On PageSpeed insights, the page previously scored
a 45 on mobile and now has a score of 95.
[12:32] It had a desktop score of 79 and now
has a near-perfect desktop score.
[12:37] On Pingdom, the page previously loaded in 1.72
second with a 1.7mb page size and 63 requests.
[12:46] With the new speed test, you'll see there was
a significant decrease on all three metrics.
[12:51] Page size is just over 900 kilobytes,
load time came in at 200 milliseconds,
[12:57] and the number of requests have shrunk by nearly 3X.
[13:01] And you'll see the same pattern for GTMetrix
[13:04] and improvement across the board.
[13:06] Finally, I ran a new crawl of the site with
Ahrefs' Site Audit, and as you can see
[13:11] every single page loaded in under a second.
[13:15] Now, these are the steps that worked for Zach's
site and I've used it for other sites with success.
[13:20] But remember, each WordPress configuration
will be different since you might be using
[13:25] a clunkier theme, more resource-consuming
plugins, have inferior hosting, or you have
[13:30] tons of third-party tracking scripts.
[13:32] So if you're still unhappy with your site
speed after making these optimizations,
[13:37] then you'll likely need more custom work done for you.
[13:40] So you may want to consider removing
plugins and scripts, switching themes,
[13:44] or hiring a developer to make the appropriate fixes.
[13:48] So give it a shot and if you enjoyed this
tutorial, then make sure to like, share and
[13:52] subscribe for more actionable
SEO and marketing tutorials.
[13:55] And let me know in the comments if these tips
helped you boost your WordPress site's speed.
[14:00] I'll see you in the next tutorial.

本文档为站内渲染。原始文件本地路径：saas/source/knowledge-people/Knowledge-World-人物-seo方法论-youtube-seo-scripts-ahrefs-scripts-77a34c.txt（仅本地保留，不入库不部署）