If you are familiar with ExpressionEngine for the design of your website, its important to have an optimized website to reduce the page load time. This guide takes you through the tips to optimize an ExpressionEngine website. Following that we look at why you need to speed up your website and some basic steps you require to speed up your website. Let's go.
Further reading
ExressionEngine Search Engine Optimization
Getting Started with Expression Engine
How to secure your ExpressionEngine Website
What are the Things You Can Do With ExpressionEngine?
How to Use ImageSizer to Scale Lightbox Gallery Images in ExpressionEngine
1) De-install/remove unused add-ons(modules, extension, plugin, accessories) and templates (snippets & global variable), channels/weblogs, category group etc.
2) Practice to use disable parameter within channel entry tag. While using channel entry tag, the system loads all the data/related data of the channel entry and one can disable few data which aren’t necessary anymore.
Further reading
ExressionEngine Search Engine Optimization
Getting Started with Expression Engine
How to secure your ExpressionEngine Website
What are the Things You Can Do With ExpressionEngine?
How to Use ImageSizer to Scale Lightbox Gallery Images in ExpressionEngine
3) If you are using Query module for writing sql queries, write well optimized queries to fetch only necessary records.
4) Avoid to use so many embeds into a template as embeds take more time for processing than snippets or global variables.
Also, don’t save templates as file if not necessary. It adds extra overhead.
5) If any template is populating so many data/dynamic contents, use Template Caching (It can be enabled from Preferences > Enable caching by having Refresh Interval).
You can use following add-ons for caching:
ExpressionEngine, itself provides some more caching solutions like Queries Caching (Admin > Channel Administration > Global Preferences > Cache Dynamic Channel Queries?) and Tag Cache.
6) Avoid to inclule JS code or file within a template/page which is not necessary. Mostly we create a common template/snippet for the head section of the page and it’s being embedded into main template {embed=“includes/header”} and keep including the JS even not being used for some pages.
You can use Minimee to minimize and cache your CSS and JS files.
7) Avoid to use so many if and if:else conditions into a template. Instead of it switch can be used with the help of Switchee plugin.
8) There is tracking feature in ExpressionEngine. Some trackings can be disabled if not necessary. Tracking can be disabled from Control Panel > Admin > Security and Privacy > Tracking Preferences.
9) Enable GZIP: GZIP can be enabled from Control Panel -> Admin > System Administration > Output and Debugging.
See How gzip compression works.
10) Avoid to use of excessive PHP code into a template. Instead of using PHP code into template, you should develop plugin to populate the data.
GZIP performs best on text-based assets: CSS, JavaScript, HTML.- All modern browsers support GZIP compression and will automatically request it.
- Your server must be configured to enable GZIP compression.
- Some CDNs require special care to ensure that GZIP is enabled.
GZIP is a generic compressor that can be applied to any stream of bytes. Under the hood, it remembers some of the previously seen content and attempts to find and replace duplicate data fragments in an efficient way. (If you're curious, here's a great low-level explanation of GZIP.)
However, in practice, GZIP performs best on text-based content, often achieving compression rates of as high as 70-90% for larger files, whereas running GZIP on assets that are already compressed via alternative algorithms (for example, most image formats) yields little to no improvement.
All modern browsers support and automatically negotiate GZIP compression for all HTTP requests. You must ensure that the server is properly configured to serve the compressed resource when the client requests it.The above table shows the savings that GZIP compression produces for a few of the most popular JavaScript libraries and CSS frameworks. The savings range from 60 to 88%, and the combination of minified files (identified by “.min” in their filenames), plus GZIP, offers even more savings.
Apply content-specific optimizations first: CSS, JS, and HTML minifiers.
Apply GZIP to compress the minified output.
Enabling GZIP is one of the simplest and highest-payoff optimizations to implement, and yet, many people don't implement it. Most web servers compress content on your behalf, and you just need to verify that the server is correctly configured to compress all the content types that benefit from GZIP compression.
The HTML5 Boilerplate project contains sample configuration files for all the most popular servers with detailed comments for each configuration flag and setting. To determine the best configuration for your server, do the following:
Find your favorite server in the list.
Look for the GZIP section.
Confirm that your server is configured with the recommended settings.
A quick and simple way to see GZIP in action is to open Chrome DevTools and inspect the “Size / Content” column in the Network panel: “Size” indicates the transfer size of the asset, and “Content” the uncompressed size of the asset. For the HTML asset in the preceding example, GZIP saved 98.8 KB during the transfer.
Note: Sometimes, GZIP increases the size of the asset. Typically, this happens when the asset is very small and the overhead of the GZIP dictionary is higher than the compression savings, or when the resource is already well compressed. To avoid this problem, some servers allow you to specify a minimum filesize threshold.
Finally, while most servers automatically compress the assets for you when serving them to the user, some CDNs require extra care and manual effort to ensure that the GZIP asset is served. Audit your site and ensure that your assets are, in fact, being compressed.
Why Your Website Could be Performing Slowly
Here are our Top 10 Reasons for Slow Loading Websites.
Unoptimized Images
A large volume of unoptimized images is usually the most common reason behind website slowness. High-resolution images can consume lots of bandwidth while loading. Uploading larger sized images and then scaling them down can unnecessarily increase the size of your web page – causing your website to load slowly.
The image format is another important factor to consider.
For example, JPEG images are much smaller in size compared to other image formats like PNG or GIF. Quite naturally, your web page will load faster if you are using JPEG images instead of PNG/GIF.
Takeaways:
Check the file size of your images, anything above 1MB is really unacceptable.
Use JPEG instead of PNG, especially for larger images. Icons are ok.
Use waterfall tests to easily scan image sizes and take corrective action.
Unoptimized images can cost you money in form of bandwidth overage.
2. JavaScript Issues
The availability of JavaScript/jQuery plugins has made it really convenient to add dynamic content to websites. However, if implemented incorrectly, JavaScript can cripple your website’s page load speed.
It takes time for jQuery & JavaScript to be loaded, interpreted and executed. So if you are using multiple API calls to render JavaScript/jQuery data, it can result in significant delay while loading the web pages.
Takeaways:
Script bloat is real. Audit your JavaScript scripts to see what you really need and remove what you don’t.
Asynchronous loading is a must.
Consider using something like Segment or Google Tag Manager. A single script for all your tools!
3. Too Much Flash Content
Although Flash is a great tool for adding interactivity to your website, it is highly likely contributing to your slow page load speed. Flash content is usually bulky in size and the bigger the file size is, the slower your pages will load.
Reducing the size of your Flash files or eliminating it altogether would improve your page loading speed significantly. If you are willing to make your website faster, you should look for HTML5 alternatives to replace your existing Flash content.
Takeaways:
Flash is very bulky and is not good for performance.
Flash used to be cool. It’s not anymore.
Look for HTML5 replacements.
4. Excessive HTTP Requests
Having loads of JavaScript, CSS, and image files can lead to too many HTTP requests. When a user visits your web page, the browser performs several requests to load each of these files – which can significantly reduce the page load speed.
Takeaways:
Use Sprites to reduce HTTP requests.
Reduce the number of files on your pages where possible. Includes CSS, images, javascript.
Minify your CSS and Javascript files reduces # of total files users will have to download.
5. Not Making Use of Caching Techniques
Caching is known to improve the performance of websites by leaps and bounds. If you’re not caching, you’re missing out. It’s a technique that let’s you store frequently used data points in the ‘cached memory’.
Any subsequent requests for the same content gets served from the cached memory, thus speeding up the whole data retrieval process.
By implementing browser/HTTP caching and server-side caching, you are likely to experience a huge improvement in the performance of your website.
Takeaways:
Caching drastically improves performance.
You can cache a bunch of things from HTTP, Database Queries, to images.
If you can cache something, do it. But do it carefully so you don’t mess something up. It can be tricky.
6. Unclean Code
Another common culprit for website slowness is unclean coding. When you make your website, excessive white spaces, inline stylings, empty new lines and unnecessary comments can make the website stylesheet grow larger in size.
By removing these unnecessary elements, you can compress the code, reduce the file size and improve the overall page load time and if you’re tracking rankings you’ll probably see a boost in your SEO performance too. In technical terms, this process is known as minifying. If you are not comfortable with coding, there are several online tools that can be used to clean and minify your stylesheet files.
Takeaways:
Attention to detail matters.
Don’t be lazy and use inline CSS
Try not to create multiple CSS stylesheets when you can use a single one.
Minify!
7. Not Using gZIP Compression
By enabling gZIP compression, you instruct the server to wrap all the web objects (images, CSS, JavaScript files etc) in a single container before they are sent over to the requesting browser.
Compression lowers response time by reducing the size of data being transferred between your server and the visitors’ browser, which in turn helps in serving the requested content much faster.
If you are yet to enable gZIP compression on your website, then it’s the first thing you should do without wasting any further time.
Takeaways:
gZIP compression is an easy performance win.
It wraps up all your web objects (images, CSS, jS) in a single container to be sent to requesting browser
8. Too Many Ads
No doubt display advertisements are great for monetizing high traffic websites.
But that shouldn’t come at the cost of compromised performance or user experience. Don’t let too many ads be another reason why your website is slow!
The most obvious impact of overloading your website with advertisements is the addition of HTTP requests, which would need additional processing time.
Especially the rich media ads – like pop unders, interstitials and auto downloads – may create hundreds of HTTP requests making your website unresponsive.
To sum things up, limiting the number of display advertisements will ensure better performance for your website.
Takeaways:
Advertisements are additional HTTP requests and slow down page loading time.
Use them only where you need to, it will improve performance, UX, and CTR’s to your ads.
9. Not Using a CDN Service
A CDN service is a distributed network of independent servers deployed in different geographic locations, that can serve web content to visitors with high availability and high performance.
Depending upon the geographic location of your visitor, the requested content gets served by the node located at the nearest available data center. It would minimize the round-trip-time (RTT) and serve the requested content in a much quicker time.
Takeaways:
Not mandatory, but CDN can help. Especially if you have visitors from around the world.
CDN caches frequently accessed data in geographically distributed datacenters.
They can help minimise round-trip-time (RTT) and serve content faster for your audiences.
10. Bad Hosting
Your web hosting service provider makes a huge difference when it comes to website performance. Yes, your slower-than-average page load speed may not be entirely your own fault.
If you have tried correcting all the above-mentioned causes and yet your website seems to be responding slowly, then switching your hosting provider may just solve your problem. Choose a hosting provider that offer performance optimisation services bundled in the price of the hosting.
Real managed hosting should include this.
For example, we offer custom web servers, built for each client individually and according to his web site’s needs. We know how each tool will best interface with the most popular scripts on the market today,including Drupal, WordPress, Expression Engine, Joomla and more.
Slow loading websites shouldn’t “be a thing” if your hosting provider knows what they are doing.
Quick Guide to Speed up Your Expression Engine Website
1. Cache
Cache, cache and cache. It’s the first step to make your site faster. It’s great news that expressionengine comes with excellent cache features – query cache, tag cache, template cache etc – turn them on. Its important for Expressionengine SEO too.
Query Cache – Query Caching caches the output of your database, saving each query as a text file. When your visitors access your web pages, the cache files are examined to see if the particular queries being requested exist in cached form. If they do, ExpressionEngine uses the cached data instead of querying your database. This provides a significant reduction in your overall database load. The query caching system is completely dynamic.
This feature is found under Admin>Weblog Administration > Global Weblog Preferences.
NOTE: Dynamic weblog query caching will cause weblog queries to not behave as expected when set to: orderby=”random”
Tag Cache – The Tag Caching system lets you cache the output of individual tags. This enables you to display sections of your pages completely dynamically while leaving others to display statically. When the time expires, the cache is automatically refreshed.
Template Caching – Template Caching (or Dynamic Page Caching) lets you cache entire templates. To enable Template caching, click the “Preferences” link in your Templates page.
NOTE: Dynamic Page Caching will supersede Tag Caching. There is no increased benefit to using tag caching and page caching together. When page caching is on, no other caching setting matters.
Also, if you have any third party scripts with EE which take feeds from other site, use cache for them too.
2. Query Disabling – The disable= parameter is available in the {exp:weblog:entries} tag. It allows you to turn off aspects of the tag that you might not be using in order to improve performance. The weblog tag is designed to fetch a lot of information by default: Categories, custom fields, member data, etc. Depending on how you use the tag, some of this data may not be needed. Through the use of the “disable” parameter you can turn off aspects of the tag in order to make it more lightweight.
3. Enable Gzip Compression – GZIP compression saves as much as 70% of the size on a text-heavy webpage. You can turn on gzip compression for your expressionengine site from Admin › System Preferences › Output and Debugging Preferences – Enable GZIP Output?
4. Data Pruning – ExpressionEngine has data pruning feature which allows you to “prune” or remove old weblog entries, comments, forum posts, etc. based on various criteria – which makes your database faster, clean and tidy.
5. Embed javascript/css properly – If possible, don’t use template for javascript and css, just drop them on folder and include them on your header. If you need to create javascript or css style template, don’t embed them like other template – that is include like
<link rel="stylesheet" href="{stylesheet=template_group/styles.css}" type="text/css" media="screen, projection" />
rather than
<link rel="stylesheet" href="{path=template_group/styles.css}" type="text/css" media="screen, projection" />
6. Don’t Save template as file – saving templates as files can marginally increase disk i/o as each template must be retrieved from disk in addition to the standard database query
7. Compress javascript if you have – if you have mootools, jquery, prototype, yui etc – use compressed version.
8. Disable tracking – If you have very large traffic, you can turn off few tracking things which might reduce database activity. You will find them in your config.php files.
9. Avoid template embedding – avoid to embedding template as much as possible.
10. Use cookie instead of session – Don’t run sessions. Use cookies only. You can find it from –
Admin › System Preferences › Security and Session Preferences
Beside these – there are many things to speed up your site such as lighter images(png version), lighter css, error free html code etc.
