Mehr Performance für WordPress - WordCamp Köln
•
4 likes•3,770 views
The document discusses ways to improve WordPress performance, including optimizing images, minifying and combining CSS and JavaScript files, conditionally loading scripts, caching content, optimizing databases, and prioritizing above-the-fold content. It also provides examples of using .htaccess files, child themes, and hooks to optimize site performance.
Report
Share
Mehr Performance für WordPress - WordCamp Köln
- 1. Mehr Performance für WordPress Walter Ebert WordCamp Köln 6./7. Juni 2015 https://www.flickr.com/photos/renespitz/4403612594https://www.flickr.com/photos/renespitz/4403612594
- 4. GPRS EDGE UMTS HSDPA LTE 1 10 100 1000 10000 100000 http://commons.wikimedia.org/wiki/File:MobileBitRate-logScale.svghttp://commons.wikimedia.org/wiki/File:MobileBitRate-logScale.svg
- 5. Nicht nur Mobile • Autos • Smart-TVs • Spielekonsolen • TV-Sticks • Smart Watches • Internet der Dinge https://twitter.com/klick_ass/status/600714520881963009https://twitter.com/klick_ass/status/600714520881963009
- 11. Profiler in Eigenbau function meins_profiler() { $profiler = sprintf( '%d queries in %.3f seconds using %.2fMB memory', get_num_queries(), timer_stop( 0, 3 ), memory_get_peak_usage() / 1024 / 1024 ); echo '<!-- ' . $profiler . ' -->'; } add_action( 'wp_print_footer_scripts', 'meins_profiler' );
- 14. Performance-Budget Zum Beispiel • Antwortzeit < 0,4 S. • Start Browserrendering < 1,0 S. • Vollständig geladen < 3,0 S. • Gesamter Seitenumfang < 0,5 MB http://timkadlec.com/2014/11/performance-budget-metrics/ http://timkadlec.com/2014/05/performance-budgeting-with-grunt/ http://cognition.happycog.com/article/designing-with-a-performance-budget https://www.youtube.com/watch?list=PLYo5nh8xQFpkwsu9QNlCpPGkmCCuTTWDJ&v=yqejmZrtmNg
- 15. .htaccess <IfModule mod_headers.c> Header set Connection Keep-Alive </IfModule>
- 16. .htaccess <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE application/atom+xml application/javascript application/json application/ld+json application/rss+xml application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/svg+xml image/x-icon text/css text/html text/plain text/vtt text/x-component text/xml </IfModule>
- 17. .htaccess <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 week" ExpiresByType text/css "access plus 1 year" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" ExpiresByType image/x-icon "access plus 1 week" ExpiresByType text/x-component "access plus 1 month" ExpiresByType text/html "access plus 0 seconds" ExpiresByType application/javascript "access plus 1 year" ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>
- 19. http://www.zend.com/en/resources/php7_infographichttp://www.zend.com/en/resources/php7_infographic
- 20. Datenbank MyISAM InnoDB→ ALTER TABLE `wp_options` ENGINE = InnoDB; /etc/mysql/my.cnf [mysqld] query_cache_size = 0 query_cache_type = 0 innodb_buffer_pool_size = 512M
- 21. Caching-Plugins Fullpage file caching, WP 4.2.2, Linux, Apache 2.4.6, PHP 5.6.9, MariaDB 15.1 ab -n 100 -c 3 http://localhost/wp1/ ab -n 100 -c 3 http://localhost/wp1/template-sticky/ ab -n 100 -c 3 http://localhost/wp1/sample-page/ Startseite Post Page Ohne 574 388 378 W3 Total Cache 21 1 1 WP Super Cache 16 1 1 Hyper Cache 5 5 5 ZenCache 4 4 4 Median Antwortzeiten (ms)
- 23. http://httparchive.org/http://httparchive.org/ Mai 2011 0,8 MB Mai 2015 2,0 MB
- 32. Child-Themes style.css /* Theme Name: Meins Template: twentyfifteen */ @import url( "../twentyfifteen/style.css" ); functions.php function meins_wp_enqueue_scripts() { wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' ); wp_enqueue_style( 'child', get_stylesheet_uri(), array( 'parent' ) ); } add_action( 'wp_enqueue_scripts', 'meins_wp_enqueue_scripts' ); https://codex.wordpress.org/Child_Themes http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
- 33. Konditionelles Laden function meins_enqueue_scripts() { if ( is_front_page() ) { wp_enqueue_style( 'meins-startseite', get_stylesheet_directory_uri() . '/front-page.css' ); wp_enqueue_script( 'masonry' ); } } add_action( 'wp_enqueue_scripts', 'meins_enqueue_scripts' ); http://codex.wordpress.org/Conditional_Tags https://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_Scripts_Includ ed_and_Registered_by_WordPress Oder andere Conditional Tags: is_home(), is_page(), is_single(), is_archive(), usw.
- 34. Hooks entfernen function meins_remove_scripts() { if ( ! is_page_template( 'events.php' ) ) { remove_action( 'wp_enqueue_scripts', array( 'EM_Scripts_and_Styles', 'public_enqueue' ) ); } } add_action( 'wp_enqueue_scripts', 'meins_remove_scripts', 9 ); http://codex.wordpress.org/Function_Reference/remove_action
- 35. Hooks entfernen function meins_remove_scripts() { if ( ! is_page_template( 'events.php' ) ) { remove_action( 'wp_enqueue_scripts', array( 'EM_Scripts_and_Styles', 'public_enqueue' ) ); } } add_action( 'wp_enqueue_scripts', 'meins_remove_scripts', 9 ); http://codex.wordpress.org/Function_Reference/remove_action -14 HTTP Requests -220 KB -2 MySQL Queries
- 36. Javascript + CSS • Dateien minifizieren • Dateien kombinieren Plugins • Autoptimize • W3 Total Cache
- 37. Javascript + CSS JS-Bibliotheken • https://github.com/filamentgroup/shoestring • http://microjs.com/ CSS-Frameworks • Pure 17 KB • MUI 37 KB • Bootstrap 115 KB
- 38. Responsive Design + Server Side Components (RESS) if ( wp_is_mobile() ) { // z.B. keine Werbung } else { // Kohle schäffeln } http://www.lukew.com/ff/entry.asp?1392 https://codex.wordpress.org/Function_Reference/wp_is_mobile Nicht in Kombination mit Fullpage-Caching nutzen
- 39. Caching-Funktionen wp_cache_set( 'meine-daten', $data ); $daten = wp_cache_get( 'meine-daten' ); set_transient( 'meine-daten', $data ); $daten = get_transient( 'meine-daten' ); https://codex.wordpress.org/Class_Reference/WP_Object_Cache https://codex.wordpress.org/Transients_API
- 40. WP Cron function meins_update_function() { $response = wp_remote_get( 'http://example.com/data.json' ); if ( is_array( $response ) ) { set_transient( 'meine-daten', $response['body'] ); } } add_action( 'meins_update_hook', 'meins_update_function' ); function meins_cronjobs() { if ( ! wp_next_scheduled( 'meins_update_hook' ) ) { wp_schedule_event( time(), 'hourly', 'meins_update_hook' ); } } add_action( 'wp', 'meins_cronjobs'); https://codex.wordpress.org/Function_Reference/wp_schedule_event https://tommcfarlin.com/wordpress-cron-jobs/
- 42. Critical Rendering Path a.k.a. Above the Fold Content
- 43. Critical Rendering Path a.k.a. Above the Fold Content a.k.a. 100/100 Punkte https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=de https://developers.google.com/speed/docs/insights/about?hl=de
- 44. Javascript im Footer laden function meins_scripts() { wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/beispiel.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'meins_scripts' ); https://codex.wordpress.org/Function_Reference/wp_enqueue_script
- 45. jQuery im Footer laden function meins_wp_enqueue_scripts() { if ( ! is_user_logged_in() ) { wp_dequeue_script( 'jquery-core' ); wp_enqueue_script( 'jquery-core', includes_url( '/js/jquery/jquery.js' ), array(), '', true ); } } add_action( 'wp_enqueue_scripts', 'meins_wp_enqueue_scripts' );
- 46. Javascript asychron laden function meins_async_script( $tag, $handle, $src ) { switch( $handle ) { case 'script-handle-1': case 'script-handle-2': case 'script-handle-3': $tag = str_replace( '<script', '<script async defer', $tag ); break; } return $tag; } add_filter( 'script_loader_tag', 'meins_async_script', 10, 3 ); Nur für Skripte ohne Abhängigkeiten https://codex.wordpress.org/Function_Reference/wp_enqueue_script https://developer.wordpress.org/reference/hooks/script_loader_tag/ https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/
- 47. Critical CSS function meins_critical_css() { echo '<style>' . file_get_contents( get_stylesheet_directory() . '/critical.css' ) . '</style>'; } add_action( 'wp_head', 'meins_critical_css' ); https://css-tricks.com/authoring-critical-fold-css/
- 50. Non-Critical CSS function meins_critical_css() { echo '<style>' . file_get_contents( get_stylesheet_directory() . '/critical.css' ) . '</style>'; } add_action( 'wp_head', 'meins_critical_css' ); function meins_full_css() { echo '<link rel="stylesheet" type="text/css" href="' . get_stylesheet_uri() . '">'; } add_action( 'wp_footer', 'meins_full_css', 1 );
- 51. CSS asynchron laden function meins_loadCSS() { echo '<script>'. file_get_contents( get_stylesheet_directory() . '/loadCSS.js' ) . '</script>'; } add_action( 'wp_head', 'meins_loadCSS', 7 ); https://github.com/filamentgroup/loadCSS
- 52. CSS asynchron laden function meins_loadCSS() { echo '<script>'. file_get_contents( get_stylesheet_directory() . '/loadCSS.js' ) . '</script>'; } add_action( 'wp_head', 'meins_loadCSS', 7 ); function meins_async_style( $tag, $handle ) { switch( $handle ) { case 'style-handle-1': preg_match( "/href='([^']+)'/", $tag, $matches ); if ( isset( $matches[1] ) ) { $tag = '<script>loadCSS("' . esc_attr( $matches[1] ) . '");</script>' . '<noscript>' . trim( $tag ) . '</noscript>'; } break; } return $tag; } add_filter( 'style_loader_tag', 'meins_async_style', 10, 2 ); https://github.com/filamentgroup/loadCSS https://developer.wordpress.org/reference/hooks/style_loader_tag/
- 55. SPDY / HTTP 2.0 Best Practices • Viele kleine Dateien • Eine Domain Worst Practices • JS kombinieren • CSS kombinieren • Sprites • Iconfonts • Data URIs http://caniuse.com/spdy https://http2.github.io/faq/#what-are-the-key-differences-to-http1x