imgban
−20%

off custom development

in case of full advance payment

Expert Checklist: How to optimize your eCommerce site on your own

Tips to optimize site on your own

Today we bring to your attention the report of Michael, our expert PHP programmer. In his speech, Mikhail presented tips for tech-savvy website owners on how to optimize the performance of an online store or marketplace on their own using best practices. Here and below, optimization will be considered in the context of the Google Pagespeed Insights service. This is the most common way to measure the speed and performance of a site at the moment. 

About the author

 Michael, PHP developer, Simtech Development

Michael, PHP developer, Simtech Development

Website optimization types

Website optimization can be conditionally divided into three components:

  1. Server-side
  2. Backend
  3. Frontend

Let’s address each item.

Technical website optimization in terms of SEO

Before we begin, let’s mention some stats:

  • Even 1 second of extra waiting will already reduce the conversion by 7.5%
  • 50% of users are ready to wait for the first page to load for a maximum of 2 seconds, no more
  • more than 70% of customers will simply leave the site if it takes more than 4 seconds to load.

Server-side website optimization

Here we are very limited both from the side of the hoster, and your actual skills and abilities. To fully optimize a website from the server side,, you need a dedicated server and a professional system administrator.

What can still be configured on most servers:

  • Compression. It changes from 0 to 9. It is chosen experimentally, when checking with Google Pagespeed Insights service. The higher the compression, the greater the load on the processor and the smaller the amount of data transferred. Hence, with a heavy load and a small allocation of processor time when loading a page, delays are possible. The optimal value is usually between 5 and 9.
  • Cache of static objects (js, css, images, etc.). Google requirement is 1 year. An example of the term can be found here: Serve static assets with an efficient cache policy .Often, the hosting provider does not have a cache for all types of files (some image or font resolutions), then this must be specified separately in the .htaccess file, if the server configuration allows.
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

or

<ifModule mod_expires.c>
ExpiresActive On #cache flash and images for one week
ExpiresByType image/x-icon "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType application/x-shockwave-flash "access plus 7 days" #cache css, javascript and text files for one week
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days" #cache html и htm file for one day ExpiresByType text/html "access plus 1 day" #cache xml files for ten minutes E
xpiresByType application/xhtml+xml "access plus 10 minutes"
</ifModule>

Backend website optimization

Here, everything mainly rests on database queries and the duration of script execution. Speaking about Google Pagespeed, it is the requirement “Reduce the server response time (time to first byte)”.

Extract of Website Page Speed Analysis Report
Extract of Website Pagespeed Analysis Report

To catch long requests, we set database query logging and wait from several hours to 1 day to see the peak load.

It is also possible to include the logs of mysql itself. Then, we optimize requests, we add indexes to the database.

Ineffective functions are DISTINCT, ORDER BY, IN instead of OR.

Expert tip

Follow these principles:

  1. Write simple queries.
  2. Write short requests
  3. Add indexes

Frontend website optimization

Here are some tips on how to optimize your site in frontend:

  • Remove unused CSS code.

As is clear from the requirement, it appears if there are a lot of styles on the page that are loaded on it, but not used. This is very well seen in the example of ready-made libraries, such as bootstrap.

The bootstrap.min.css file contains all of the styles in the package. The problem is that styles are stored for all pages in one file, so there will be many unused styles for one page.

Possible solutions:

  • Delayed loading of all non-critical styles. For example, bootstrap – first load the grid, and the rest of the styles after loading the page. In this case, pagespeed will not see the “unnecessary” styles. Cons – it is possible to rebuild the image on load, so “unnecessary” styles should be chosen carefully.
  • PurgeCSS package. Removes unused styles from the site. Cons: it does not always work correctly with styles specified only in js files.
  • PurifyCSS package – similar to step 2
  • UnCSS package
  • Eliminate render-blocking resources

This mainly includes js and css files. Less often fonts and pictures.

How to resolve it?

Styles: use lazy loading for all additional styles. Load after (!) loading of content. This can be done either by adding styles via ‘append’ after the page has loaded, or setting media parameters. Don’t use lazy loading for the main styles as this will result in a loss of smooth loading of the site, especially in the Chrome browser.

Example:

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

The same is with scripts. Set the defer loading except for jQuery file and its analogs as almost all other scripts depend on it. After that, you need to test the entire site for performance!

Until recently, there was a problem that Google offered a choice of 3 formats, none of which was supported by all browsers. At the moment, the WebP format has supplanted the rest and is supported by all modern browsers.

  • Postpone the loading of hidden images

Good example is GitHub – ressio/lazy-load-xt: Lazy load XT is a jQuery plugin for images, videos and other media. All images are lazy loaded. It will allow you to lazy load not only images, but many other things with a detailed description.

  • Reduce JavaScript code size

Just minify the file. There are many online services for this. Do not forget to leave a non-minimized file for editing scripts.

  • Reduce the size of the DOM structure

Roughly speaking, the amount of content on the page. It is possible to reduce only by refusing part of the content. For example, you can save a lot by removing different kinds of carousels and sliders.

  • Minimize work on the main thread

There are many points, but in fact what can be influenced is the number of scripts that are executed on the page during loading. Less is better.

  • Set to show all text while loading web fonts

Find where the font is connected and set font-display: swap;

Example:

@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
font-display: swap;
}
  • Reduce the impact of third-party code.

All third-party scripts: chats, Google Statistics, etc. Chats and third-party scripts can be lazy loaded in most cases. As for Google statistics, it can be only either kept or removed from the site. You choose what to do.

  • Reduce JavaScript code execution time

How to reduce the number of scripts on the page? If you can do it without js, do it without js!

Final words

If you are facing difficulties in optimizing your online store or marketplace, we have specialists on our staff who will help you improve Google page speed quickly and efficiently. A fast website means that you are not losing potential customers, but gaining them. A more optimized site – faster loading – faster site surfing – more traffic – potentially more purchases. Don’t miss any opportunity to improve your site. Contact the experts!

Share:
Share on twitter
Share on linkedin
Share on pinterest
Share on pocket
Proven eCommerce Tips Straight to Your Inbox

Get access to exclusive tips, strategies, and case studies.

Какой-то текст ошибки

By clicking Subscribe or emailing us, you agree with Privacy Policy

More Posts

Looking for developers for your project, but afraid to make the wrong choice?

Get our checklist “How to Choose the Right Partner for Your ECommerce Project: 10 Hallmarks of an Unreliable Developer” right into your inbox!

You will learn:
  • How to assess a portfolio in the right way
  • What questions to ask a sales manager
  • What tricks developers can use to get a contract
Какой-то текст ошибки

By clicking Receive by email or emailing us, you agree with Privacy Policy

Want to work with us?

Just send us your ideas or concerns about starting your online store or marketplace and we will give you the help you need.

By clicking Submit or emailing us, you agree with Privacy Policy

Tired of solving complicated hosting issues? Focus on your business with complete peace of mind!

Save time, money and effort on hosting work!