Title: Rendering Issues on Page Load
Last modified: February 9, 2017
---
# Rendering Issues on Page Load
* Resolved [andyt1980](https://wordpress.org/support/users/andyt1980/)
* (@andyt1980)
* [9 years, 3 months ago](https://wordpress.org/support/topic/rendering-issues-on-page-load/)
* Hi,
* I’m noticing a couple of strange issues mainly in Chrome on first page load.
The slider jumps to the right for a fraction of a second before centering itself,
also a very small strip of the second slide appears below the slider for a fraction
of a second.
* Wordpress: 4.7.2
Plugin Version: 2.5.1.3 URL: [http://tinyurl.com/h7943yu](http://tinyurl.com/h7943yu)
* Any help much appreciated.
Viewing 4 replies - 1 through 4 (of 4 total)
* [akyusa01](https://wordpress.org/support/users/akyusa01/)
* (@akyusa01)
* [9 years, 3 months ago](https://wordpress.org/support/topic/rendering-issues-on-page-load/#post-8787441)
* This is not typical to Soliloquy Carousel, but is rather typical of what is known
as a FOUC (flash of unstyled content). FOUCs are caused by issues with the loading
performance of the site.
* I ran your url through the GTMetrix pagespeed tool which provided the following
result: [http://gtmetrix.com/reports/studio154.it/u8yqXwdO](http://gtmetrix.com/reports/studio154.it/u8yqXwdO)
* There are a number of issues which could be implemented to improve the performance,
this in turn will allow Soliloquy to perform better as well.
* The recommendation to serve scaled images is a large factor in the page performance.
You may wish to inspect the slider when it is displayed on the largest browser
you support and change the Slider Dimensions under the Config tab to match those
dimensions.
* Following this, you can enable the height and width parameters on the image tags
under the Config tab when editing your slider, which resolves the “Specify image
dimensions” recommendation for slider images. You’ll want to add image dimensions
to all other images used on the site as well – specifying a width and height
for all images allows for faster rendering by eliminating the need for unnecessary
reflows and repaints.
* Use a plugin like EWWW Image Optimizer to losslessly compress images.
* To address the Expires Headers, Browser Caching and GZIP Compression recommendations,
open the .htaccess file in the root directory of your WordPress installation
and add the following:
* ## BEGIN Disable ETags ##
Header unset ETag FileETag None ## END Disable ETags
* ## BEGIN GZIP Compression ##
mod_gzip_on Yes mod_gzip_dechunk
Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include
handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include
mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude
rspheader ^Content-Encoding:.*gzip.* AddOutputFilterByType DEFLATE
text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE
text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE
application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType
DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript ## END GZIP Compression##
* ## EXPIRES CACHING ##
ExpiresActive On ExpiresByType
image/jpg “access 1 year” ExpiresByType image/jpeg “access 1 year” ExpiresByType
image/gif “access 1 year” ExpiresByType image/png “access 1 year” ExpiresByType
text/css “access 1 month” ExpiresByType application/pdf “access 1 month” ExpiresByType
text/x-javascript “access 1 month” ExpiresByType application/x-shockwave-flash“
access 1 month” ExpiresByType image/x-icon “access 1 year” ExpiresDefault “access
7 days” ## EXPIRES CACHING ##
* You can try setting all JavaScript to defer by adding the following to your theme’s
functions.php file
* //* Defer parsing of JavaScripts
function defer_parsing_of_js ( $url ) { if (
FALSE === strpos( $url, ‘.js’ ) ) return $url; if ( strpos( $url, ‘jquery.js’))
return $url; return “$url’ defer “; } add_filter( ‘clean_url’, ‘defer_parsing_of_js’,
11, 1 );
* Please note that defering all JavaScript may interfere with some plugins, and
you’ll want to test thoroughly your site’s front-end appearance after including.
If it breaks a plugin just remove from your functions.php file.
* You can remove query strings from JS and CSS files by adding the following to
your theme’s functions.php file: [https://gist.github.com/ericakfranz/a7f172fd63aaf01ede4c](https://gist.github.com/ericakfranz/a7f172fd63aaf01ede4c).
There is a [free WP plugin](https://wordpress.org/plugins/remove-query-strings-from-static-resources/)
that can do this for you automatically
* Minifying the CSS for the site is recommended. Plugins like BWP Minify or Autoptimize
are an easy way to implement this. If you choose to enable JavaScript minify,
be sure to thoroughly check the functionality of your site as this can break
JavaScript dependent plugins. If this breaks a plugin you can simply disable
the JavaScript minification.
* Once you’ve made these changes you can re-test the url at GTMetrix to check the
improvement.
- This reply was modified 9 years, 3 months ago by [akyusa01](https://wordpress.org/support/users/akyusa01/).
* Thread Starter [andyt1980](https://wordpress.org/support/users/andyt1980/)
* (@andyt1980)
* [9 years, 3 months ago](https://wordpress.org/support/topic/rendering-issues-on-page-load/#post-8787565)
* Unfortunately those .htaccess entries cause an Internal Server Error 500 and
deferring JS in functions file caused a PHP error.
Although I’m aware my server
does support Expires Headers, Browser Caching and GZIP Compression.
* I have also tested the slider on a much faster server that uses the Litespeed
Web server with caching and the issue is still visible their too. So I’m not
convinced its a server performance issue.
- This reply was modified 9 years, 3 months ago by [andyt1980](https://wordpress.org/support/users/andyt1980/).
* [akyusa01](https://wordpress.org/support/users/akyusa01/)
* (@akyusa01)
* [9 years, 2 months ago](https://wordpress.org/support/topic/rendering-issues-on-page-load/#post-8836780)
* Hi [@andyt](https://wordpress.org/support/users/andyt/) 🙂
* I’m unable to access the link anymore, is there another link I should be viewing?
* Thread Starter [andyt1980](https://wordpress.org/support/users/andyt1980/)
* (@andyt1980)
* [9 years, 2 months ago](https://wordpress.org/support/topic/rendering-issues-on-page-load/#post-8836812)
* The sites now gone live, I used a slider called Smart slider in the end which
had no rendering issues.
Viewing 4 replies - 1 through 4 (of 4 total)
The topic ‘Rendering Issues on Page Load’ is closed to new replies.
* 
* [Slider by Soliloquy - Responsive Image Slider for WordPress](https://wordpress.org/plugins/soliloquy-lite/)
* [Frequently Asked Questions](https://wordpress.org/plugins/soliloquy-lite/#faq)
* [Support Threads](https://wordpress.org/support/plugin/soliloquy-lite/)
* [Active Topics](https://wordpress.org/support/plugin/soliloquy-lite/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/soliloquy-lite/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/soliloquy-lite/reviews/)
* 4 replies
* 2 participants
* Last reply from: [andyt1980](https://wordpress.org/support/users/andyt1980/)
* Last activity: [9 years, 2 months ago](https://wordpress.org/support/topic/rendering-issues-on-page-load/#post-8836812)
* Status: resolved