Hii @MatLeb , It is not compulsory to have all technical knowledge as non non-technical person can still optimize their website without the need for expertise in that field. First, please provide me the URL of your store through the url i can analyze the design, Performance Score, and SEO score that are important essentials for the site. You can also either try it on your own by analyzing the store performance by using Google Page Insights Report, through the report, we will get to know about the main factors that are responsible for the low performance, if the speed delay in your store.
Common practices that every store owner should keep in mind -
Design and Layout
Select the layout as per your needs and try to keep the design simple and clean, as sometimes complex structure ruins the store. Try to use the default fonts and use their weight and styling properly.
For Font Optimization -
Using font-display: swap ensures that the text is displayed with a fallback font while the custom font loads. This reduces layout shifts and improves performance.
Example:
@font-face {
font-family: 'CustomFont';
src: url('path-to-your-font.woff2') format('woff2');
}
Images Should be in Next Gen Format
Most of the users made the mistake of using normal image formats like PNG and JPEG. These two formats take too much time for rendering, creating load delays on the site. Use WebP or AVIF format for the best-optimized images in the store.
Minify and Combine CSS/JS
Minifying your CSS and JavaScript removes unnecessary characters (spaces, comments, etc.) that can bloat file sizes. This reduces the amount of data that needs to be loaded by the browser. If you have many small CSS or JS files, combine them into fewer, larger files. Fewer HTTP requests result in faster load times.
Example ( Before Minification)
body {
font-family: Arial, sans-serif;
background-color: #fff;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
button {
background-color: #4CAF50; /* Green */
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
button:hover {
background-color: darkgreen;
}
After Minification -
body{font-family:Arial,sans-serif;background-color:#fff;margin:0;padding:0}header{background-color:#333;color:#fff;padding:20px}button{background-color:#4CAF50;color:white;padding:15px 32px;text-align:center;font-size:16px;margin:4px 2px;cursor:pointer}button:hover{background-color:darkgreen}
Above are very common practices, but I would recommend testing your store by using the Google Page Insights Report for the exact issues of your site.
And you are from non non-technical background if you do not want to do this manually, I recommend Website Speedy - an optimization app for Shopify which optimizes images, JS/ CSS, etc., automatically to enhance the site performance. It comes with a 14-day free trial.
