How to Improve Your Website Speed

[et_pb_section fb_built=”1″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Website speed is much important now a days. And check here in this article how to improve the website speed of your site.

Page loading speed is more vital now than it’s ever been, as the rising number of mobile devices makes a speedy site not just “nice to have” but absolutely essential.

Page load speed has always been an important consideration when creating websites. But as more consumers are spending time researching products and services on mobile devices, they want to be able to complete tasks and make purchases quickly. A fast site is a key part of that. But how fast does your website need to be? And what’s the impact on your bottom line? In this article, we look at these questions and try to find some answers with our deep dive into website speed.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Page Speed Benchmarks

 

First, let’s cover the basics. When we talk about website speed, we’re really talking about load time, which is how quickly you can get the information on your server rendered correctly on a user’s device. Load times are measured in seconds and milliseconds. According to Google, if pages have a loading time of more than one second it damages the user experience. Google admits that a sub-one second page load time is a massive goal, and the variety of network types and speeds for accessing mobile content makes the issue more acute.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

How Fast is Your Site?

 

Before you can improve your site’s load time, you need to establish how fast it actually is. Fortunately, there are free tools available that help with this. Google Developers offers a website tool that includes information about where your site speed is good or bad, broken out between mobile and desktop. Just plug in your URL and you get a quick assessment of how your site loads both on mobile and desktop interfaces.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”] [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

It uses a simple traffic light system so you can see how your site is doing and provides recommendations for areas you should fix or should consider fixing. Along with this, you get a snapshot of how your site will look on a typical mobile device, which allows you to address areas like menus and logos that take up too much space. Google’s mobile help site also provides a number of tips on improving the mobile experience to help you reach the goal of a one second page load.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]This includes:

  • reducing server response time
  • cutting down on redirects
  • minimizing the number of TCP calls
  • avoiding external or non-asynchronous script, and
  • keeping pages simple.

Using these tools, you can determine your site’s load time. Which takes us to our next step — finding out how fast it should be. [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

How Fast Does Your Site Need to Be?

 

The speed you should aim to achieve depends in part on what sort of site you have and what page you’re loading. Take, for instance, an ecommerce site. Generally for ecommerce, the page users land on first need to load much faster than the final pages of the buying process. That’s because visitors willingness to stay on a site increases along with their investment in that site.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

What is slowing down your site?

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Simply, the longer someone is on your site (say, completing a purchase), the more willing they are to stay, and less likely to be affected by load speed. The best way to determine how fast your page should be is to look generally at what other sites are doing. After all, it is a user’s experience across the internet as a whole that sets their expectations for what is fast and slow. Moz pulled together some data on this and this is what they found:

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]For your highly trafficked pages, any landing pages, and any internal pages that attract an unusual amount of inbound traffic, we’d recommend aiming to be in the top 10% of pages on the internet, with a load time of about 1 second. This correlates with a finding that half of all web users expect a site to load in 2 seconds or less. Of course, these guidelines should not be taken as law because a number of other factors play into the importance of load times. [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Harness The Direct Booking Power of A Speedy Hotel Website

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

If you have qualified traffic landing on your site, for example, an internal page is ranking well for a recurring long tail keyword search, load times are less important because users are pre-qualified – they’ve specifically sought out your page. They’ll likely wait an extra second or more for it to load. On the other hand, site speed is absolutely critical for traffic where the user is poised to click away. This would include highly unqualified traffic, like traffic from PPC ads (especially if you’re bidding on keywords). Which brings us to the question of: what’s it going to cost you?

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

How Much Will a Slow Load Time Cost You?

 

As we have seen, that depends on a number of factors. But there is a pretty clear relationship between load time and bounce. Google recently published a report showing the likelihood of abandonment the longer someone has to wait:

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”] [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]This makes perfect sense – the more time users spend waiting, the more likely they are to leave. This is also visualized in the following graph from KISS Metrics: [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

This is especially true on mobile networks, where load times are longer due to lower quality network connection. It’s hard to put a dollar value on this relationship, but Amazon tried back in 2007. With A/B testing, they found that every 100 millisecond delay resulted in losing 1% of sales. Another study in 2013 found that splitting load times in half from 15 to 7 seconds, and then again from 7 to 4, and so on, improved conversions, but had diminishing returns.

And finally, yet another survey from Gomez.com and Akamai.com found that a 1 second delay in load time would lead to a 7% drop in productivity. Obviously, the dollar value of these statistics is going to be different for everyone, but if you think about other techniques to optimize websites where a gain of even half a percent is a huge success, it starts to put the importance of speed into perspective.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

How to Improve Website Loading Speed

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

1. Link your own images

 

Hotlinking is when you display an image on your website by linking to the same image that’s on another site. It’s a technique that lets you have big, beautiful images on your site, but avoids storing them on your server space. The thing is, whenever a web browser wants to load your web page, it has to go to an external source to get the image. That means more DNS lookups, which is slow. It also means you’re consuming bandwidth from someone else’s site, and the owner of the image can swap it out for something else at their own discretion.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]And it happens all the time. It would be pretty embarrassing to have something like this show up on your homepage: Hosting your own images is an easy way to cut out external links. Other sources of multiple DNS look ups include:

  • Social share buttons
  • Embedded YouTube videos or Twitter feeds
  • Google Web Fonts

