3 seconds. It sounds like a short amount of time but in relation to page speed, 3 seconds is all it takes for 53% of users to abandon a mobile site.1
As a developer, this is a nightmare!
The last thing you want is slow page speed. Not only does this drive users away from your site, but it will also affect your site’s SEO ranking. Google would not want to recommend your site to users if they will be frustrated by its slow load times.
Clearly, page speed is essential to consider when developing a site. So, how can we improve it? There are many factors that can affect page speed such as the number of assets, interactive elements, or unused code.
1. Cache your objects
If we need to access an object more than once, it is important to cache the object. Caching an object means storing the object inside a defined variable. This variable can be used to reference the object as many times as it is needed, without repeatedly looping through all the elements to find it again.
2. Save variables at a local scope
3. Avoid unnecessary variables2
Variables take up memory. Therefore, you do not want to assign a value to a variable if you do not plan to save its values.
If you are never going to use the change value again, there is no reason to save it as a variable, and can simply just replace the code with this better example:
4. Reduce activity in loops2
With each iteration, a for loop executes the block of code inside of the loop as well as the for statement itself. So if there is code that does not need to be executed more than once, add it outside of the loop.
In the example above, the length property of the exampleArray has to be accessed with each iteration of the loop. However, this value never changes, so there is no keep reaccessing the same length property. To make the loop run faster, we can save the length value to a variable outside of the loop.
5. Use Switch/Case instead of If/Else statements
A switch statement executes faster than an if/else statement, especially when many nested if/else statements are needed.
With an if/else statement, the code checks to see if a statement is true. If it is true, then it executes a block of code. If it is not true, then it executes a different block of code. On the other hand, a switch statement compares the condition value with many different cases. If there is a match with any of the cases, then the block of code for that specific case is executed. If none of the cases match, then the default block of code is executed.
Overall, the number of comparisons made using a switch/case statement is less than the number of comparisons using an if/else statement.
6. Replace event click with mouseup3
It is best practice to replace the click event listener with the mouseup event listener. The click event does not fire until both the mousedown and mouseup events have fired. So if a user rapidly clicks, the click event can miss some of the interactions. Meanwhile, the mouseup event listener executes before the click event and can catch the rapid clicks from a user. Thus, mouseup performs better than a click event.
7. Event Delegation4
8. Use requestAnimationFrame instead of setTimeout or setInterval for animations4
setTimeout and especially setInterval are time-intensive operations and continue running in inactive tabs. On a mobile device, this leads to poor performance and overuse of the device’s battery. Instead, you should use requestAnimationFrame. requestAnimationFrame is better because when you leave the tab, the animation stops running and it is browser optimized.
To use requestAnimationFrame, you need to have an initial call to requestAnimationFrame that executes some function. Once it executes the code inside this function, it then calls requestAnimationFrame again, which then executes the function again. This keeps looping infinitely.
If you want the animation to only execute until some condition is met, you can have the requestAnimationFrame call in the exampleFunction inside some conditional.5
Throttling works by using a setTimeout to not allow a function to execute until some minimum wait period is over.
In this example, there is a minimum wait period of 300ms before exampleFunction can be called again.
Are there any tips you think we missed? Let us know!
And if this is something you need help with for your company’s website, feel free to contact us.