Electronics Repair School

Clever tips to speed up website loading

Started by smithloo, May 13, 2024, 02:42 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

smithloo

Page speed is important to both Google and the people who rely on it to lead them to the most relevant and user-friendly websites. Auditing pages for speed and optimizing them to load faster is among the most simple, most cost-effective steps to increasing conversions, improving page views, boosting revenue and achieving better search rankings.

Google began factoring page speed into its rankings in 2010. The reality is that very few pages are penalized for being too slow – around one percent in 2010. But the relatively small number of penalties should not be taken as a sign that Google doesn't take page speed seriously. Shockingly, instead of penalizing slow pages in the rankings, the Search Engine Roundtable recently speculated that Google may have simply stopped indexing slow pages altogether.

Either way, it pays to be fast. If Google doesn't penalize you for being slow, your visitors certainly will.

Faster page speed equals a better user experience. A better user experience can lead to more conversions. If you sell a product, users will have a better experience browsing and filling out forms. If you collect ad revenue, faster page speed will lead to more page views.

Page speed – the amount of time it takes for any given web page to completely load – is one of the key elements of overall user experience. Not only are people less likely to stay on a slow loading page, but Google penalizes pages with sluggish load times.

The good news, however, is that page speed is one of the few SEO elements that you can completely control. Most businesses can speed up their sites quickly, easily and with minimal resources.

What Can You do to speed up website loading?

Slim Down Your Site
In many times when a page load time is slow, it simply means the page is overweight.

The solution is easy: Go on a diet!

Take a thorough check on your website and ask yourself these questions:

Are you keeping too many unused CSS in the server? Delete them!
Are your images too large? Optimize them with Photoshop, Fireworks, or Smush It if you don't have a graphic software installed in your PC.
Are you having excessive HTTP headers? Remove them!
Are you keeping too many spam comments? Undeleted comments in your spam box will simply slow down your database response time. Remove them asap!
Are you using too many plugins on your CMS? Are you using outdated plugins and scripts on your site? Well then it's time to do some clean up and updating job.
Is your JavaScript too heavy?  Minify and compress it!
While these tips seem pretty simple, I won't be surprise to see experienced webmasters or web designers fail to keep up with it.

A few years back I was careless and I wasn't aware that the WordPress theme I am using has a <?php wp_get_archives('type=monthly'); ?> embedded in the header.php file.

Needless to say, the function generates dozens of unnecessary lines in HTML files as time goes. It's a silly mistake that can be fixed in seconds, but then it took me more than 2 years to realized it as I wasn't looking on my own source code.

Use HTTP/2 or QUIC
HTTP/2 is a new HTTP protocol that boasts of improved speed. Some features are not yet supported by the major web servers. Prefetch is not yet supported by NGINX and rumors say it will be a premium feature only for paid customers. Apache, on the other hand, has it for quite some time.

QUIC is still in beta, but some hosting companies have already implemented it. Google developed it, and it ships even faster loading times that HTTP/2.

You can check if your website supports HTTP/2 here. If your hosting company doesn't provide you any of this, you should look for a different company.

Use CSS Sprites
CSS Sprites refers to the technique where multiple images were combined into one image file and shown parts of it to the users at a time. Using CSS Sprites reduces the number of browsers round trips and hence makes web pages load faster.

Now wait, I know this might seems a little too much for some of you who don't like to get your hands wet on CSS but trust me, the concept is much simpler than it sounds. And, best of all, there are free tools online that can get things done without touching the CSS codes. Check out Sprite Me and Sprite Pad – things can be done in just a few drag-and-drop and clicks.

Use SSD or IOPS for Data Storage
This is a tough one if your hosting company doesn't support it by default, but luckily most do. SSDs have a massive advantage over traditional spinning disks when it comes reading and writing data.

Use a High Performance Server
Apache is a very mature server engine but it consumes a lot of memory as the number of connections increase. Litespeed and Nginx, on the other hand, have much better memory usage, so your server can handle more connections with less delay. If you are on a shared host, this is pretty much given to you.

Combine Javascript and CSS files
Having multiple Javascript and CSS files just increases the number of HTTP requests, which in turn results in slower loading times. Combining all Javascript files into one big .js file and all CSS file into one .css file saves a lot of resources.

If you have a static website, you should know a little bit of programming to make this happen. If you are using WordPress or any of the modern CMSs out there, it should be pretty easy to do. W3 Total Cache and WP Rocket can do this automatically for you.

There is a slight chance some layout things will break when you do this so make sure you test extensively.