Less look ups mean a faster site, so stop hotlinking! [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

2. Run PageSpeed Modules

 

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Google Developers very kindly has a whole section full of ideas for how you can speed up your website. One was is to install PageSpeed modules. PageSpeed modules are a series of modules that you can install for either Apache or Nginx that do a huge number of tiny tweaks to make each page on your site run faster. Each PageSpeed tweak is run as a filter, and you can turn these on and off as you see fit.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]PageSpeed filters help your site by:

  • Optimizing caching (e.g. outline CSS and JavaScript)
  • Minimizing round trips (e.g. CSS/JavaScript combining and flattening)
  • Minimizing request overhead (e.g. rewrite domains)
  • Prioritizing visual content (e.g. load above the fold stuff first)
  • Optimizing browser rendering (e.g. convert JPEG to progressive image loading)

PageSpeed modules provide a lot of technical speed boosts to your site in a really easy-to-implement way. [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

3. Reduce HTTP requests

 

80% of a web page’s load time is spent on HTTP requests. HTTP requests include web pages, pictures, and files – basically anything that’s stored on the server. Therefore, one of the best ways to reduce your load time is to cut out some HTTP requests. There are dozens of ways to do this, so we thought we’d cover some of the easiest.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Use a Content Delivery Network (CDN)

 

A CDN is a collection of servers spread all over the world. They speed your site in two ways.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]First, a CDN brings files closer to your user. For example, if your user is in Singapore and your servers are in Michigan, there’s going to be a big delay. But if you use a CDN, then it’s going to be like having a server in Singapore. Much faster. Second, CDNs shrink file sizes, so they load quicker. There are lots to join, but some of the most popular include CloudFlare, MaxCDN, Akamai (if you’re an enterprise company). [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

How to improve your website connection speed in 2021

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Use keep-alive responses

 

HTTP requests generally work like this. The web browser requests some information, and then the server sends it. That’s one HTTP request. But what if you want 10 things? Normally the web browser would request individually 10 things as 10 unique HTTP requests. It’d be like making a list for the grocery store and going taking 10 individual trips, one for each item. Very inefficient. A keep-alive header lets you keep the connection between the server and the web browser open, so you can send files over all at once, speeding things along.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

4. Use a browser cache

 

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Browser caching is when you save static components to a browser for future use by marking how often they need to be updated. Imagine, for example, a company blog page. You can’t cache the content, since you change the words every day or week or whatever.

However, let’s say that you have a logo on the same page. You can cache the logo, since you only update it every couple of years. So you mark the logo, telling the browser that it only needs to check for updates maybe once a year. That way, when a user is loading your blog page, their browser already has the logo read to go, and can concentrate on loading other stuff like words and images.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]There are caching tools out there to help you, but a lot of it is going to come down to you maintaining your site manually. The good thing is that you’ll find a lot of stuff doesn’t change that often, so once you mark it, you can pretty much leave it. [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”] [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

5. Optimize your images

Humans are visual animals. So it’s no wonder that pictures have become a huge part of designing a website. Sadly, we often forget that the mobile networks have to download our big, beautiful hero images, which can spell disaster for load times. Fortunately, there are many ways you can streamline your pictures. [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

  • Size your images: when you upload an image (say, for a blog) the image is going to load to the largest possible size, and then resize to whatever it’s supposed to be. So if you upload a 1024×768 picture for an image that’s going to be resized to 300×200, it’s going to load all 1024×768 pixels of information before it resizes it. Upload the image you need.
  • Compress your images: most of your users won’t be able to tell the difference between a 100% image and a 70% image. But they will be able to tell the difference in load time. You can use the free tool compressor.io to easily compress your images without losing quality.
  • Progressive rendering: we’re big fans. Give your users something to look at while they wait.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Why You Should Improve Your Website Speed and How

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

6. Make your pages smaller

 

We know, we know – users shouldn’t have to click more than three times (allegedly). But if you bring everything as close as possible to the user, you’re probably looking at fewer, larger web pages. And larger pages are slower. You want to think carefully about the trade-off of one more click and smaller pages. Something else to think about is the user experience of having giant, scrolling web pages that go on and on.

Shorter pieces that are more to the point might drive your site a little better than one mammoth pile of information. If your pages are exceptionally long, we suggest you revisit your information architecture and see where you can group content together. Remember: the ideal page size is about 30KB.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

7. Use animations and background videos wisely

 

Animations (including GIFs) can be used to explain something in a way pictures and words can’t, and background videos are fantastic for telling a story and engaging your users. We think both are great. But they’re expensive in terms of load time.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]Use them sparingly to save your site from getting bogged down. Also, make sure they have a natural stopping point. For your background video, have it stop so it’s just an image after 1-2 loops. Better yet, you can have your video play on desktop but appear as a still image on mobile. For your GIFs and animations, a few loops should be plenty to get your point across. These are big ticket items for load time, so spend carefully. [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

8. Minimize your font selection

 

Every time you use a custom font – or even one of Google’s – it’s going to increase your load time. System fonts are fastest, but obviously these aren’t right for everyone. If you do opt for a custom font or a web font, try and reduce the variety of fonts and weights that you use.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]Also, pick one library and stick with it. For example, if you do decide to go for Google Fonts, then stick with that. Sure, it’s going to increase your load time vs a system font, since the web browser has to complete more DNS look-ups. But for each new font you add from Google Fonts, the speed difference is negligible. However, if you decide to combine fonts from two sources – for example, Google and Typekit –then that’s now more DNS look-ups the web browser has to make. The result is a slower load time. [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” custom_padding=”0px|||||”]

9. Simplify, simplify, simplify

 

Don’t get caught in the ‘look at all the cool stuff I can do’ trap. No one cares that your layout is the most creative ground-breaking use of CSS ever. Does it help the user? If not, then cut it. You need to be ruthless when you’re evaluating your website. Every animation, embedded video, social share, picture, and advertisement need to be critically examined for how it helps the user.

Look at Quick Sprout’s blog for a fantastic example. It’s simple. It’s basic. There are some images, there are some links, and there are some screenshots. But every single element is obviously there to help the user. Their austerity gets results– the Quick Sprout blog loads crazy-fast.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Website Page Speed: Why It Matters and How to Improve It

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

10. Cut out useless plugins

 

Plugins are so easy to implement that we tend to forget that they’re really quite heavy. Technically, it’s because the plugins have to make multiple calls to various servers, and that takes a while. It’s like if you had to go to the supermarket for 10 things, but could only take one thing at a time. So while they’re good to have, think carefully about each and every one.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” custom_padding=”1px|||||”]

