Blogging Tips: How to Optimize Your Site Properly
- Blogging Tips: How to Optimize Your Site Properly
- Why is it important to have a good Web Page Performance and Speed?
- Tools to Test Web Page Performance and Speed
- Is Your Hosting Server Hindering Your Page Speed?
- What is a CDN and why use one?
- Image optimization
- Lazyload Images and Videos
- Responsive and Lightweight Theme
- Caching and Caching Plugins for WordPress
- Enable GZIP compression
- Minify HTML, CSS and JS scripts
- Defer or limit JS scripts
- Minimize WordPress Plugin use
- Faulty WordPress Plugins
- PHP and WordPress up to date
- Combining Static Files
- Deleting trashed and spam files
- Concluding thoughts
A slow page is an ultimate killer of getting constant traffic and return visitors. No one wants to wait for a page to load for 10 to 15 seconds. Taking the proper steps to improve the performance and speed of your page will not only help you rank better with Google but retain your visitors.
Why is it important to have a good Web Page Performance and Speed?
Several studies show that on average about “44% of visitors will ditch a site that takes more than three seconds to load.” Furthermore, because of the technological advancements and the boost of high-speed internet service providers, recent studies showing that people used to wait around four seconds for a page to load, which now has dropped down to two seconds. This only makes it more difficult to keep visitors.
As a travel blogger, I think it’s difficult to get a page load time below two seconds. The point of a travel blog is to tell stories of our travels and share our firsthand experiences, not only through words but through images and videos. All the images and videos we share with our readers add extra weight to our pages and in the end stacking up extra seconds to the page load time.
To prevent a page loading for a long time and improving the performance of your site, I’ve created a step-by-step guide to fix several common mistakes bloggers make or are unaware of. This will drastically improve the site’s loading time.
Since my blog is the WordPress platform, I will be adding tips and advice to each section for WordPress users as applicable.
Tools to Test Web Page Performance and Speed
Before starting to edit your site, a benchmark is needed to know how fast your site loads. There are several free tools that allow you to do this. The ones I use are GTMetrix, Pingdom, and Google’s PageSpeed Insights.
They are all free tools, and the most common ones used to test the page speed. PageSpeed Insights doesn’t give you the loading speed of the page, but it does give web performance analytics and possible optimizations.
GTMetrix and Pingdom allow you to choose multiple servers to see how fast your page would load from different points of the world. GTMetrix goes as far as allowing different browser customization (Chrome vs. Firefox page load time).
Take some time and familiarize yourself with each site, after all, they will become your best resource tool for your site’s performance and speed.
Is Your Hosting Server Hindering Your Page Speed?
Time to First Byte (or TTFB) is very important, which means the typical response time of the hosting server. The optimal TTFB is 200ms or lower.
At Iva Says, we use Siteground as our hosting server.
Being on a shared server usually means a little bit of a slower response speed. I’ve noticed on Siteground the TTFB is between 200ms-500ms, which is a decent speed for a shared server.
A piece of advice, if you are just starting out with your blog, don’t spend extra money to get the best of the best. You always have the option to upgrade as your traffic and visitors increase. Save your budget and invest it something else like marketing to get your word out there.
One of the reasons I like Siteground is their customer support is amazing. If you contact them through live chat or the ticket system, they are very quick to respond, and if any issue is within their scope they are more than happy to help/fix it.
The only downside is that Siteground is a little bit more expensive than InMotion Hosting. The price tag does even out with the faster page load times.
Siteground is officially authorized by WordPress.org as a hosting server.
What is a CDN and why use one?
CDN stands for Content Delivery Network, which is a network of servers that deliver web content (your page) to users based on their geographical locations. This allows the speeding up of the delivery of the pages.
Few of the well-known CDNs out there are Akamai, Cloudflare, MaxCDN, Amazon’s AWS, Incapsula, Rackspace, and many more. Most of the pricing plans for starters at a cheap price.
Cloudflare offers a free plan for beginners to serve your static files from multiple servers across the globe. Using Cloudflare I’ve noticed about a one-second decrease in my page load time than without it.
Also, if you are using WordPress as your blogging platform, the Jetpack plugin uses the free Photon CDN to serve your images through their WordPress.com grid.
Now, this is a very important topic, especially for travel and photography blogs. Images are bound to add a lot of extra weight to the size of the site, drastically slowing down a site, versus blogs that are 95% text.
Take this post of a photo essay as an example. It’s mainly made up of images, as it should be since it is a photography post, but it doesn’t mean it should take 20 seconds to load for the visitor to see the images.
There are few things you can to optimize your images, so it doesn’t affect the page speed drastically.
Before uploading images to WordPress or your server, an image needs to be resized and compressed.
Resizing an image:
Making sure you upload images with proper size is very important. The large the image the larger the size of the image file. Having an image that is 3000 x 1500 pixels is not really needed for an image on the web.
I usually keep my images up to 1170 width due to theme requirements. So check your WordPress theme documentation to make sure you are using the proper image size.
Compressing an image
After resizing an image to lower the file size, compressing it is the next step. PNG image file will have a higher file size than JPG. There are ways to convert it without losing quality.
I follow Google’s guide to image optimization and format my JPG files to reduce image quality to 85%, Chroma sampling to 4:2:0, and progressive format.
Windows tools I use for Image optimization:
I use GIMP 2 (link) free open source software for image resizing, and Riot (link) for image compression.
WordPress Plugins for Image optimization
Once I upload the files to WordPress, I use WP Smush (free version) and reSmush.it (free) plugins for further optimization.
Lazyload Images and Videos
After performing optimization on your images, enabling lazyload for images and videos is another step for a faster page load. Lazyload allows the images and videos to show on the site as the user scrolls to the particular place an image or video is embedded. This allows the page to load content faster and loads heavier files as images when needed as the user scrolls to them, rather than just downloading and loading them in the background, when a user might not even scroll to that particular image.
There are few WordPress plugins that allow you to control the Lazyload of images, and WP Rocket has it in its caching plugin as well.
Responsive and Lightweight Theme
Choosing the perfect WordPress Theme or a theme from any other blogging platform is crucial. Making sure it is responsive and lightweight for quick loading time, will either allow you to convert your visitors into return leads or have a huge negative impact on your online presence.
Iva Says uses the Cheer Up WordPress theme, which was purchased from ThemeForest. ThemeForest has the largest theme collection, and I’ve been very satisfied with their services over the years. Their Live Demo feature is great to test each theme before making the final decision.
Caching and Caching Plugins for WordPress
First, let’s learn what is caching. Caching is the storing of your web page’s data on a visitor’s computer or mobile device, CDN servers, Google servers, etc. By having caching enabled, the static files of your site (images, CSS, JS scripts) will already be available to the return visitor. There won’t be a need to download them from your hosting server again, in the end reducing the page load time.
At Iva Says, I’ve used the W3 Total Cache plugin for WordPress in the beginning. It has free and premium options. It takes some time to get used to it, and learn all the features it offers. W3 Total cache is neither user nor beginner-friendly. However, with a little patience and practice, W3 Total Cache does an excellent job.
W3 Total Cache has many options all in one plugin. From GZIP file compression, file deflation, HTML/CSS/JS Minify, Browser Cache, Object Caching, and much more.
WP Rocket is the other most talked about WordPress caching plugin than W3 Total Cache. Curiosity got the better of me this Thanksgiving, I finally bought WP Rocket because it had a huge discount. Unlike W3 Total Cache, there is no free option.
I’ve been using it for the past two months, and I’m very satisfied with it. It has the same options as W3 Total Cache, but much more simplified and user-friendly. They also provide frequent updates and a choice to roll back the plugin version if you have any issues with it. Cloudflare control is integrated within WP Rocket for easier management.
Second, whichever plugin you decide to use, enable each option it offers carefully and thoroughly test them to make sure it doesn’t break your site. For example, enabling “Lazyload” in WP Rocket breaks my site, and completely blocks images from rendering on the site. Therefore, I must have it disabled.
Enable GZIP compression
GZIP compression allows the compression of your page’s files to be reduced to the overall size of files sent from your server is smaller to increase the speed of your page loading. You can check if your site has GZIP compression enabled using this free tool.
If you are using any WordPress caching plugin, they have an option to enable GZIP compression.
Minify HTML, CSS and JS scripts
Minification is the process of removing unnecessary white spaces, redundant data, or comments from the static files of your WordPress theme or web page (HTML, CSS, JS scripts). Even though performing a minification on these files can reduce the size of your site, it’s not always the best course of action and you should be extra careful.
Most developers now days perform the minification process, so as if you choose to do it test your site thoroughly to make sure it doesn’t break it. WordPress has a few plugins like Autopimize, W3 Total Cache, WP Rocket, etc. that will perform the minification process for your theme.
Always create a backup of your site and database before installing and activating new plugins, in case they break your site. This goes hand in hand with always test your site after any changes.
Defer or limit JS scripts
Also, limiting the use of JS scripts on your site improves page load time. Having a lot of advertisements or widgets contributes to increased JS scripts on your site, so plan carefully how you will present the site to your viewers.
Minimize WordPress Plugin use
The more active WordPress plugins you have, the heavier your site is. Do an audit of the WordPress Plugins you use. Disable and remove the ones you don’t really need.
The less CSS and JS scripts your page has to load the faster it is.
Faulty WordPress Plugins
While you are doing an audit on WordPress plugins on your site, check to see if they are all performing as they should. Many times, a plugin is not up to date with the current WordPress version and its scripts are conflicting with the theme or other plugins.
If you find such cases, try to find alternatives to the plugin so you can permanently remove it.
PHP and WordPress up to date
Making sure your blogging platform is up to date is critical. It not only keeps your site and user’s information safe by fixing security issues, it speeds it up as well.
PHP7 is much faster than PHP5. People that have updated their site to PHP7 has seen an improvement in their site’s performance and speed and is recommended. Before updating to PHP7, verify that your plugins are compatible with it. You can contact your hosting server to get help on updating your server to PHP7.
Also, having WordPress up to date is important as well. Most hosting companies actually do automatic updates of the WordPress platform. However, be sure to test your site thoroughly to make sure nothing is broken. Plugins can be outdated, and not tested on the new version of WordPress.
Combining Static Files
By combining static files (CSS, JS, Google Fonts, etc.) you can reduce the HTTP requests, and improve the loading time.
Take proper precaution when performing this because a lot of new hosting servers use the HTTP/2 protocol (a new and improved version of the HTTP/1 network protocol), and concatenation of the files is not advised.
Deleting trashed and spam files
Cleaning your database and site regular keeps junk from slowing down your site. There is a great free plugin, WP-Optimize, that cleans your expired transients, spam comments, deleted posts, etc.
Well, this is my simple yet long guide on how to improve the performance and speed of your site. Hopefully, you found it helpful and will help you on your journey of blogging.
If I forgot any ways on how to speed up web sites or have better suggestions, let me know in the comments below.
This post contains affiliate links, which means I will make a commission at no extra cost to you should you click through and make a purchase.