The end-users expect better server performance and speed. So you have to focus on proper web server optimization. It has a significant impact on your web server performance. In this documentation, we have discussed different ways of increasing the overall speed of your server by ShopEngine.
How to Increase Your Server Performance by ShopEngine #
There are two paths you can follow to improve your server performance. Have a look at the details below.
Method-1 Assets Cache Policy #
You can serve static assets with efficient cache policy by following manual processes and using a plugin.
Manual Process #
There are two ways you can follow to manually do the assets cache policy.
Apache Server #
It is a simple process, you just have to copy and paste the below code into your .htaccess file.
<IfModule mod_mime.c>
AddType text/css .css
AddType text/x-component .htc
AddType application/x-javascript .js
AddType application/javascript .js2
AddType text/javascript .js3
AddType text/x-js .js4
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType text/x-component A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/x-js A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/json A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/font-woff A31536000
ExpiresByType application/font-woff2 A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public"
Header unset Set-Cookie
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|TXT|XSD|XSL|XML)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "max-age=3600, public"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|avif|avifs|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|webm|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|AVIF|AVIFS|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|WEBP|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|WEBM|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|OGV|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "max-age=31536000, public"
Header unset Set-Cookie
</IfModule>
</FilesMatch>
<IfModule mod_headers.c>
Header set Referrer-Policy "no-referrer-when-downgrade"
</IfModule>
Nginx Server #
Add the following snippet to the inside of your server block which is usually located at /etc/nginx/site-enabled/default. a global expires directive to be inherited by your existing location blocks.
Cache-Control Headers with Expire:
map $request_uri $expires {
default off;
~*\.(jpg|jpeg|png|gif|ico|css|js|pdf|woff|woff2|doc|docx)(\?|$) 365d;
}
server {
…
expires $expires;
...
location ... {
...
}
...
}
WordPress Plugin #
If you have zero technical knowledge, it’s better to use a suitable plugin to apply assets cache policy. For example- W3 Total Cache and WP Rocket plugin.
W3 Total Cache #
Install the plugin then from your Dashboard -> 1. Go to performance -> 2. Select Browser Cache -> 3. Find CSS & JS -> 4. Set Expires Header -> 5. Expires header lifetime -> 6. Set cache control header -> 7. Cache Control policy
WP Rocket #
WP Rocket plugin also works like the W3 Total Cache plugin. This plugin updates the .htaccess file with all required information to enable the browser cache feature (Cache TTL).
Method- 2 Font Management #
This is the second effective path you can apply to improve your server speed. Here, you have to ensure text remains visible during web font load.
Manual process #
You can follow either the manual process or use a plugin.
Inline Font Loading #
This system allows the browser to discover the font declarations sooner as the browser doesn’t need to wait for the external stylesheet to download.
3rd-Party Font Loading #
If your site loads fonts from a third-party site, it is highly recommended that you use the preconnect resource hint to establish early connection(s) with the third-party origin
keep in mind that a font provider may serve stylesheets and fonts from separate origins. For example, this is how the preconnect resource hint would be used for Google Fonts.
Font Delivery #
Self-hosted fonts which are recommended to use Content Delivery Network(CDN) and HTTP/2. Without use of these technologies, it is much less likely that self-hosted fonts will deliver better performance. For self hosting we also need to focus on some other key points like sub-setting and WOFF2 compression.
- Unicode-Range: It is often used in conjunction with the technique of sub-setting.
- WOFF2: It offers the best compression.
Reduce Web Fonts #
System fonts and variable fonts are two ways to potentially reduce the number of web fonts used on your site.
- System Fonts: A system font is the default font used by the user interface of a user’s device.
- Variable fonts: The idea behind is a single variable font can be used as a replacement for multiple font files. For example, a variable font with a Weight axis could be used to implement lettering that would previously require separate fonts for light, regular, bold, and extra bold.
#
Font Rendering #
Different browsers handle this scenario differently. By default, Chromium-based and Firefox browsers will block text rendering for up to 3 seconds if the associated web font has not loaded; Safari will block text rendering indefinitely. font-display informs the browser how it should proceed with text rendering when the associated web font has not loaded.
- If performance is a top priority: You can use font-display: optional
text render is delayed for no longer than 100ms and there is assurance that there will be no font-swap related layout shifts.
- If displaying text in a web font is a top priority: Use font-display: swap
WordPress Plugin #
There are a few plugins you can find to apply a font management system. Three examples are given below-
Asset Cleanup #
To reduce page bloat this plugin scans unnecessary assets that load. Thus, you can unload useless CSS/JS. It performs best with any cache plugin.
Access to your Dashboard -> 1. Go to Plugins -> 2. Find Asset CleanUp -> 3. Click Settings -> 4. Find Google Fonts -> 5. Now, turn ON Combine Multiple Requests Into Fewer Ones for Render-blocking (default)
Wp Rocket #
WP Rocket may help fix the Flash of invisible text and ensure that text remains visible during Web font load. This is one of the best caching plugins for WordPress that optimizes the Google fonts by applying the font-display: swap attribute to them. WP Rocket automatically optimizes Google Fonts upon its installation and instantly addresses the Page Speed Insights warning related to such fonts.
Site-Ground Optimizer #
From your Dashboard -> 1. Go to Plugins -> 2. Click SG Optimizer -> 3. Click Frontend -> 4. Find Web Fonts Optimization -> 5. Enable or disable the option
So, these are some useful techniques to fast your server speed by ShopEngine. You can follow the guidelines and apply accordingly. Also, for any particular problem you can contact the ShopEngine support team.
