Do you think speeding up your website doesn’t matter?
Big mistake.
A one-second delay in page loading time :
- 11% fewer page views
- Customer satisfaction drops by 16%
- Conversions lost 7%
A slow-loading site can hurt your ability to engage visitors and sell.
It’s impossible to ignore it.
It is important to have a fast website, not only for ranking well on Google but also for maintaining high profits.
How website speed optimization affects conversions
Slow websites can kill conversions. They are impossible to recover.
47% expect websites to load in one second or less. 40% will leave a page that takes more than three seconds.
Your site will take more than three seconds for it to load. This can cause you to lose nearly half your visitors before they arrive on your site.
Yes, that’s right.
This alone can be a major blow to your conversion potential.
Slow load times may discourage visitors from coming back to your site in the future. One survey found that 79% of customers stated they wouldn’t return to a site with poor performance.
According to the same survey, 52% said page loading quickly is important for site loyalty. 44% also said they share bad experiences with friends.
The survey also revealed that customers are less satisfied with a delay of just one second by approximately 16%.
Walmart’s increase in revenue and conversions after speeding up its site is one of the most striking examples.
They found that conversions resulted in pages loading twice as fast as those who didn’t convert.
It was clear that a faster page meant that a visitor was more likely to purchase.
Walmart presented the following results after their website optimization:
- They saw a 2% increase in conversions for every second that their site speed improved.
- They saw incremental revenue rise by 1% for every 100ms of improvement.
Another study showed that conversion rates experienced a 25% drop in load times with only one second more load time.
It is clear that increasing your site’s speed, even if it takes just one second, can have a significant impact on conversions.
Your website’s speed can impact visibility
Google now considers speed when ranking websites. This can impact how easily users find you.
This is especially true as it launches its mobile-first index.
This is what you have heard.
The search engine now ranks search results based on mobile versions of pages, starting in December 2017.
For the first time, mobile searches outnumbered Desktop searches in 2015. And its share of overall search continues to grow.
It is in Google’s best interests to target mobile users when it comes to search results. They don’t want their users directed to sites that aren’t compatible with their mobile devices.
Mobile user experience will play an important role in search rankings, even for desktop searches.
This is the exact opposite of how the index used to be.
Rankings have been heavily influenced by user experience, although it was only desktop experience that was taken into account before this shift. Even if a site offers a poor mobile experience, it can still rank on page 1.
This is no longer true.
Pages are now indexed and ranked according to the mobile user experience.
You must know how to speed up your website’s loading times if you wish to improve or maintain your visibility and rankings. A site must be easy to use on all devices and browsers.
Is my website slow?
Your site is slow after you’ve done a speed test. (If you don’t know how to conduct site speed testing, I will show you later in this post.
Your site’s slow load time could be due to many factors. This could be due to server load time, image size, or the number of redirects.
There are many steps you can take to increase page speed. Here are 20 of them. Before you can start to troubleshoot to improve your website’s performance, you must have something you want to achieve.
Let’s look at what is considered a good loading time to give you some ideas.
What is a good page loading time?
It’s a smart idea to establish a goal before you begin to improve your site’s speed.
This can be complicated if you don’t know what page speed is acceptable.
Google says that three seconds is the best time to do business. According to Google’s benchmark report, most websites are far from that.
Google performed an analysis of nearly 900,000 pages that display mobile ads in 126 countries and found that 70% took less than seven seconds to display the visual content above the fold.
None of the industries included had an average that was even close to their recommended best practices of three seconds.
It takes 22 seconds for a mobile landing page to fully load. However, 53% of visitors abandon pages that take longer than three seconds.
Additionally, the likelihood of a mobile user clicking away increases by 123% when page loading takes between one and ten seconds.
Site owners have to put in a lot of effort to make their sites Google-friendly.
It also means that your site will be faster and more user-friendly if you work hard to make it so.
You can use Google’s benchmarks and recommendations to help you set goals and measure your progress as you build your website.
Google, the world’s largest search engine, can have a significant impact on your success. It’s a good idea to use their standards as yours.
How to speed up your website for 2019
Many factors can affect how quickly pages load on your website. You have several options to speed up your site and improve the user experience.
This post will cover 20 best practices and tips to speed up your site’s load times.
Don’t be alarmed if this number seems overwhelming.
All of these tips will help improve the speed of your website, but you don’t have to do them all today.
If you have worked in the past to improve your site’s speed, it may be that your site is already following some of these best practices.
Let’s start with this in mind.
1. Reduce HTTP requests
Yahoo reports that 80% of a web page’s load times are spent downloading different pages such as images, stylesheets, and scripts.
Each of these elements is subject to an HTTP request. The longer the page takes to render, the more components there will be.
To reduce your requests, the first step is to determine how many your site currently receives. This will serve as a benchmark.
Google Chrome users can access the Developer Tools of Google Chrome to view how many HTTP requests their site receives.
Right-click the page you wish to analyze and click “Inspect.” Next, click the “Network” tab. If you don’t see “Network”, you might need to expand Developer Tools by dragging the left border-left.
The “Name” column lists all files on the page. The “Size” column displays the file size. Finally, the “Time” column indicates how long it took to load each file.
You’ll see in the lower left corner the total number of requests that the site has received.
This will increase your site’s speed. Take a look at your files to see if there are any that you don’t need.
Although you may not immediately notice any, some are prime candidates for merging — which we’ll discuss in the next steps.
2. Minify and combine files
Once you have an idea of how many requests your site receives, you can start to reduce that number. Your HTML, CSS, and JavaScript files are the best places to start.
These files are crucial as they will determine the appearance of your site.
These add to the requests that your site receives each time a visitor visits it.
This number can be reduced by “minifying” your files and combining them. This will reduce the file size as well as the total number.
This is particularly important if you are using a templated website builder. Although they make it simple to create a website, the code can sometimes be messy and slow down your site.
Minifying a file means removing any formatting, whitespace, or code.
Every unnecessary code piece will increase the page’s size. It is important to eliminate spaces, line breaks, and indentation. This will ensure that your pages are as slim as possible.
Combining files is exactly as it sounds. You can combine multiple CSS or JavaScript files on your site into one.
There are many ways to combine and minify files. If your site is built on WordPress, plugins such as WP Rocket simplify the process.
Install this plugin and go to the “Static files” tab. Check the files that you wish to combine and minify.
These files can be HTML, CSS, JavaScript, or Google Fonts.
To save your changes, click “Save Changes”. To see the effects of your changes, you can refresh your page or go to Developer Tools.
Leaner websites are better. A page with fewer elements will load faster if it has fewer HTTP requests.
3. Asynchronous loading is used for JavaScript and CSS files
After you have combined and trimmed some files, you can optimize how they load on your pages.
Two ways to load scripts such as CSS or JavaScript are available: Asynchronously or synchronously.
Your scripts will load in a synchronized fashion. They load one at a time and appear on the page in their order. Your scripts will load asynchronously. However, not all of them will load at once.
Asynchronously loading files can speed up your pages. This is because a browser loads a webpage and it moves from one end to the other.
It will not load a CSS or JavaScript file if it reaches it that isn’t asynchronous. The browser could load other elements of the page simultaneously if that file was asynchronous.
Use the same “Static files” tab in the WP Rocket plugin to check the options next to “Render-blocking HTML/JS”.
To ensure that your site loads correctly, click “Save Changes” and then test it.
4. JavaScript loading deferred
A file can be delayed by preventing it from loading until other elements have loaded. You can defer larger files like JavaScript to ensure that your content loads quickly.
To enable deferred JavaScript loading on a WordPress website, you can use the WP rocket plugin. You can simply check the box next “Load JS Files Deferred” and you are good to go.
You will need to call an external JavaScript script file if you have an HTML website.
5. Reduce the time it takes to get to the first bit
You should also look at how long it takes for your page pages to load fully.
The time it takes for a browser to receive its first byte from the server, or TTFB refers to the time that it has to wait. Google recommends that a TTFB be less than 200 ms.
This is not the same as a lot of front-end performance factors site owners are focused on. It is a server-side concern.
A user visits your website and sends an HTTP request to its server. Between the initial request and the first bit of data, there are three steps.
- DNS lookup
- Server processing
- Response
Chrome’s Developer Tools and a third-party tool allow you to see the time it takes to complete this process for your site.
Developer Tools can affect the response time of your Internet connection. Your Internet connection will affect how fast your server responds.
This information can be accessed in Developer Tools by clicking the “Network” tab. Click the mouse icon in the “Waterfall” column to access it.
There are many third-party tools that you can use, such as testing the site from a data center.
You’re in great shape if your TTFB is less than 200ms
If so, you could have other issues.
Most issues with slow TTFB are due to network issues, dynamic content creation, and web server configuration.
You have control over only two of these factors: Dynamic content creation or server configuration.
A server must “build” dynamic files before it can respond, unlike static pages.
Your WordPress website will most likely have dynamic pages. They will need to be “built” in PHP by interacting with a database before they can be delivered.
Caching can be used to reduce the time it takes. We’ll discuss this in a moment.
6. Server response time reduced
The time it takes to look up your DNS records is one of the most important factors that determine how fast your page loads.
A DNS (or domain name system) is a server that has a database of IP addresses as well as their associated hostnames. A DNS server interprets URLs into IP addresses that are used to indicate the location of a website.
DNS lookup is the process of finding a specific DNS record. It can be compared to your computer looking up a particular number in a telephone book.
Let’s take, for example, the URL ubnt.com. This would be what you’d type into your browser, but it means very little to your computer.
To find the IP address associated with that URL, your ISP will run a DNS lookup.
It will receive an IP address of 52.40.57.158.443, which tells the computer where to find the website you are looking for. This prevents users from having to remember long numbers to gain information online.
This step will take time depending on how fast your DNS provider works. If your DNS provider is slow, you may need to change to one that is faster.
To get a better idea of the speed of your provider, you can use this speed comparison report. It is updated every month and shows which providers offer faster speeds.
Slow DNS can slow down the speed at which browsers locate your site. It is possible to speed up the process by switching to a faster DNS provider.
7. Select the best hosting solution for you
Hosting is the most popular choice for new website owners. Although this may be enough for the initial site, it will likely require you to upgrade once your traffic increases. Do not skimp on hosting. Make sure you choose a host that you trust. You can find a lot of reviews about the top web hosts here.
There are three options when it comes to hosting.
- Hosting shared
- VPS Hosting
- Server dedicated
It is often the most affordable option, and it can be purchased for as low as five dollars per month. Although it is fine for sites with low traffic, shared hosting can’t keep up with high-volume websites and spikes in traffic. It is possible that your site could be affected by traffic spikes coming from other sites on the same server.
You can share resources such as CPU, disk space, and RAM with other sites that are hosted on the same server through shared hosting.
VPS hosting allows you to share the server with other sites but has your dedicated resources. This is a great in-between option. This protects your site from all other users on your server, without the need for dedicated hosting.
KeyCDN illustrates this by using the analogy of living in a condo.
Apartments allow you to share some facilities, such as laundry rooms or parking lots. You also have access to the maintenance staff.
Condos are different type of housing. You don’t have access to common areas and are responsible for maintaining them. The building also has fewer residents.
Dedicated hosting can be compared to owning a house. You are responsible for all maintenance and resources.
A dedicated server gives you more space but also means that you will have to do more configuration and technical setup.
This is the best option if you require lots of space and have complete control over your hosting.
It’s, however, the most expensive option.
If your traffic is slowing down server response times due to shared hosting, you may want to consider switching to VPS or dedicated hosting.
8. Run a compression audit
It is in your best interests to reduce the size of your files without sacrificing quality. Your files will load faster if they are smaller, and your load times will be lower overall.
Pages that contain lots of images or other content may end up exceeding 100KB. They are therefore bulky and slow to load.
Compressing files can help speed up download speeds.
You can run a compression audit to get an idea of how compression might speed up your site using
Simply enter your URL, and then click “Check.”
This will give you an uncompressed page size, which you can use later to compare the compression results.
Below is an analysis of the potential reductions in page size, both in percentage and size, using Gzip (which will be covered in the next step).
This compression includes HTML, CSS, and JavaScript.
9. Allow compression
Your pages will load faster if your files are smaller. Compressing files is a great way to speed up load times. Today, compression use is a common practice.
Gzip is a file format that can be used to temporarily replace code in text files.
This is especially useful for CSS and HTML files, which often have repeat code and whitespace.
Many web servers can compress files using Gzip format before allowing them to be downloaded. This is done either by calling third-party modules or using built-in routines. Yahoo claims that this can cut down the download time by around 70%.
Gzip is a great tool for speeding up your website, as 90% of Internet traffic today comes through browsers that support it.
If you’re not sure if your site has Gzip enabled, you can use checkgzipcompression.com to see. Simply enter the URL of your site to see if Gzip is enabled.
Gzip is not required to be enabled on your computer.
WordPress sites can be enabled by both WP rocket and W3 total cache plugins.
All you have to do in W3 Total Cache is to check the box next “Enable HTTP(gzip) compression.”
However, if you have a static HTML website, you will need to enable Gzip within yours.htaccess file. The code you require depends on the server, but your site likely uses Apache.
A version is also available that contains the equivalent code for NGINX servers.
10. Allow browser caching
The elements of a page that you visit when you visit a website are saved on your hard disk in a cache or temporary storage.
This means that your browser will be able to load the page the next time it visits the site without sending another HTTP request.
This is how Tenni Iturer, who was formerly with Yahoo, explained it:
Before anyone can use your site, they must first download the HTML document, stylesheets, and javascript files. This could take up to 30 components and take as little as 2.4 seconds.
Only a few components need to be downloaded after the page has been loaded.
Theurer’s test showed that this was only three components and took.9 seconds. This shaved almost 2 seconds off the load time.
According to Theurer, 40-60% of your daily visitors arrive at your site with an empty cache. Your page must load quickly for these new visitors. Caching can help reduce the time spent by returning visitors and improve the user experience.
Depending on whether your site is WordPress-based or static HTML, the way you configure caching will vary.
WordPress Total Cache can increase website speed with W3
To enable caching on a WordPress site you can use a plugin such as W3 Complete Cache.
After you have installed it, go to “Page Cache” in the “General Settings” section and tick the box next to “Enable.”
This one-step step alone should boost your site’s performance. But there are more things you can do with the plugin to make it even better.
Browser caching allows you to store a cached version of your site in the browser of a visitor. This allows you to load your site faster when the user returns.
This option can be enabled by going to General Settings > Browser Cache, and clicking the box next to “Enable.”
You can enable object caching if you have a dedicated server or VPS to speed up dynamic elements.
You can also find this feature under your General Settings.
This option should be disabled if you are using a shared server. Object caching can slow down your site and consume a lot of resources. This is the exact opposite effect you are trying to achieve with the plugin.
After you have set your settings, you will see an immediate improvement in your load times. W3 Total Cache claims its users have experienced 10x improvement in Google PageSpeed results and as much as 80% bandwidth savings after configuring the plugin.
You can enable caching on static HTML sites by editing yours.htaccess file.
It is possible to add lines of code to tell browsers what to cache, and how long it should be stored.
This allows you to set how long each file will be kept in a visitor’s cache.
Static resources should have a cache life of at least one week. Ads and widgets from third parties should have a cache life of at least one working day.
Set caching for all cacheable resources, such as JavaScript and CSS files and image files and media files, and PDFs between a minimum of one day and one year.
11. Reduce image sizes
Your site’s speed can be affected by images. Images can be very large and slow down site load times.
However, it is impossible to eliminate them all.
Take this as an example: Ecommerce website conversions average around 1-3%
However, this number can increase as high as 5% for certain sites, which has an average conversion rate of around five percent with approximately 85% of those conversions being on mobile.
Including lots of product images is a great way to increase your conversion rate. 66% of respondents stated that they would like to see at least three product images before purchasing.
Images are essential if you want to manage a successful eCommerce site.
This also means that image compression is crucial — regardless of whether you have an ecommerce site.
With a tool such as this, you can determine how much impact images have on pages. Do a page speed test and then go to the “Requests according to content type” section.
It is possible to reduce their size and speed up the loading time of pages.
One study found that reducing 22MB of images to 300KB led to a 70% decrease in the time it took to interact. This refers to how long a user must wait before they can interact with a website.
Cropping your images to the right size is one of the best ways to reduce file sizes. If you want an image that is 570px wide, crop it to achieve this width.
Upload an image that is at least 2000px in width. Then, set the width parameter to the desired size. This will cause your page to load the entire image and then adjust it to the right size.
Resizing images that are smaller than the width parameter should be a priority. This is a simple way to reduce page size and can make a big difference in your site’s speed.
You can also compress your image files using a variety of tools.
WP Smush can be a great choice if your site is WordPress.
You can check the box next to “Automatically smush images on upload” to have all your images compressed automatically without any extra work.
This plugin can be used to automatically resize any new files that you upload. You can set a maximum width or height and images that exceed these limits will be “squashed”.
You can also use Compressor.io, a non-WordPress plugin if you don’t have WordPress.
Upload your image into this tool before you add it to your website. You can choose whether you want lossy compression or not.
(If you aren’t sure which one is the best, we’ll help you decide in just a moment.
You’ll then be able to see how the file has been reduced and can download the smaller file.
Once you have saved the image file, it is possible to upload it to your website.
You’ll need to ensure that you are using the correct file types for each image. Although this may seem minor, the file types you choose can have a significant impact on the size of each file.
There are many options, but the most popular ones are PNG and GIF .
JPG is the best choice for photos. This format uses lossy compression which means some of the image’s data will be lost when it is saved.
The data loss is not visible to the viewer in photos but results in a smaller size file than other image file types.
If you upload pages that contain many photos, it is a good idea to ensure they are all JPGs. This will reduce load times and not affect their appearance.
PNGs on the other side use lossless compression. The result is that a PNG file doesn’t lose data and it has a larger file size than a JPG.
PNG is the best option if you want crisp lines and clear detail. PNG is the best choice for logos, screenshots, and other detailed graphics.
GIFs are not recommended for use with small graphics or images that are less than 10×10 pixels in size, with a limited color palette of 3 or fewer colors, or animated images.
Once you have the image formats and sizes correct, you can ensure that the code used to implement them is also correct. Avoid empty image src code.
HTML code includes the following:
If there is no source within the quotation marks, the browser will request the directory or the actual page. This could cause unnecessary traffic to your server and even lead to the loss of user data.
This is a simple fix. You can either add the file path to the image or delete all tags.
12. Use a CDN
To reduce load times for visitors, you can use other servers than the one that hosts your website.
If your site is hosted on a single server, every user visiting it sends requests to the same server.
This means that if your site receives high traffic, it takes more time to process each request, which slows down loading times.
This is not ideal when you consider the fact that high-traffic periods can offer a lot of growth potential to your business.
Additionally, users who live farther from your server experience longer load times. This is because the information takes longer to travel, even if you don’t have a lot of traffic.
These issues can be solved by a Content Delivery Network (or CDN).
A CDN allows you to cache your website on a global network. A CDN routes a browser request to your site to the nearest server when it receives it.
Let’s take, for example, that your origin server is located in California but you use a CDN to store files worldwide. This could be your network.
A South African user visiting your site could download files from a nearby computer.
Although the content users receive is identical, it loads much faster than if they were to request a server far from their location. This reduces latency and loading delays that users who are located far from the hosting servers can sometimes experience.
VentureHarbor conducted a 20-minute experiment and found that load time decreased by 20-51%.
These improvements can vary from page to page. Large image pages are most likely to benefit from a CDN.
MaxCDN or Cloudflare are the best choices if you’re looking to get started with a CDN.
MaxCDN is a complete CDN. It offers CDN services only. They are more efficient and have more data centers.
Cloudflare, however, offers CDN service and security features.
You will choose the one that suits your needs best.
MaxCDN will allow you to create a pull zone. Click the “Zones” button in the admin panel.
Next, click on “Create Pull zone.”
You will need to enter the URL of your original server, along with a name, and label, for your pull zone.
After you click create, you’ll see a URL for your CDN, like cdn.yourdomain.netdna-cdn.com. This URL can be copied to notepad or anywhere else it is easily accessible. It will be yours in just a few seconds.
Next, create a content zone by clicking on the “manage button” next to your pull zone. Enter multiple subdomains in the “Custom Domains” fields by clicking “Settings”.
These should be cdn.yourdomain.com or cdn1.yourdomain.com.
This naming format is common and easy to remember in case you have any issues or need to speak to a developer.
Click “Update” to add up to seven domains.
Next, you will need to add your CDN to your website through the DNS editor of your hosting provider. Although the exact location of your DNS editor will vary by provider, it is usually located under your “Domains” menu.
Bluehost calls this menu “Zone Editor”. If you use Bluehost, you will see the fields that you need as follows.
Copy and paste the MaxCDN URL (from notepad), and set the Type to “CNAME” and one of your custom CDN domains (such as cdn.yourdomain.com).
Next, you will need to repeat the process for each subdomain.
You’re done!
Cloudflare is even easier.
Click the button to sign up on their homepage. Click “Begin scanning” and enter your domain.
This will take approximately one minute and will show all DNS records, as well as any subdomains. You decide which subdomains you wish to allow.
Click on the plan that interests you, and then click “Process” to continue.
Next, you will see the Cloudflare domain nameservers. Next, you will need to update your nameservers.
This can be done through your domain registrar. Log in to your domain registrar and navigate directly to your nameserver records.
Each registrar has a different method. Bluehost is an example. To find it, go to “Domain Manager” and then click the “Name Server” tab.
Next, change your preferences to “Use custom nameservers” and then copy and paste Cloudflare’s nameserver.
Save your changes and then go back to Cloudflare to confirm that your CDN was correctly installed. If your CDN is active, click the “Overview” tab.
Your CDN is now up and running
Verify that SSL records have been installed. To verify that your SSL records are present, click the “Crypto” tab. One for your root domain and one for wildcard subdomain records should be visible.
These records may not be available immediately. It could take up to 24 hours.
Once they have, however, your CDN will serve the secure version of your website — just like your original server.
13. External hosting platforms are available
You can host your site’s files on an external CDN. However, larger files can be hosted on other hosting platforms.
This is especially important for videos.
Let’s take, for example, the case where you want to add video tutorials to your website. The video file is created, edited, and exported.
What now?
You might first think of uploading the video directly from your FTP to your WordPress editor.
This is a terrible idea.
Video files can take up tons of space when hosted on your server. Video files can easily exceed 100MB.
You have limited space if you share a server. You can quickly go over this limit with videos.
Large video files can sometimes violate your Terms of Acceptable Use. This could lead to your hosting account being terminated.
Even if you can upload large files to your hosting provider it will not likely offer a good user experience.
Your server will have to send the video to multiple users who are trying to view it simultaneously. This can cause pauses or lags in playback if your server only has a small bandwidth.
You know how frustrating it is to try to view a video, only to have it pause for a few seconds.
This is not what you should do to your visitors.
Instead, you can host your video on a third-party service such as YouTube, Vimeo, Wistia, or Wistia.
Next, embed the video onto your website.
This saves space and results in quicker load times. It is also very easy to do.
It is the most difficult part of choosing which one to use.
YouTube
YouTube is the most popular online video site. YouTube is one of the most popular sites online, with over 1.5 million users who watch nearly 5 billion videos each day.
It has more monthly users than any other social media platform except Facebook.
It is also free to use.
YouTube has the greatest potential to help you reach a wider audience. YouTube is a great way to increase awareness and drive traffic to your website using video.
This may not be a problem if you only want to embed videos onto your site and don’t care about them being discovered on other platforms.
YouTube has a 15-minute limit on most videos. You will need to request an increase in your upload limit if you wish to upload longer content. This may be a problem if you are doing this regularly.
Vimeo
Vimeo is second in video hosting, with 715 million views per month.
While it has the potential for getting your videos in front of a new audience it is less effective than YouTube.
Its standard video player is a lot more attractive than YouTube’s.
Vimeo has limits on the amount of content you can upload.
A basic membership allows you 500MB of uploads per week and 5GB in total. However, the three paid plans cost $7 to $50 per month, with storage ranging from 250GB to 5TB.
Wistia
Wistia is different from YouTube and Vimeo because it’s built with marketing in mind.
Wista users don’t usually browse Wista’s website for content. If you want your videos searched and found then this is not an option.
However, if you are focused on using video to market your product or marketing services in Miami, it might be just what you need.
The platform provides comprehensive analytics that includes where visitors came from, what they clicked, and how long they stayed watching a video.
You can also include calls-to-action directly in your videos and require viewers to sign up for your email list before watching.
Wistia’s video player can be customizable. This means that you can give your videos a brand-branded look by customizing the play button to match your brand’s color scheme.
You can customize your autoplay settings, load settings, captions, and share options. Users can also add chapters to make it easier to skip to specific points.
HubSpot and Marketo can also be integrated.
Wistia’s biggest drawback is its three-video limit on the free plan.
Paid plans start at $99+ per month.
It doesn’t matter what platform you use, once you have chosen your video platform, you can upload a video to your website.
Select “Embed” and copy the HTML code provided by your platform.
Copy and paste the code on the page you wish it to appear.
For HTML sites, just add it to your code at the place you want it to appear on the page.
Switch to the text editor for WordPress and do the same.
This is an example of how a Wistia Video looks embedded in a WordPress Blog post.
14. Optimize CSS delivery
CSS stores the page’s style requirements. This information is generally accessible by your website in one of two ways. In an external file that loads before your page renders or inline which means it is within the HTML document.
Your HTML header will contain the external CSS. It contains code that looks like this:
Inline CSS is nested within your page’s HTML. It looks like this:
Avoid including CSS in HTML code, such as in divs and your headings. Instead, use the inline CSS shown above. Cleaner code will result if all your CSS is placed in an external stylesheet.
This will reduce the code size and prevent code duplication.
It is best to use only one external CSS stylesheet when setting up your styles. Additional stylesheets can increase HTTP requests.
To find out how your CSS is set up currently, use the CSS delivery tool. Enter your URL to see a report that includes all external CSS files.
Scroll down to see the location of the external file, any inline CSS, and the total size of your CSS files.
Each external CSS file can increase your page load speed. This is sometimes necessary, but it’s not always. In most cases, however, it’s better to combine them.
This is an easy process that you can often do with just copy and paste.
Copy the contents of all CSS files you have and copy them to one main CSS file.
Next, update your HTML so that it references the new file. Finally, remove any references to the old files.
Your visitors will now only have to download one CSS file, instead of several, which decreases the number of requests and reduces page load times.
After you have done all of this, you can use page speed Insights to ensure that there are no issues with rendering-blocking CSS.
You’ll find any blocked script resources under “Optimization Tips.”
This should not be a problem if you are already using WP Rocket. For optimizing CSS delivery, make sure to double-check your plugin settings if you have render-blocking issues.
15. Prioritize content above the fold (lazy loading).
After recommending that you only use one CSS stylesheet, and no inline CSS as a result, here is one caveat.
It is possible to improve the user experience by making your section above the fold (top) load faster, even though the rest of the page may take a few seconds.
This is known as lazy loading. It is especially helpful for pages that have lots of content below their fold.
Let’s take, for example, a blog post with 20 photos. Normally, the browser must download all those images before it can display any page.
It can load the content in view first and then load all photos afterward.
The user won’t need to wait for the page to load, and images will load immediately.
This will significantly reduce the load time for posts that have tons of images (like this one).
It’s as simple as installing a plugin to enable lazy loading on WordPress sites. There are many options that you can use for lazy loading.
Lazy Load
This plugin is very simple and uses jQuery.sonar. It only loads images when they’re visible in the user’s browser.
It is easy to install and activate the plugin. The plugin will detect when an image has been made visible to a user and load it.
There are no customization or settings options that you can mess with. This could be either a good or bad thing, depending on your preferences.
You can do it either way: This is the quick, easy solution you need.
BJ Lazy Load
BJ Load another plugin that is relatively easy, but has a few more customization options.
You first need to determine what content you wish to lazy load from your website. This could include images, thumbnails, and gravatars as well as the content.
For content that isn’t loaded yet, you can set a placeholder image and skip images of certain classes.
If you don’t want an image to be lazily loaded, you can code it like this:
The plugin will know to load the image as normal.
A threshold can be set to determine how close an element must be to the viewer’s screen before it loads. This allows you to have more control over how fast and functional your pages to load.
This plugin can also be used with infinite scroll.
This plugin is great if you are looking for an easy-to-use, but more powerful option than Lazy Load.
WP Rocket
You can use the plugin to allow lazy loading if you are already using WPRock.
Click the “Basic” tab in your WP Rocket settings. Check the box next to “Enable images” in the LazyLoad section.
There are several customization options available once you have enabled this feature.
You can disable lazy loading for a page or post, but you may not want it to happen.
Simply open the page and scroll down to “Cache Options”. Next, uncheck “LazyLoad For Images” and save your changes.
To disable lazy loading on specific pages like your blog or home page, you can use code snippets.
This is how you would disable lazy load on your home page:
These snippets can be copied and pasted from WP Rocket’s tutorial for lazy load settings.
You can disable lazy loading for certain images by using the “data–no-lazy” attribute.
Simply add the code to your image and it will load normally.
You can also enable a fade-in effect to make images load faster.
Visitors can feel overwhelmed when images are displayed at once. You can make them appear gradually by adding a CSS snippet.
This snippet can also be found in WP Rocket’s lazy loading tutorial.
16. Reduce the number of plugins that you have on your site
As you have probably gathered from the post, plugins can make your WordPress site more useful. Plugins can be used to improve your site’s functionality, code quality, user experience, and many other things.
You don’t have to know a lot of code. This makes it very user-friendly when creating your website.
They are also very easy to install.
This allows you to keep adding and updating plugins without worrying about the possible downsides.
Too many plugins can lead to problems.
They can slow down your site, cause security problems, or even cause crashes and other technical difficulties.
It can also be time-consuming to keep up with updates and maintenance when you have many things.
Even if you don’t have many plugins, it is a good idea for you to regularly evaluate what you do have. Site speed can be affected if plugins are not up-to-date, inefficient, or poorly configured.
You can improve your speed by deactivating or deleting unnecessary items. This will also make maintenance much easier.
There are several ways to evaluate plugins and remove those that slow down your site’s speed.
Test your plugins
There are two ways to identify which plugins are affecting your site’s speed if you want to increase its speed.
First, disable all plugins. Next, measure the site’s performance. If you have many plugins, this can be tedious but it will allow you to see the differences each one makes.
Start by running a speed test, making sure that all plugins are enabled. This can be done with tools such as Pingdom or GTmetrix.
Next, try deactivating each plugin once at a while and retesting your speed.
Keep track of the page’s load time after each test and note which plugins were disabled to get faster speeds.
This process can take some time if you have many plugins.
There’s an option: Install another plugin.
Yes, yes, I see the irony.
The Plugin Performance Profiler can be used to identify plugins that cause problems on your website. It’s also much quicker and easier than manually activating plugins and running speed tests on your site. Plus, you can always deactivate the plugin as soon as it’s finished.
After you have installed the plugin, visit your settings page to run a site scan.
It will take just a few moments, and then you’ll get a report that gives you detailed information about how each plugin is performing on your site.
The plugin load times at the top of this report will tell you how long it takes to load all plugins on your site. It also shows the percentage of your total load.
A detailed timeline can be viewed that includes information about each plugin, your theme, and the core of each page. This will allow you to identify the problem with slow-loading pages.
You can also keep track of all your performance scans in the plugin. You’ll be able to identify issues and have a baseline for future problems.
Delete any plugins that slow down your site or aren’t needed after your evaluation.
If you have a contact form plugin, this is a great place to start. A lot of site owners use a contact plugin to add forms to their sites.
Many themes today have built-in contact forms.
Double-check your theme to make sure your contact form plugin doesn’t slow down your site. Update your forms and then delete the plugin.
Identify functional overlaps
Most plugins that you have installed on your website serve a specific purpose. Even if they are slowing down your site, you may not want to delete them.
There are many plugins available that can do more than one thing. This can make it easier to get rid of plugins that serve only one purpose.
The WP rocket and WP total cache plugins are great tools for speeding up websites.
You won’t likely need them both, considering they serve the same purpose. You could compare the features of both and determine if one could provide all you need.
Next, activate all the features of the plugin that you want to keep and then deactivate any others.
You may be surprised by how many plugins you have installed.
You can eliminate plugins from tasks that you can perform manually
You can reduce the number of plugins you use depending on your experience level by performing certain tasks manually.
Many site owners use a plugin for adding their Google Analytics tracking code in their header. This makes it extremely simple for those who don’t feel comfortable editing code. However, it is not required.
You can use the Insert Footers and Headers plugin to modify other parts of your header tags.
Save your changes and your tracking code will be installed.
You can manually add a plugin to edit headers or footers to your header via your FTP.
This is an advanced option and should only be used if you are comfortable editing basic code. Once you have copied your code and uploaded the file again, Google Analytics is ready to go.
A font plugin is another basic plugin that you might have installed. These plugins make it simple to modify the fonts on your site. However, if you already have one installed you can remove it with just a few lines of code.
You can go to Google Fonts to choose the font that you would like to use on your website. You’ll find the HTML and CSS codes for that font under “Embed”.
You can add the HTML code to your header and the CSS to the CSS stylesheet of your site wherever you wish to use your favorite font.
This can be done with any number of fonts you like. You can customize the appearance of all text on your website without using any plugins.
17. Redirects should be reduced
Redirects are necessary for pages that are being moved or deleted. They are also the best way to fix broken links.
However, too many can lead to additional HTTP requests which can impact the speed of mobile devices, especially if they are not in sufficient numbers.
It’s better to keep them to an absolute minimum. Google states site owners should eliminate them.
This isn’t realistic for site owners who have ever removed or restructured content.
Nevertheless, most cases are still in need of improvement.
To quickly find all redirects on your site, you can use Screaming Frog.
To see all 301 redirects on your site, run a site scan.
These redirects can be viewed to check their purpose and effectiveness.
This is also a great opportunity to identify redirect chains or redirects that point at other redirected sites. This can lead to unnecessary requests that slow down your load time.
To point any redirect links to your pages, you can modify you.htaccess file.
18. Reduce external scripts
As we have already mentioned, the fewer requests your site makes the quicker page loads.
Although CSS and JavaScript files are the most common culprits for extra scripts, it’s not the only ones. Eliminating any other can affect your speed.
You may not be aware of many third-party integrations that are running on your site.
Reopening the Network tab in Chrome’s Developer Tools will reveal all external scripts adding requests.
If Gravatar is used for blog comments, you may notice that loading images from users can increase your load time.
You might also consider integrating Twitter to share posts. This could increase the number of HTTP requests that your site receives.
Some of these features can be worth the extra load times they cause. You can leave these features as they are.
If they slow down your site speed, you can uninstall them or delete them.
It will help you understand how your site loads. This information can help you make better decisions about what features to add to your website in the future.
19. Keep an eye on your speed as you go
It’s important to track how your site speeds change over time as you improve them. Even if you have a satisfactory page load speed, this is still important.
This post shows that many factors can affect the speed of your site. It can also change as often as you want.
Regular monitoring of your load times can help you spot any problems early and maintain your site’s health.
How to speed test a website
This can be done with many tools. Pingdom’s Website Performance Test is the best tool for monitoring site performance.
Enter your URL and then choose the location where you would like to test your website. You can choose to leave the default location preference if you don’t want it. However, if you are concerned about users who live far from your servers this allows you to test your site from different locations.
You’ll then see a summary of your page’s performance and load time, including page size, number of requests and how it compares to other sites.
This gives you an instant look at the speed of your site and allows you to track it over time. It is a great way to see if there have been any improvements or decreases.
Below you will find a list of suggestions to improve your site’s performance. This will allow you to identify the root cause of slow load times.
All of this information is included in the tool’s free version.
The paid version includes site speed reports that show the speed of your site over time. This will help you spot trends and pinpoint the time when your site is experiencing problems. It makes it easier to find the root cause.
The paid version includes alerts, uptime monitoring, and alerts. These monitor your site and alert you if there are any issues.
A mobile app is also available that will alert you about server problems, downtime, or other important issues. These features allow you to quickly spot issues and ensure that your site loads fast and functions well.
20. Monitor mobile page speed
You should monitor your desktop load times and pay attention to how your site loads on mobile devices.
Mobile user experience has an impact on all aspects of your site’s ranking, as we have already mentioned.
It is in your best interests to offer a mobile-friendly website that is fast and user-friendly.
To check your page speed, you can use Google’s Check My Site to start. To get started, just enter your URL.
Your results will first show you the average load time of your site on 3G. Then, it will also show how this compares to recommended best practices.
This also displays the estimated number of visitors that were lost due to slow load times. This can be alarming if you have slow load times.
Next, Google offers an industry comparison that will show you how you compare to other sites in the same industry.
These sites are your competition. You’ll want to work to be a top performer in your industry.
This can make it seem like you are aiming for a distant goal if your site isn’t performing at its best. You can test your site more often and move up the ranks by making the changes in this article.
Conclusion
It is not easy to get your site loading times to the desired level. However, it will make a big difference in your overall site performance.
You should also remember that although all the tips here can help you reach your site speed goals you don’t have to use them all today.
Take some time to review your site’s speed test results. Find the ones that are having the most impact on load times. These high-impact issues are the most important and you must take the necessary steps to fix them.
You can then work your way through the list, looking for easy wins. Some of these tips may require assistance from a developer but others can be completed in less than an hour.
Even though they may seem small, even small steps can make a big difference in load time. When you consider the impact that one second can have on your conversions and success, it’s well worth it.
