Speed is what you need

[alexkuzmov]

Hey Forum,

So you have a slow website? Slow app? Slow system?
You are a developer or you work with developers who just dont know how to speed up your system?
If so, this thread is for you.

We humans are an impatient bunch of consumer/producers.
One of the most common downfalls of any project is its speed.
The time it takes to load and function.
If its too slow, users/clients just click/tap away and never comeback.
You want to remedy this ASAP if you want to maximize your profits.

First things first, some tools to give you clarity:

Pagespeed Insights: PageSpeed Insights
GTMetrix: GTmetrix | Website Speed and Performance Optimization
WebPageTest: WebPageTest - Website Performance and Optimization Test


Lets breakdown the most important aspects of optimizing the performance of your project.

Rendering blockers.

We are all familiar with the dreaded loading screen.
Why does it take so long? You open the app or website or what have you and there it is.
Spinning GIF image again and again and again.

Well simply put, there are a few things that your browser or app must do before it can show you anything with which you can interact.
The key point here is a FEW. Once you get to SEVERAL things, a PACK of things or a HORDE of things it must do, then that's when you get the endless loading screens.

How do we remedy this?

Your users do not have endless screens.
I REPEAT, YOUR USERS DO NOT HAVE ENDLESS SCREENS.
In fact they have pretty small screens compared to the amount of data which you can show them.
Dont send them more than they can see on their screen.
You only need to send enough to fill and make function all the visible parts of the screen.

This is easier said than done, its long and complex and comes with challenges.
I wont do it justice in the next lines but I`ll talk about the most important aspects.

- Styling

Make sure to send inline the critical lines of styles which will render the screen, show proper fonts and add coloring.
Nothing more is needed and it`ll give the users something to see while your app is still loading.
This is very important since we want the users to see something on their screen as soon as possible.

Combine the fonts in a single file.
Dont use URLs to import fonts from google or anywhere.
That just adds more requests and more time for the users
Use this to save them time: How we use web fonts responsibly, or, avoiding a @font-face-palm | Filament Group, Inc., Boston, MA

The rest of the styles combine into a single file.
You can do that in many ways, even automatically.
But whatever you do, just make sure that you have as few style files as possible.

- Scripting

Is your app a game? Are you making 40K Startribes of Dystopia 2077 the mobile game?
Do you need to animate sliders which fly in from the side for your auto parts shop?
If not, then dont force users to load your mountain of scripts. What good will it do?
Users come to your app because they want to do something on it.
They want to read, view media, buy stuff, do business and more.
They dont want to be blinded by a GPU test that you made into an app.

Make sure that your scripts load last, after the data has already been presented to the user.
There is on such thing as a critical client side script which can't wait for the page to be fully loaded.
As long as the user is seeing information or a GIF spinner, you are in the clear.

Use scripts to load media in parts.
If its not on the users` screen, DONT LOAD IT.
Dont do requests for it, dont render it, dont touch it.
Until the user interacts with your app, you dont need to load things the users cant even see.
This is commonly known as Lazy loading: Lazy Loading Images and Video | Web Fundamentals | Google Developers

Simplify your UI.
How many popups do you need?
How many datatables and graphs and buttons which pop open other stuff?
You need to play a tug of war here.
A battle between required minimum functionality (RMF) VS your urge to put everything in one place.
Remember, your users` devices have finite resources while your scripts have no restriction on how much resources they can consume.
The last thing you want is for your users to be unable to use your app because you put too much functions on one page, half of which are used once per month.

- Media (but images mostly)

Resize and convert your images.
The name of the game is speed.
Resize them to fit the containers, there is no sense it showing a 1920x1080 image into a 200x200 container.
Whats the point in that? Why do you make your users download 2MB of an image they might not even see?

Convert them to WEBP.
No more PNG, JPG and so on.
And when something better comes along, convert them again.

You want to show videos in your app?
Thats great!
DO NOT HOST THEM YOURSELF!
Unless your app is used to host videos, just dont try and make a video hosting system.
Its more trouble than its worth.


TTFB - Time to first byte.
This is a very important and complex metric but essentially it means: The minimum time your server takes to respond anything.
Unfortunately, how long the server takes can be affected by a lot of reasons, so we need to generalize a bit and stick to the ones which will have the most impact on performance:

- Database is slow, or rather, getting data to show to the users is slow.

How do we remedy this?

Make sure to index your DB tables properly: SQL - Indexes - Tutorialspoint
Indexing foreign keys is very important to DB performance.
It can be the difference between your site loading for 2 seconds or for 0.02 seconds.

Make sure that you minimize the number of queries you do.
Its much better to make a single query to gather data than it is to do several.

Make sure that you dont bother your DB too often.
Cached data is much better for performance than getting the data from the DB on each request.
One of the best ways to cache data is by using a noSQL DB which complements your Relational DB: Redis


- Server is slow, or rather, requests take way too long to process.

How do we remedy this?

Start by moving all of you static resources (CSS, JS, images, XML maps etc.) to a CDN.
CDN means content delivery network.

Next make sure that almost all requests to your server are handled by your server alone.
What does that mean?
It means that you should rely on external resources and/or servers only if its absolutely necessary (payment processors for example).
The data that the user wants to see should be available on your servers 99% of the time.

After that, isolate where the requests are the slowest.
Use any of the provided tools at the beginning.
Another way is to ask the system administrators of your servers to put in place some monitoring which will track slow requests.
Once isolated, check your code or have your developers check it.
Is it too complex? Is it running correctly? Does it loop more than it should? Is it processing data which it shouldnt? Is there a better structure that can be used?
Can we delegate some of the server work to the client side? (this is a huge topic in and of itself)

Make sure that your code is not eating way too many resources.
Free memory when you no longer need it and dont process too much data at the same time, especially if there is a user waiting on your servers` response.

------------------------------------------------------------------------------------------------

Hope this helps, if you have questions drop me some in the thread.
If there is interest in particular aspects of speed optimization I`ll make additional threads with further details and advice.

 

Dislike ads? Become a Fastlane member: Subscribe today and surround yourself with winners and millionaire mentors, not those broke friends who only want to drink beer and play video games. :-)