11. Personalize with caution

 

Most personalization – featuring products that someone’s looked at before, recommended products, a customized home page etc. – requires a database lookup, which is going to take some time. It’s a small change, but again, over time these changes add up, so think carefully before you add that detail to your page.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

12. Evaluate your responsive design

 

Before you start battering down the doors, we
are big fans of responsive designIt’s a great way to get a killer mobile experience while maintaining only one body of content. However, there is a flipside: namely, that there’s lots of extra code and technical weight that drags down load speed.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”] Responsive sites are almost always slower than their mobile counterparts, which again is going to be a problem for e-commerce companies. [/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

13. Fix your internal pages

 

As David Hsieh recently pointed out in a webinar, social media and other referrals mean that it’s not all about home page optimization anymore. Increasingly, users are bypassing homepages and ending up deep in a site, landing on blog pages or product pages. So optimization needs to extend all the way through the site, rather than be a front-loaded all-out effort on your home page or landing page

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Summary

 

 

  • Reduce your DNS lookups for a faster site. Do this by hosting your own images, cutting social share buttons, and embedding fewer YouTube videos.
  • Use Google PageSpeed modules for Apache and Nginx to make your site load faster.
  • Reduce the number of HTTP requests with a CDN and keep-alive responses
  • Cache as much as you can.
  • Images are a major drag on your website speed. Make sure they’re sized, compressed, and progressively render for the best speed and user experience.
  • Split your long pages into smaller pieces for better load times. The ideal web page size is 30KB.
  • Using animations and background videos sparingly.
  • Minimize how many different fonts/font weights you use, and minimize your font sources. System fonts are exempt.
  • Simplify everything from plugins, to personalization, to your mobile experience.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

How To Improve Wix Website Speed Under 20 Minutes?

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Conclusion

Ultimately, there’s no absolute figure for how fast you should be. Google says we should all be aiming for a one-second page load, which would put your site in the top 10% of sites on the web. B But speed can also be seen as relative. That is, it doesn’t matter how fast you are so long as you’re fast enough for your user. For example, a blog about different types of duck feather duvets, or something else equally niche, might tolerate a slower load time due to more qualified users seeking them out. Likewise, a site relying heavily on keyword-driven PPC instead of long tail SEO would likely need a faster load time for its less qualified users. What we do know is that over half of all users require a site to load in two seconds or fewer or they’ll leave, and both Walmart and Amazon have reported that faster load times have had a direct impact on their conversion rates. [/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_post_slider posts_number=”5″ include_categories=”2″ bg_overlay_color=”#0C71C3″ _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_post_slider][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_social_media_follow _builder_version=”4.9.10″ _module_preset=”default” text_orientation=”center”][et_pb_social_media_follow_network social_network=”facebook” url=”https://www.facebook.com/Gotmenownrp” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#3b5998″ follow_button=”off” url_new_window=”on”]facebook[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”twitter” url=”https://twitter.com/Gotmenow3″ _builder_version=”4.9.10″ _module_preset=”default” background_color=”#00aced” follow_button=”off” url_new_window=”on”]twitter[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”linkedin” url=”https://www.linkedin.com/in/gotmenow-soft-solutions/” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#007bb6″ follow_button=”off” url_new_window=”on”]linkedin[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”instagram” url=”https://www.instagram.com/gotmenow_soft_solutions/” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#ea2c59″ follow_button=”off” url_new_window=”on”]instagram[/et_pb_social_media_follow_network][/et_pb_social_media_follow][/et_pb_column][/et_pb_row][/et_pb_section]

Improve Website Speed using WebP image format from Google

[et_pb_section fb_built=”1″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Using WebP image format can reduce the image file size to more than 50% comparing with other image file type. For websites that using many images, using WebP image format will certainly boost the websites speed performance.
I also do some experiment to convert JPG and PNG images to WebP format. This JPG and PNG images I took by saving images from Media Player Classic (K-lite bundle), I don’t know anything about image compression or image format. To convert images to WebP,  I am using ffmpeg command line for Windows, and the result is:

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_image src=”https://1.bp.blogspot.com/-HWkzp_00ZKw/XuIJik2IW-I/AAAAAAAAE2E/ozpQWjf-oX02a7uwWThXlkLme0GhnkDBACK4BGAsYHg/s1600-rw/Annotation%2B2020-06-11%2B183607.png” _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

PNG and JPG to WebP conversion reduce more than 60% in file size

Another experiment, I’ve done with this website NetworkReverse.com by changing all the posts images to WebP format. Fortunately, all images from this website posts are hosted in Google (bp.blogspot, ggpht,lh?.googleusercontent) and can be converted to WebP image format just by modifying the image url address. The result?

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_image src=”https://1.bp.blogspot.com/-UVCo7Fvb6LY/XuIh0OapXEI/AAAAAAAAE2s/AlFyXSBSvi0nHV0G5x3Qh3xE-gs77FfLACK4BGAsYHg/w640-h360-rw/before.jpg” _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Before converting images to WebP format

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_image src=”https://1.bp.blogspot.com/-zoncgBomWqE/XuIiNXeLVqI/AAAAAAAAE3E/krUtcGQON6IpVU_Tlc8y-lvyWVL9yF1FACK4BGAsYHg/w640-h360-rw/after.jpg” _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Harness The Direct Booking Power of A Speedy Hotel Website

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

After converting images to WebP format

In this experiment I am using Google PageSpeed Insight both Mobile and Desktop and the famous GTmetrix to test the website performance before and after conversion. The most significant thing I really impressed is the boost improvement in loading time (GTmetrix), it is almost a half from before conversion to WebP. Another thing is the Total page size, it is decrease more than 300KB, 25% smaller than before.
Unfortunately for now, WebP image format is not supported by all browsers yet. But most modern and widely used browsers already support WebP format. I’ve read some articles explaining about using a fallback image for browsers that doesn’t support WebP format. That will be my next experiment . Check this Blogspot Image to WebP Lazy Loading Converter.
Anyway, if you are using blogspot and have your images hosted on bp.blogspot.com, you can try the trick from this video below to convert your images to WebP format by modifying url address and improve your blogspot website speed performance.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_video src=”https://www.youtube.com/watch?v=Y83ItZPvPmo” _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_video][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_post_slider posts_number=”10″ include_categories=”2″ bg_overlay_color=”#0C71C3″ _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_post_slider][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_social_media_follow _builder_version=”4.9.10″ _module_preset=”default” text_orientation=”center”][et_pb_social_media_follow_network social_network=”facebook” url=”https://www.facebook.com/Gotmenownrp” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#3b5998″ follow_button=”off” url_new_window=”on”]facebook[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”twitter” url=”https://twitter.com/Gotmenow3″ _builder_version=”4.9.10″ _module_preset=”default” background_color=”#00aced” follow_button=”off” url_new_window=”on”]twitter[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”linkedin” url=”https://www.linkedin.com/in/gotmenow-soft-solutions/” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#007bb6″ follow_button=”off” url_new_window=”on”]linkedin[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”instagram” url=”https://www.instagram.com/gotmenow_soft_solutions/” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#ea2c59″ follow_button=”off” url_new_window=”on”]instagram[/et_pb_social_media_follow_network][/et_pb_social_media_follow][/et_pb_column][/et_pb_row][/et_pb_section]

Why You Should Improve Your Website Speed and How

[et_pb_section fb_built=”1″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

We live in a world of instant gratification. Hungry? Order some fast food. Run out of an essential product? Amazon has a 2-hour delivery option. Short on time? Send a text message. Need information? Why wait?

Things that took previous generations weeks to accomplish can now complete in a matter of minutes, and, like it or not, we have become intolerant of waiting. The truth is, we expect our resources to support this impatience. It’s no different online.

In fact, did you know that:

  • 1/10 second delay can reduce conversions on your website by as much as 7%.  
  • As initial page load time increases from 1 to 3 seconds, the probability that a visitor to your website will leave increases by 32% (and 90% as you approach 5 sec)!

Think about the last time you encountered a slow-loading webpage. What was your response? If you’re like most of us, the information on that page became less important with every passing second. Did you stick it out or bounce? If you stayed, did it negatively affect the way you perceived the page or business?

Website page speed is essential to your customers’ satisfaction. Additionally, did you know that Google utilizes site speed as a ranking factor in its search algorithm?

Sluggish page speed on your website could be weakening every point in your sales funnel. In other words, a

slow website = fewer customers.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_image src=”https://blog.gotmenow.com/wp-content/uploads/2021/07/website-speed.jpg” alt=”wesite speed” title_text=”website-speed” _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

What Is Page Speed?

In a nutshell, page speed is the measurement of how fast the content on your website loads.

The most common way to evaluate page speed is via Google’s Page Speed Insights. While not exhaustive, this resource provides a great snapshot of your website’s performance. It provides data on a couple of important, user-centric speed metrics like first contentful paint, or FCP & first input delay, or FID (see definitions at bottom of page) and offers helpful suggestions to help your page load faster.

What Is a Good Page Speed?

Because we are using Page Speed Insights as our foundation, it is important to mention their recommendations for page speed load time (in terms of FCP).

< 1 second = Fast
1 second – 3 seconds = Moderate
> 3 seconds = Slow

In line with this, Google’s Senior Webmaster Trends Analyst John Mueller recommended aiming for a page that loads within 2-3 seconds.

Furthermore, Martin Splitt, Developer Relations at Google, answered this way: “Just make sites fast for users. That’s what it boils down to.”

“We don’t really have a threshold to give away, but basically, the recommendation I would say is: just make sites fast for users, that’s what it boils down to.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

How to Increase Page Speed

There are several actions you can take to improve your page’s load time with varying degrees of technicality.

If you aren’t very technical (and use WordPress) and would prefer to install a plugin to help with page speed, here are a few we recommend.

  • Paid: A performance optimization and caching plugin like WP Rocket paired with an image optimization plugin like Imagify
  • Free: A plugin to optimize HTML, CSS, and JavaScript like Autoptimize + a caching plugin like WP Super Cache

Beyond that, here are some ways to increase your page speed, from most technical to least.

Reduce or Defer JavaScript

Minimizing JavaScript code on your website will increase page speed by eliminating what is known as “code bloat.”

If you simply can’t avoid Javascript, adding it after the “above-the-fold” content is rendered can provide a smoother load and help improve customer experience.  As the top content is loaded first, the user will be able to view and engage with the website while the browser finishes loading the Javascript code below.

Compress HTML, CSS, and JavaScript

Use GZIP, a software application for file compression, to minify your CSS, HTML, and JavaScript files.

 

Redirect Properly

If you have to do redirects, avoid doing them in the backend of your CMS (ie. via a plugin). Your site will be faster if you do redirects in the .htaccess file.

 

Leverage Browser Caching

Caching improves and speeds up browsing. Once you’ve downloaded an asset, it lives on your computer, for a predetermined amount of time. To enable browser caching you need to edit your headers to set expiry times for certain types of files. More on that here.

 

Optimize Images and Video

Reducing the size of an image or video and using the right format for the job (for example, PNG’s for graphics, JPEG for photography) can go a long way in improving the load time of your webpage. There are a number of tools that allow you to do this manually and several plugins that can help automate the process.

Consider “lazy loading” as well to defer the loading of images and videos that aren’t currently needed on the page.

 

Consider a Different Hosting Provider or a Content Distribution Network

Make sure you choose a web host with a solid track record. Putting a fast website on a slow server will result in slow load times, no matter how optimized.

Content distribution networks (CDNs) are networks of servers used to distribute the load of delivering content. As such, they provide users faster, more reliable access to your site. Cloudflare is generally considered to be the best option in this field.

Speed Up Your Web Presence With PHOS Creative

Page Speed is a metric that can always be improved upon and requires regular monitoring and support. As it is so important to Google and your customers, it’s useful to partner with someone you can trust who has a successful track record in this arena.

At PHOS creative, our development process is built upon a custom framework intelligently designed to make websites fast, responsive, secure, and easy to manage.

Definitions

Bounce Rate – The percentage of visitors that open a website and leave before spending a significant amount of time.

First Contentful Paint – The point in the page load when the visitor can first see something (text or image) on the screen.

First Meaningful Paint – The time it takes for the main content of a page to become visible.

First Input Delay – Measures when a visitor first interacts with a page to the time they receive a responseEssentially, a measurement of the first impression of your site.

Website Conversion – a visitor to your website completes a desired action, such as contacting your business or making a purchase.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_post_slider posts_number=”10″ include_categories=”2″ bg_overlay_color=”#0C71C3″ _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_post_slider][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_social_media_follow _builder_version=”4.9.3″ _module_preset=”default” text_orientation=”center” global_module=”10723″][et_pb_social_media_follow_network social_network=”facebook” url=”https://www.facebook.com/zoho” _builder_version=”4.9.3″ _module_preset=”default” background_color=”#3b5998″ follow_button=”off” url_new_window=”on”]facebook[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”twitter” url=”https://www.twitter.com/zoho” _builder_version=”4.9.3″ _module_preset=”default” background_color=”#00aced” follow_button=”off” url_new_window=”on”]twitter[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”linkedin” url=”https://www.linkedin.com/company/zoho” _builder_version=”4.9.3″ _module_preset=”default” background_color=”#007bb6″ follow_button=”off” url_new_window=”on”]linkedin[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”instagram” url=”https://www.instagram.com/business_tools_online/” _builder_version=”4.9.3″ _module_preset=”default” background_color=”#ea2c59″ follow_button=”off” url_new_window=”on”]instagram[/et_pb_social_media_follow_network][/et_pb_social_media_follow][/et_pb_column][/et_pb_row][/et_pb_section]

How to improve website page speed through image compression

[et_pb_section fb_built=”1″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]

Image size is a major factor when it comes to the page speed of a website. Here is how you can audit and compress the size of web images to improve speed without losing out on image quality. 

The effect of website page speed on SEO and user experience is intertwined. It is a direct ranking factor for Google, but also if poor loading speed causes users to bounce (40% of users will abandon a web page if it takes more than three seconds to load) or reduces dwelling time on a website this will also effect ranking indirectly.

Page speed also has an effect on the conversion rate of users to paying customers. For instance, when Walmart decided to increase and monitor their web page speed they discovered:

  • For every 1 second of improvement, they experienced up to a 2% increase in conversions
  • For every 100 ms of improvement, they grew incremental revenue by up to 1%

It is pretty obvious, therefore, that page speed is an important factor when it comes generating traffic and customer satisfaction. In this blog we will explore how image size can be a problem, how to find over-sized images and what to do about it.

[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Why is image size a problem?

One very common problem we see across many industries and sites is page speed problems caused by very large images (large in terms of filesize) which are often directly uploaded from an HD camera without the use of any compression. As images account for around 59% of all the bytes on a page on average. Over-sized images can easily put a major dent in page performance. Fortunately, improving images is usually an easy low-hanging fruit, without the need to bring in developers.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

What size should my images be?

Unfortunately, the ‘it depends’ answer comes into play here-a small thumbnail on a sidebar will generally be smaller than a hero banner, for example. However, it’s a rare case where any image should be over 1 Megabyte in size, and for most images under 250 Kilobytes is easily achievable. The key is to reduce the size of the original image by as large a percentage as possible, without compromising on image quality (or doing so as little as possible).
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

How do I find oversized images?

Most SEO crawlers should be able to provide this information, if you don’t have access to one then there are some other options:

For WordPress users-check the media library

Scrolling through Media library content in WordPress is generally pretty fast (with its tabbed browsing of images) and they helpfully list the image size in the attachment details, which provides an easy way of rapidly scanning for over-sized images (top right in the example below)


[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

Look in Google Analytics

The ‘site speed’ section of Google Analytics allows you to break down individual pages by load time, which can help to pinpoint pages that are running slower than they should (generally 4 seconds or less is fairly good, over 6-7 definitely isn’t!) just make sure there isn’t anything else that’s causing the pages to be slow.


[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

How do I make website images smaller?

Fortunately, there’s an easy way to do this, the below are two of our favourite (free) tools;

For individual images

Head over to JPEG-Optimizer  upload the file and choose the compression level (lower equals more compression) usually, the default setting is fine, and you may wish to turn off ‘resize photo’ if the current dimensions are correct.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”] 


[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

For image compression in batches 

Tiny PNG (also works with JPEGs) will compress up to 20 images at once (max size 5MB each) which can be great when batches of images need to be done all at once.

If you have a larger number of images to compress, there are various cloud-based online services that can help with this, although the majority of good-quality ones are paid. Sites such as WordPress have plugins available that will compress images on upload, which in our experience only saves a few KB, but every little helps!
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

My images are still too large!

If this is the case, it’s possible that the images are too large for their containers (slots) on the site, in which case adjusting their width and height dimensions to fit the part of their site where they are being placed should do the trick. To see this, right click on the area where the image should be going, and select ‘inspect’ then from here it should be possible to see what the width/height dimensions should be (on the image on the left hand side).
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default”]

 
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_post_slider posts_number=”10″ include_categories=”2″ bg_overlay_color=”#0C71C3″ _builder_version=”4.9.10″ _module_preset=”default”][/et_pb_post_slider][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.10″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.9.10″ _module_preset=”default”][et_pb_social_media_follow _builder_version=”4.9.10″ _module_preset=”default” text_orientation=”center”][et_pb_social_media_follow_network social_network=”facebook” url=”https://www.facebook.com/Gotmenownrp” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#3b5998″ follow_button=”off” url_new_window=”on”]facebook[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”twitter” url=”https://twitter.com/Gotmenow3″ _builder_version=”4.9.10″ _module_preset=”default” background_color=”#00aced” follow_button=”off” url_new_window=”on”]twitter[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”linkedin” url=”https://www.linkedin.com/in/gotmenow-soft-solutions/” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#007bb6″ follow_button=”off” url_new_window=”on”]linkedin[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”instagram” url=”https://www.instagram.com/gotmenow_soft_solutions/” _builder_version=”4.9.10″ _module_preset=”default” background_color=”#ea2c59″ follow_button=”off” url_new_window=”on”]instagram[/et_pb_social_media_follow_network][/et_pb_social_media_follow][/et_pb_column][/et_pb_row][/et_pb_section]