• Impact Web Design

Technical Aspects Of Your Website Loading Speed

Updated: Sep 14

If you have difficulties in understanding your PageSpeed Insights technical language, this article is for you!


You'll discover how to speed up access to resources for faster navigation and improved SEO.


First you need to know that there are opportunities for optimisation:

  • Improve our servers' response time

  • Get rid of any superfluous resources

  • Compress as many vital resources as possible

  • Load resources in the correct sequence and at the correct time


Remember that there are two critical points in loading:

  • The initial display of content to the user

  • When interacting with the website is possible

What we want here is enhancing the visitor experience in improving the overall website speed and delete every useless information.

Loading speed is one of the main ranking factors for Google. If a website takes 1-3 seconds to load, the visitor is 32 percent more likely to leave.


If it takes between 3-5 seconds, there is a 90% probability (1/2 persons) that they will leave your website without ever browsing it.


  1. Diagnosis

  2. Understand Your PageSpeed Insights Data

  3. The Key Improvements

  4. Mobile Responsive


Google-pagespeed-insights

1. Diagnosis


Step 1: Google Search Console Diagnosis ➜ Core Web Vitals


We can see:

  • A categorisation of all your pages (Fast / Needs to be improved / Slow)

  • The results on mobile & computer


Step 2: Use Page Speed Insights and Think With Google to evaluate your performance


We can see:

  • The significant speed delays

  • Ratings

  • The issues

  • Potential areas for improvement


Pagespeed-insights










2. Understand Your PageSpeed Insights Data


In part 3, we'll go through more in-depth ways to improve it.


speed-insights

Page-speed-insights-visual-description
  • The "First Contentful Paint" statistic indicates when the first text or first image is displayed.

➜ Don't put too much text or elements


  • The "Time to Interactive" value represents the amount of time it takes for the page to become completely interactive (click, scroll...)

➜ If it's too long, try to optimise your media, content


  • The "Speed Index" number reflects how fast a page's content is available.

➜ You can use cache to improve this data


  • The ''Total Blocking Time" is time between First Contentful Paint and Time to Interactive, in milliseconds, if the job duration has surpassed 50 ms

➜ Don't pack too much information at the top of your pages.


  • The "Largest Contentful Paint" statistic reveals when the longest text or the largest image is displayed

➜ This might be a video or a large component at the top of your website. If that's the case, shift it down.


  • ''Layout Shift cumulative'' measures the movement of the components shown in the display window

➜ Elements that are visible to the user but unexpectedly shift during the scrolling (different than controlled effect like hover effect etc).


Cumulative-layout-shift

Source: Webdev


3. The Key Improvements


A. Optimise Your Images


We talked about how to resize, compress and convert to improve your loading speed.


Once optimised, you still might use the lady load (your pictures download after the text of your webpage, allowing your user to navigate even if all of the images have not yet been downloaded).



B. Optimize And Compress Your CSS


CSS files provide stylistic material, such as boxes. In other words, it refers to how your material is presented.

JavaScript files include script information (for example, interactive elements and tracking elements).


Only keep important elements:


C. Activate a Cache System


Pre-register your pages to save your servers from being overburdened. If your visitor previously viewed the webpage, they won't need to query the server for the same information again. Your website's content will already be available and will load more quickly.


D. Sort Your Plugins Page By Page


Only use the appropriate plugins for your website AND on each page: Asset clean-up

Check that there are no resource duplication (E.g. 2 cache plug-in) and that your

plug-in is not active on every page if you just require it on a few of them.



E. Use a CDN


Increase the worldwide adaptability of your website.

Maintain the same loading speed regardless of where your visitor is from around the world.


4. Mobile Responsive


The majority of visitors will view your site on mobile.

So you have to work on your:

  • Loading speed

  • Ergonomics

Limit design customizations as much as possible and focus on the content


10 common mistakes to avoid:


1. Start by designing your page on computer version

2. Make clickable items that are too tiny and too close together (40px per element / minimum spacing between two clickable elements is 10px)

3. Use contrasts that are too bright

4. Write in a small font

5. Include components that are larger than the size of a mobile screen (and therefore invisible, or generating a horizontal scroll)

6. Integrate interactive components that need more than a scroll, click, or zoom

7. Include a lot of extraneous elements

8. Include extensive forms that are difficult to complete

9. There is no clear and visible navigation

10. Make use of hover animations


Check that your website is mobile responsive using Mobile Friendly Test and Google Search Console

Mobile-friendly-test









Mobile-usability-google-search-console

If you find any error, you may right-click on the page, select "inspect," and then go to the "Toggle device toolbar." Choose any device you wish.


It will display how your website is rendered on mobile devices.

inspect-page-devices