Compress Data Transfers
Most shared web hosts support gzip data compression. This means that for each request the server first compresses your response and then sends it to you. Your browser decompresses it and displays it to you. The transfer is much less in size, so it's faster.

Avoid Using CSS @import
CSS @import function helps load external stylesheet to your webpage. The bad thing about this is that it simply adds additional browser round trip times and increase your webpage load time. To solve this, simply use a <link> tag instead.

In case you are a casual blogger and have no idea what am I talking about, just go have a look on your header.php (if you are using WordPress), ctrl + F and search for '@import', move .css files to the same server if necessary, replace @import lines with <link> instead.

Example, replace

@import url("../style1.css");
@import url("../style2.css")
to

<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
Avoid Unnecessary HTTP 300's, 400's and 500's
HTTP 300's refers to server redirects, HTTP 400's refers to authentication issues, and HTTP 500's refers to server errors – all these results for HTTP requests cause unnecessary extra round trips* for the browsers. While certain HTTP 300's are unavoidable (such as 301 redirection to a new page location), you should look into every HTTP 400's and 500's errors and try to fix every one of it.

* What's A Round Trip Time Anyway?

General speaking, a webpage weights roughly 1,100KB in size and consists of roughly 100 objects (source); a web browser can only request 2 – 6 objects at a time depends on user's configuration. Round Trip Times is the number of round trip it takes for a browser to open up a page completely. For example, In order to load a webpage with 100 objects, a browser that is configured to carry 5 requests at a time will takes 20 round trips to load the webpage. Since the lesser round trip times it takes, the faster a webpage loads; we should minimize the number of objects available on one page.

Avoid Unnecessary Javascript Files
I see too many websites using old Javascript for things that can be done in  HTML and CSS3. If you are using Javascript for layout, transitions, etc. think again. Take a good look at your code and leave Javascript out of the picture where possible.

Compress Embedded Images
Yo can compress images to different levels without sacrificing quality. Posting raw pictures on your website can put seconds on your bottom line. I know for WordPress some plugins take care of this for you automatically, like EWW Image Optimizer.

If you cannot further compress your images, there is one more trick that can make your site look faster. I said look faster, because it doesn't make your site quicker but creates the illusion of it. It's called progressive JPG. A pixelated version of your jpg images will show up at first (very fast) and as your site fully loads the images load too and the quality gets better.

Cache All You Can Cache
These days in most cases I rely on a third party plugin for caching. For one, I am too lazy to look into it; secondly, there are pros that can do things much better than me, why waste my energy in this? In case you are on WordPress, try WP Super Cache – it's one of the most popular cache WP plugin at this time of writing. In case you are Joomla, check out Cache Cleaner.

In brief, these plugins help cache the latest version of your webpage and reduce the needs of generating dynamic content during a repeat visit.

Use Server and Client Side Caching
As I mentioned above, we use caching and you should too. Caching is saving the output of your server at different levels, so it doesn't have to do the same operations over and over again. Obviously, this is useful if there are a lot of repetitive processes. For WordPress websites, I believe it's a perfect solution unless you have a highly dynamic site.

There are different levels of caching. On the server level you can cache:

the compiling of PHP into opcode (OPCache),
the output of your database queries,
the output of your web pages.
You also have two options where to store your cache: in the memory or on the disk. With SSDs being widespread the latter can also be a good option.

The end of the chain is browser caching. You can specify how long a resource should not be reloaded from your website and instead be served from the visitors' local browser storage. This won't have any noticeable effect at first load but will deliver that snappy loading on the second visit, or when visiting other pages on the website.

Use LazyLoad for Images and Videos
Lazyload is usually a Javascript solution where your delay loading of images and certain objects (like iframes, videos, etc.) until the user scrolls to that section. If you are using WordPress, again, you are at luck because there are free plugins capable of doing this. On Hosting Manual we use WPRocket which besides caching our website, also has a lazy loading feature. We are not using it for images for the time being because we miss some specific features from it.

Get On A Content Delivery Network (CDN)
A CDN stores your static files across servers worldwide and serves your web pages from different servers based on user's location. Example, when a user from Malaysia access to your website, the CDN will delivers your web content (mainly static files like images and HTML files) from the server located in Asia, say Singapore; on the other hand if the user is located at Mexico, the network will choose to deliver the content from a nearer server location, say United States.

There are different brands of CDN available out there but in general CDN can be grouped into two categories – Pull CDN and Push CDN. For more details, I suggest you have a look on some of the reputable CDN services such as MaxCDN and CloudFlare.